UI Tasarım Modelleri: Ortak kullanılabilirlik sorunlarına kanıtlanmış çözümler

11 Dk.
UI Tasarım Desenleri

Web sitenizin menüsü nasıl yapılanmalıdır? Neden bazı web sitesi operatörleri için diğerlerinden daha abone almak daha kolaydır? Kullanıcıların web sitenizdeki formu doldurmasını veya yok saymalarını sağlayan nedir? Bir tasarımcı olarak, ben kullanıcı arayüzü tasarımı ve web kullanılabilirliği hakkında sorular ele var - Bu makalede cevapları bulacaksınız.

Kullanıcı Arabirimi (UI) Tasarım Desenleri nedir?

Kullanıcı Arabirimi (UI) Tasarım Desenleri, zaten başarıyla analiz edilmiş ve çözülmüş kullanılabilirlik sorunları kitaplıklarıdır. Ancak, bu bire bir kabul edilmemelidir. Ancak, uyumlu bir kullanıcı deneyimi için kapsamlı bir temel sağlar. UI Desenleri, iş akışınızı kolaylaştırmak ve hızlandırmak için tasarlanmıştır.

UX Design & Web Usability hakkında daha fazla ipucu

Olduğu gibi bu makale İyi kullanılabilirlik, kullanıcılarınıza siteniz, ürününüz veya markanız aracılığıyla sorunsuz bir şekilde rehberlik yardımcı olur.

UI Tasarım Desenleri Formülü

Hangi tasarım modellerinin web siteniz için uygun olduğunu ve bunları nasıl doğru kullanacağınızı nasıl biliyorsunuz? Chris Bank e-kitabında yorumladı Mobil UI Tasarım Desenleri aşağıdaki yordam:

  • Sorun algılama: Kullanıcı web sitenizde ne elde etmeye çalışıyor ve hangi sorunlarla karşılaşır? Sorunları tek bir cümlede formüle etmeye çalışın.
  • Çözüm yaklaşımı: Diğer tasarımcılar bu sorunu çözdü mü? Eğer öyleyse, nasıl?
  • Gerçek-Yaşam-Örnek: Örneklere bakın ve bunları bir kullanıcı olarak gözden geçirin. Belirli bir görevi çözmenize neyin yardımcı olduğunu çözümlemeye çalışın. Seni düşündüren, hatta belki de tedirgin olan şeyi düşün. 
  • Kullanımı: Analizinizin sonuçlarını özetleyin. Ziyaretçilere değer katmak için bunları web sitenizde nasıl uygulayabilirsiniz? Hangi tasarım desenlerini onsuz yapmalısınız? Stil kılavuzunuz varsa, sonuçlarınızı oraya eklemeniz gerekir.
UI Tasarım Modelleri: Ortak kullanılabilirlik sorunlarına kanıtlanmış çözümler

UI Tasarım Desenleri 4 kategori

UI Tasarım Desenleri dört kategoriye ayrılabilir, ben kısaca bu bölümde size sunacak. Ne yazık ki, tüm UI tasarım desenleri kapsayacak şekilde mümkün olmayacaktır. Konunun daha derinine inmek istiyorsanız, web size daha fazla okuma fırsatı sunar. UI Tasarım Desenleri ile ilgili birkaç yararlı kaynak şunlardır:

1. En yaygın navigasyon öğeleri

Navigasyon, kullanıcı için etkileşimin en önemli unsurlarından biridir: yalnızca sayfanız için bir içerik tablosu olarak değil, aynı zamanda bir rehber olarak da hareket eder. Aslında genellikle üst veya yan yerleştirilir aslında hiyerarşik nedenlerle esas olarak oldu. Navigasyon ile, bir bakışta o sitemizde neler yapabileceğini ve nerede şu anda bulunduğu kullanıcı göstermek.

Yıllar süren uygulamalar sayesinde, bu bilgiyi öyle bir içselleştirdik ki minimalizme doğru eğilim navigasyonda durmak zorunda değil. Tasarım desenleri bu nedenle oldukça özelleştirilebilir - ya da hatta sayfanızın çalışması için özelleştirilmiş olması gerekir.

ekran görüntüsü-www.castoretpollux.com-2020.06.11-18-05-59
Web sitesi Castor & Pollux

Castor et Pullex UI Model kurallarına bağlı kalmış ve hala onları kendi taraflarına tek tek uyarlanmıştır: sağ üst ekranda bulunan ve kaydırma yaparken "yapışkan" hale gelen bir navigasyon. Tekrar tekrar kullanıcı geri getiriyor logosu "güvenli sığınak" - ana sayfa.

Kendi içinde etkileşim bir sürü sağlar ve böylece neredeyse biraz kaotik görünüyor bir web sitesi, zaten iyi bilinen tasarım çözümleri nin kullanımı ile hoş bir kullanılabilirlik alır.

"Yapışkan" navigasyon, yukarıdaki örnekte açıklandığı gibi, web tasarımı harika bir buluş vardır. Sadece onlarla etkileyici animasyonlar görüntüleyebilirsiniz- onlar da web sitenizin web sitesi ziyaretçileri "A'dan B"ye daha hızlı olsun olun. One Pagers ile, onlar da ortak bir iş parçacığı gibi çalışır: kullanıcı nerede olduğunu ve ne olduğunu zaten gördü bilir.

Aynı ekmek kırıntıları için de geçerlidir: küçük sayfalar için, onlar çok mantıklı değil. Daha karmaşık sayfalarda, ancak, onlar harikalar çalışabilir. Onlar sadece evde yönlendirmek için kullanıcı yardımcı değil, aynı zamanda navigasyon herhangi bir konuma geri atlamak için.

Bu desenleri kullanmanın başka bir yolu aşağıdaki örnektedir:

Bu sitenin yaratıcıları mobil burger menüsünün bilgi benimsemiştir: bir yandan, kullanıcıya yabancı olmayan kendi sitesinde minimalist bir navigasyon kolaylaştırmak için. Öte yandan, hala ürün ön planda olmak için yeterli alan vermek için.

screenshot-demodern.com
Örnek proje Demodern

Bir şey trend çıktı - ama en azından yararlı olarak - navigasyon sözde biniciler vardır. Onlar bir arşivleme sistemi anımsatan ve hızlı ve sezgisel kullanıcılar tarafından anlaşılmaktadır. Burada da, yarı vasıflı orijinal sürümünde olduğu gibi ince-aşağı sürümünde de çalışır.

Bu arada, biniciler giderek birbirine bağlı olması gerekiyordu içerik görüntülemek için modal sekmeleri olarak kullanılmaktadır. Modal sekmeleri olarak, sayfaların diğer içerikleri göstermek için tamamen yeniden yüklenmesi gerekmemesi avantajına da sahiptirler. Özellikle dükkanların ürün sayfalarında WooCommerce aşağıdaki örneklerde olduğu gibi, sık sık onları görmek: 

UI Tasarım Modelleri: Ortak kullanılabilirlik sorunlarına kanıtlanmış çözümler
Görünümü Atlantik Verandası

Ardından, karşılaştırma daha az minimalist bir örnek:

UI Tasarım Modelleri: Ortak kullanılabilirlik sorunlarına kanıtlanmış çözümler
Örnek sayfası Bambu Giyim

Genellikle UI desenleri gerçek dünyanın etkileşimleri dayanmaktadır. Bu nedenle, fiziksel özellikleri gözden kaçırmamak ve/veya bunları kasıtlı olarak değiştirmek önemlidir. Bu, kullanıcının artık bu eylemleri ve sonuçlarını sezgisel olarak anlayamayacağı anlamına gelir. Bunu göstermek için, bir kez yukarıdaki örneği adapte var:

ekran görüntüsü-bambooclothing.co.uk-2020.06.11-18-33-55_modified

Klasör yapısının fiziksel özellikleri artık yok. Sekmeler artık yanlış yerleştirilmiş gezinme öğelerine benziyor. Elementlerin aidiyeti biraz kaybolur - neredeyse rasgele düzenlenmiş gibi görünüyor.

Taşma Menüleri ve "Bölüme Atla" Düğmeleri

Listemizi tamamlamak için taşma menüleri ve "Bölüme Atla" düğmeleri eksik olmamalıdır. "Bölüme Atla" düğmeleri genellikle sol alt köşede yer alır. Kullanıcının tek bir tıklamayla sayfanın üst bölümüne geri dönmesine izin verirler. Özellikle One Pagers ile, Bölüm Düğmeleri Atlamak mantıklı: Onlar zaman kazanmak ve uzun kaydırma yoluyla hayal kırıklığı önlemek.

Açılan menüler aslında sayfaların kullanılabilirliğini artırmak kendi kökeni daha az var. Yer kazanmak ve navigasyonda daha fazla içeriğe uyum sağlamak için tasarlanmıştır. Buna ek olarak, tasarım daha düzenli ve net görünüyor. Menüleri bırakma genellikle anti-desenler olarak adlandırılan tasarım desenleri arasında yer alıyor – çünkü web sayfasında gezinmeyi gerçekten kolaylaştırmıyor. Menüleri Bırak, ancak yine de önerilir. Sonuçta, onların işleyişi bilinen ve öğrenilir. Açılır menü için göstergeler genellikle aşağı işaret ringa kemiği desenleri vardır.

UI Tasarım Modelleri: Ortak kullanılabilirlik sorunlarına kanıtlanmış çözümler
Web sitesi Ehire

Düğmeler ve bağlantılar ben kasıtlı olarak sadece bu makalede kısaca adres, onlar da her tasarımcı için bilinen olmalıdır. Düğmelerin tasarımı ve animasyonu için neredeyse hiç sınırlama yoktur. Onların tarzı genellikle sunulan bilgilerin görsel düzenine bağlıdır. Onlar açıkça görünür olmalıdır Sayfanın birincil rengi ve ilgili içerikle gruplandırılabilen bir şekilde yerleştirilir.

Aynı bağlantılar için de geçerlidir: artık eskiden olduğu gibi, bir alt puan ile mavi olarak gösterilmesi gerekir. Ama varlıkları açık ve hepsinden önemlisi tek düze olmalı. Aldığınız düğmeler hakkında kapsamlı bilgi Burada.

Pagination - birden fazla sayfa arasında içerik paylaşımı - özellikle daha fazla sayıda ürün sunan e-ticaret mağazaları için önemlidir. Bu, birden çok sayfada içerik sunmak, yükleme süresini azaltmak ve içeriğini kolayca sindirilebilir bölümlere bölmek için kullanılır. FAZ gibi gazeteler de daha uzun makaleleri bölmek için pagination kullanın.

ekran görüntüsü-www.faz.net-2020.06.13-15-49-43
Örnek FAZ

Ayrıca, son yıllarda eğilim haline gelmiştir, sözde "yağ ayaklayıcı" şimdi öğrenilen UI desenlerinden biridir. Burada, örneğin, sık sık ziyaret edilen alt sayfalara bağlantı verebilir, iletişim bilgilerinizi depolayabilir ve birincil gezintide hiyerarşik olarak hiçbir şey kaybetmemiş yasal içeriği görüntüleyebilirsiniz. 

Altbilgi daha sonra kısmen sayfanızın içeriğinin farklı yapılandırılmış bir tablo olarak hareket eder. Ama aynı zamanda daha fazla bilgi için teaser bir tür olarak durabilir. Kullanıcı sayfanızda gezindikten sonra, altbilgi onu ürününüzle meşgul eden ilginç makaleler, sosyal medya bağlantıları ve co. gibi alakalı içerikler sunmaya devam edebilir.

2. Giriş ve Çıkış: İletişim ve Abone Formları

Veri koruma yönergelerinin yanı sıra, kullanıcı ihtiyaçlarına odaklanmak da faydalıdır. Özellikle mobil cihazlarda, bir giriş formu hızla hayal kırıklığı yol açabilir: Zaten küçük ekran, kullanım sırasında fiziksel ortam, zamansal yönü yanı sıra olası bir kararsız bağlantı hızla bir sinir gözyaşı testi temsil edebilir. Neyse ki, zaten bu sorunları ele almış bazı tasarım desenleri vardır.

Ipucu:

Web'de genel olarak olduğu gibi, aşağıdakiler geçerlidir: mümkün olduğunca kısa, gerektiği sürece. Çalışmalar yararsız sorular ekleyerek katılım bir çöküş olduğunu göstermiştir ve potansiyel olarak çok para mal olabilir.

Aşağıdaki, size en önemli ilkeleri göstermek için hayali bir form oluşturduk:

Form
Giriş Formları İlkeleri
  1. Göz İzleme Testleri bilgileri soldan sağa değil, yukarıdan aşağıya doğru düzenlendiğinde daha hızlı işlediğimizi tespit ettik. Bu nedenle, başlığı form alanının üzerine yerleştirmek ve yalnızca bir sütun oluşturmak tavsiye edilir.
  2. Kullanıcıya önceden belirlenmiş yer tutucularda örnek bir giriş sağlamak yararlıdır – böylece gerekli bilgiler önceden görselleştirilir. Yalnızca girişi zorlaştırdıkları için parçalanmış numara girişlerinden kaçınmalısınız. Ayrıca mekanlara toleranslı olmak için programlanmalıdır.
  3. Hata işleme önemli ve karmaşık bir konudur. Yıldız ve kırmızı kenarlı giriş alanı burada ui desenleri olarak kendilerini kanıtlamıştır. İdeal olarak, alanlar kendini açıklayıcı olmalıdır. Yine de, her zaman bir şey işe yaramazsa beklemelisiniz. Bu nedenle, yardım için çeşitli olanaklar sunmak esastır. Bunu yapmanın birkaç yolu vardır: havada gezinirken olası yardım sunan bir bilgi düğmesi. Veya form başarıyla göndermiyorsa küçük modals haşhaş.
  4. Yazar yazmaz geri bildirimde de almak için iyi bir yerdir. Parolalar söz konusu olduğunda, kullanıcıya seçtiği parolanın ne kadar güvenli olduğuna ilgili nitel bir değerlendirme yaptığı da kanıtlanmıştır. 
  5. Çok aşamalı formçeşitli psikolojik yararları vardır. İlk başta, daha net ve daha az yıldırıcı. Kullanıcı daha sonra da formda olduğu bir gösterge (burada yükleme çubuğu) ile gösterilirse, o tam olarak ne geliyor bilir. Erken çıkma olasılığı daha düşüktür. Kişisel bilgiler her zaman formun sonunda istenmelidir. Sonuçta, web sitesi ziyaretçizaten büyük ölçüde formu doldurdu varsa, onu zaten sonuç olmadan yatırım zaman vazgeçmek için daha zor olacaktır. Ayrıca sadece aslında gerekli olan bilgi istemek ve aynı zamanda isteği haklı çıkarmak için tavsiye edilir. Kullanıcılarınızdan bir şeye kaydolmalarını isterseniz, onlar için bir avantaj belirtmeniz tavsiye edilir - "Her zaman önce en iyi fırsatları elde edin". Son adımda, bundan sonra ne olacağı ve kullanıcının ne bekleyebileceği ve ne zaman beklendiği hakkında küçük bir genel bakış sunmalısınız.

Buna ek olarak, formlarınız otomatik doldurma (tarayıcıda depolanan veriler aracılığıyla) ve bilgilerin tanınmasını (posta kodu girdikten sonra şehir ekleme gibi) içermelidir. Burada, özellikle durumda WordPress zaten varsayılan olarak dahil edilmiş birçok form. 

Mümkünse, kaçınmak ya da en azından en az Captchas kullanımını tutmak gerekir. Yüksek sesle bu çalışmanın captchas formu ile yüzde 30 daha az etkileşime neden olabilir.

3. İçeriğinizi yapılandırma

Bir web sitesi operatörü olarak, özellikle sitenizin içeriğinin nasıl yapılandırDığını araştırmanız gerekir: Ziyaretçilerinizin sitenizde yol bulmasına yardımcı olurlar mı? İçeriğinize kolayca erişilebilir ve hiyerarşilerini anlayabilir misiniz? 

Kolay erişilebilirlik sorunu, özellikle sitenizi değişen koşullar altında görüntüleyen kullanıcılara hitap etmektedir. Örneğin, renk görme ve görme bozukluğu olan kişilerde. Erişilebilirlik ve erişilebilirlik konusunu daha derinlemesine araştırmak isterseniz, daha fazla bilgiyi burada bulabilirsiniz: 

Bir blogunuz veya çevrimiçi bir derginiz varsa, sorunu biliyor olabilirsiniz: Mümkün olduğunca eşit olarak sunmak istediğiniz bir çok ilginç içeriğe sahipsiniz. Uygun bir tasarım deseni sözde "Makale Listesi"dir. Burada içeriğinizi kategorilere ayırın ve aynı anda yalnızca küçük bir parçacık gösterirsiniz. Bu, kullanıcılarınızı bilgi yle doldurmadan bir bakışta birçok konuyu göstermenizi sağlar. Güzel bir örnek burada gösterir RAIDBOXES:

RAIDBOXES WP unboxed
Görünümü WordPress Dergi wp unboxed

Bu bölüm, kullanıcının ilgi alanlarına göre tüm içeriğin üzerinden uçmasını ve böylece kendisini neyin ilgilendirdiğini daha hızlı bulmasını sağlar.

Dikkat dağıtmadan belirli içerikleri sunmanıza izin vermek için modal kutuları kullanabilirsiniz. Bunlar sayfanızın geri kalanına aittir ve kullanıcının yalnızca içeriğine odaklanmasına izin verir. Bu gerekli ve önemli olabilir. Ancak, bu modals da bir anti-desen daha fazla olduğunu unutmayın: prensipte, onlar modal açık olduğu sürece manevra için herhangi bir odadan kullanıcı engellemek.

Ancak, modal kutular ziyaretçilerinizin içeriğinizi daha iyi anlamalarına yardımcı olabilir. Ancak, çok yaygın ya da görünüşte haksız yere tetiklenen modal kutuları hızla hayal kırıklığı ve çaresizlik duygusuneden olabilir.

Lightbox ve tam ekran modu da bu kategoriye aittir. Bir yandan, kullanıcınızın seçili içeriğe yakından bakmasını sağlar. Diğer taraftan, diğer etkileşimleri imkansız hale getirirler. Bu nedenle her zaman en az bir ufuk noktası sunmak önemlidir. Özellikle iyi burada bilinen resmin sağ üst kısmında bir X tıklayarak veya tekrar kapatmak için kutunun dışında tıklayarak vardır.

Slayt gösterileri de görüntüleri görüntülemek için popüler bir yoldur. Otomatik oynatma ve el ile gezinilen slayt gösterileri arasında bir ayrım yapılır. Galeriler genellikle küçük resim resimleri olarak listelenir ve slayt gösterileri ve/veya ışık kutuları kullanılarak büyütüldü.

Burada öncelikle işlevine göre hareket etmelidir: Ne tür resimleri temsil ediyormusunuz? Onlar tam ekran olarak kullanılabilir olması gerekiyor mu? Ve daha önemli olan nedir: bir bütün olarak içeriğiniz mi yoksa tek tek resimler mi? Gezinirken görüntülerinizi büyütebilen büyüteç gibi diğer seçeneklere başvurmaya değer mi? İkincisi özellikle e-ticaret popüler.

Ekran Görüntüsü Unsplash UI Tasarım Desenleri
Küçük resim görünümü üzerinde unsplash.com

unsplash.com resim galerisi ve ışık kutuları nın bir karışımını kullanır. Ancak, görüntüler küçük resim olarak görüntülenmez. Neden? Unsplash sadece indirmek için görüntüleri sunan bir platformdur. Bu, kullanıcıların ilk bakışta görüntü için veya karşı seçim yapabilmesi gerektiği anlamına gelir. Bu kararı verebilmek için görüntü çözünürlüğünün nispeten iyi olması gerekir. Küçük resimler bunun için çok küçük. Ve her görüntüyü tek tek tıklatmak veya bir slayt gösterisinde gezinmek sayfanın verimliliğini birçok kez en aza indirir.

Uygulama ve tasarım süreci boyunca, değer/değer ve önem sorusunu asla gözden kaçırmamalısınız.

4. Sosyal kanalları çal

Bu, kullanıcılarınızı sosyal medya kanallarınıza yönlendiren ve/veya sosyal etkileşimi kolaylaştıran desenler için geçerlidir. Bunun ayrıntılı örneklerini bulabilirsiniz Burada Okuma.

Sonuç

Son olarak, iki ana yaklaşım önerebilirim. İlk olarak, ilham toplamak için mümkün olduğunca çok sayıda web sitesini ziyaret edin ve analiz edin: Diğer tasarımcılar bazı sorunları nasıl çözdüler veya çözmedi? İnternette sörf yaparken beni hayal kırıklığına uğratan nedir? Ne zaman olumlu şaşırdım son kez - ve neden? 

İkinci olarak, kullanıcı olmadığınızı her zaman unutmayın. Web sitenizin ziyaretçileri şaşırtıcı derecede farklı düşünüyor. Ürününüzü henüz bilmiyor olabilirsiniz. Bu nedenle, sitenizde kullanılabilirlik aslında ne olduğunu değerlendirmek için tekrar tekrar birkaç test gerçekleştirin.

UI Desenleri hakkında Sonja'ya ne gibi sorularınız var?

Lütfen yorum işlevini kullanın. Web tasarımı ve geliştirme hakkında yeni mesajlar ve ipuçları hakkında bilgi sahibi olmak ister misiniz? O zaman bizi takip et. TwitterFacebook ya da bizim aracılığıyla Bülten.

Yapraklı Auckland'da oyun tasarımı ve yaratıcı yazarlık eğitimi aldıktan sonra, Sonja Hoffmann web ve uygulama tasarımı ve geliştirme konusunda uzmanlaşmıştır. Onun odak gamification ve kullanıcı motivasyonu ve deneyimi keşfetmek, teknolojik eğilimler için bir tutku ve merak ile birleştiğinde.

Benzer makaleler

Bu makaledeki yorumlar

Yorum yaz

E-posta adresiniz yayınlanmayacaktır. Gerekli alanlar * Işaretlenmiş.