Kullanıcı Arayüz Tasarımınızda Tutarlılığı Koruma

UI tasarımında tutarlılık eski bir okul ilkesidir ve günümüzün bazı web ve uygulama tasarımlarında bir şekilde unutulmuştur. Görünüşe göre tasarımcılar arayüzlerinden tutarlılığı atlamayı tercih ediyorlar.

Mobil uygulama tasarımı söz konusu olduğunda, bazı tasarımcılar donanım standart etkileşimlerini kendi benzersiz arayüz desenleriyle yeniden icat etmeyi, yeniden oluşturmayı veya hatta tamamen kırmayı seçiyorlar. Donanım kullanıcı arayüzü kuralları ve uygulama deneyiminiz arasındaki tutarlılığı kırmak kötü bir fikir olmayabilir, ancak kendi uygulama tutarlılığınızı kırmak olabilir.

Tutarlı UI Tasarımına Üç Adım

Web ve mobil uygulama tasarımlarınızı tasarlarken düşünmeniz gereken üç tür tutarlılık vardır:

• 1. Cihaz kullanıcı arayüzü yönergeleri ve davranışlarıyla tutarlı olun
• 2. Diğer benzer siteler veya uygulamalarla tutarlı kalın
• 3. kendi tasarım ile tutarlı kalmak

Bu makalenin amacı için üçüncüye daha fazla odaklanmak istiyorum - tutarlılığı kendi kullanıcı arayüzünüzde tutarak. Bu, esasen büyük bir anlaşma çünkü kullanıcılarınızı kendi uygulamanızın içinde şaşırtmak veya şaşırtmak istemiyorsunuz.

Bir kullanıcının sizden ana sayfanızdan bir alt sayfaya gitmesini ve farklı stil veya hatta çok farklı kullanıcı etkileşimleri görmesini istemezsiniz. Bu tür şeyler kullanıcıları şaşırtabilir veya bazı durumlarda onları korkutabilir. Tutarlılık sadece sitenin genel kullanılabilirliği için önemli değildir, aynı zamanda dönüşümü de büyük ölçüde artırabilir.

Tutarlı Yapı ve Etkileşimler

Bu, tutarlı bir kullanıcı arayüzü oluşturmanın anahtarıdır. Bazen geliştirdiğimizde, yapının ve etkileşimin genel kullanıcı deneyimini nasıl etkileyeceğini unuturuz. Ancak, bir ev inşa ederken veya bina oluştururken planların oluşturulması ve planların oluşturulması önemli olduğu gibi, tutarlı ve kullanılabilir bir kullanıcı arayüzü oluşturmak da önemlidir. Kod yazmaya başlamadan önce düşünmeniz ve planlamanız gereken birkaç şey var.

• 1. Sitenizde veya uygulamanızda öğeleri nasıl tutarlı bir şekilde yerleştireceğinizi düşünün.
• 2. Hangi kullanıcı arayüzü modellerini kullanacağınızı düşünün.
• 3. Hangi giriş elemanlarına ihtiyacınız olduğunu planlayın.
• 4. Hangi simgelere ihtiyacınız olduğunu belirleyin ve hepsini kapsayan iyi bir simge seti seçin veya tasarlayın.

Eleman yerleştirme, kullanıcıdaki sürprizleri azaltmanın ve tutarlı, güvenilir beklentiler yaratmanın çok büyük bir yoludur. Gezinmelerinizi aynı yerde tutun, hiçbir şey bir kullanıcıyı gezinme öğelerini taşımaktan veya yok etmekten daha hızlı bir şekilde rahatsız etmez. Ayrıca logoları ve diğer marka öğelerini site dışında aynı konumlarda tutun.

“Hiçbir şey bir kullanıcıyı gezinme öğelerini taşımaktan veya kaybolmaktan daha hızlı tahriş etmez”

Kenar çubuğu kullanıyorsanız, sayfada bulunanları sayfadan değiştirerek kenar çubuğunu çok fazla sallamayın. Bunlardan bazıları sayfadaki içerikle alakalı olabilir, ancak arama formları gibi içe aktarma genel öğelerinin kaldırılması ve hatta taşınmasından kaçının. Tutarlı bir şekilde yerleştirilmesi gereken en büyük şey, giriş ve kullanıcı ayar bağlantıları veya düğmeleri.

Kullanıcı Arayüzü Kalıplarını Göz önünde bulundur

Önceden planlayın ve hangi kullanıcı arayüzü modellerine ihtiyacınız olduğunu düşünün. Bir galeriye mi ihtiyacınız var? Fiiller? Akordeonlar? Kenar çubukları? Tasarım kalıplarını önceden planlamak yalnızca uygulamanızı daha hızlı geliştirmenize ve tasarlamanıza yardımcı olmakla kalmaz, aynı zamanda hangi tasarım kalıplarına ihtiyacınız olduğunu düşünmek de içeriğinizi önceden bulmanıza yardımcı olur - bu da size zaman kazandırır.

Bu aynı zamanda sorunları çözecek ve soruları önceden cevaplayacaktır, bu şekilde sitenizde bir UI kararı gerektiren bir bölüme veya sayfaya geldiğinizde, zaten yapmışsınızdır ve tasarım desenlerinin bir karışımını oluştururken yakalanmazsınız siteniz boyunca.

Formlarınızı elden de düşünün. Hangi form öğelerine ihtiyacınız olacağını planlayın ve ihtiyacınız olmayacak veya değiştirebileceğiniz öğeleri bulun. Form öğeleri, kullanıcıların yine de gezinmesi için korkutucu veya hatta zor olabilir, bu nedenle, engeller olabilecek bazı girişleri kaldırabilir veya değiştirebilirseniz, bunu yapın.

“Bloklar olabilecek bazı girişleri kaldırabilir veya değiştirebilirseniz, yapın.”

Bu aynı zamanda karar verme sürecini geliştirme sürecinden çıkarmanın harika bir yoludur. Formları hem stil, yapı hem de etkileşimde tutarlı tutmak bazen bir dönüşüm oranı oluşturabilir veya bozabilir.

Yine kafa planla. Önceden hangi simgelere ihtiyacınız olacağını planlayın. Tutarlılığınızı azaltmanın süper hızlı bir yolu, baskı simgelerine ihtiyacınız olacağını öğrendiğinizde uygulamanızın gelişiminde yarı yolda olmaktır, ardından simgelerinizi nereden aldığınızı hatırlayamayacağınızı veya hatta simgelerinizin geri kalanıyla eşleşen bir yazdırma simgesi bulun.

Bu gerçekten bir stil sorunu değil, etkileşimli bir konudur. Kullanıcılar belirli bir simgeye bakmaya alışacak ve bunları hızlı bir şekilde tanıyabilecek. Ancak bir patchwork simge seti kullanıyorsanız, kullanıcıyı karıştırır veya hatta belirli simgelerin neyi temsil ettiğini söylemeyi zorlaştırırsınız.

Tutarlı Stil

Her UI öğesinin stili ve tasarımı önemlidir ve aralarındaki tutarlılığı korumak da kullanıcı için önemlidir. Tutarlı bir simge setine sahip olmanız önemli olduğu gibi, uygulamanızın da tasarım tutarlılığına sahip olması önemlidir. Sitenin tüm tasarım veya renk düzeniyle eşleşmeye yaklaşmasalar bile bazı düğmelerin havalı olduğunu düşünebilirsiniz, ancak bu sadece kullanıcıyı şaşırtacak ve çirkin görünecektir.

Bir UI kiti tasarlarken, tutarlılık oluşturmak için aklınızda bulundurmanız gereken birkaç şey vardır:

• 1. Renk düzeni
• 2. tarzı
• 3. Sınırlar
• 4. Tür ve yazı tipleri
• 5. Boyut
• 6. Arka plan resimleri
• 7. Etkiler

Renkler

Daha önce söylediğim gibi, UI renginizi sitenizin tüm renk düzeniyle tutarlı tutun. Düğmelerin öne çıkmasını ve fark edilmesini istediğiniz eylemlere çağrı tasarlarken bile, eylem çağrınızı tüm renk düzeninize çirkin bir iltifat yapmamaya dikkat edin. Size yardımcı olmak için Kuler veya ColorSchemer gibi araçları birlikte iyi giden renkleri seçmeye yardımcı olması için kullanın.

Stilinizi tutarlı tutmak hakkında konuştuğumda, site tasarımının geri kalanı düz ve üzerinde gölge veya gradyan yoksa, gölgeler ve eğim ile bazı deli degrade düğmelerini kullanmama hakkında konuşuyorum. Genel site tasarımıyla tutarlı kalmanın yanı sıra, kullanıcı arayüzü öğelerinizin stiliyle de tutarlı kalın. Giriş etiketlerinizde belirli bir renk veya yazı tipi stili kullanıyorsanız, bu etikete sadık kalın ve tüm etiketlerde kullanın.

Sınırlar

Ahh, sınırlar. Sıklıkla üç veya dört farklı düğme kenarlığı kalınlığı veya yarıçapı kullanan siteler görüyorum ve bu gerçekten kafa karıştırıcı olabilir. Düğmeler, girişler, seçimler, galeriler, görüntüler ve diğer tüm kullanıcı arayüzü öğelerindeki tüm sınırlarınızı birbiriyle tutarlı tutun. Bu, sınır yarıçapında kullanmanız gerektiği anlamına gelmez, birkaç değere sahip olarak karıştırabilir veya hatta her öğede sürekli bir stil kullanabilirsiniz.

Tür ve Yazı Tipleri

Öğelerinizde aynı tür ve yazı tiplerini kullanmak, özellikle form öğeleriyle uğraşırken oldukça önemli bir şeydir. Üstbilgileri tutarlı tutun ve hepsini beğenebilmenize rağmen birçok yazı tipini kullanmayın; bunları diğer projeler için kaydedebilirsiniz. Girişler ve düğmeler, formların kolayca okunabilmesi ve öngörülebilmesi için birbiriyle eşleşen veya tamamlayan yazı tipi stillerine sahip olmalıdır.

Boyut

Yazı tipi ve diğer öğelerin boyutu birbiriyle tutarlı veya tamamlayıcı olmalıdır. Sayfaların başlıkları ve başlığı tutarlı olmalıdır, böylece kullanıcı bu metin satırlarının aslında başlık ve başlıklarla eşleştiğini bilir. Tutarlı boyut, içerik bölgelerinden, bağlantılardan, gezinme öğelerinden veya kenar çubuklarından herhangi bir UI öğesi için de geçerlidir. Kullanıcıların sayfa yüklendiğinde bunları hemen tanıyabilmesi için bunların boyutlarını sayfa görünümleri arasında büyük ölçüde değiştirmekten kaçının.

Arkaplan Resimleri

Arka plan resimlerinizi çok fazla değiştirmemeye çalışın. Bu, bugünlerde olduğu gibi pek bir şey olmuyor, ancak arka plan resimlerinizi sayfa görünümünden sayfa görünümüne değiştirmekten kaçınmak iyi bir fikirdir. Bunu yaparsanız, sayfaların tutarlılığını kaybetmemesi için görüntüyü bir şekilde ilişkilendirilebilir hale getirmeye çalışın. Arka plan resmini değiştirmek, özellikle büyük olanlar, sitenin ayrık hissetmesini sağlayabilir ve kullanıcının siteyi tamamen terk etmiş gibi hissetmesini sağlayabilir, bu yüzden gerçekten bu cazibeden kaçınmaya çalışın.

Etkileri

Efektler, en önemlisi aydınlatma efektleri, harika bir site tasarımı gibi görünen şeyi kullanıcı için hiç mantıklı değil. Örneğin, düğmenin üzerinde bir ışık parlıyormuş gibi görünen bir vurgu kullanıyorsanız, düğmelerdeki veya eğimli metin girişlerindeki eğimli metinlerde aynı ışık efektini kullanın.

Dürüst olmak gerekirse, bu gerçekten büyük bir yapmak ya da kullanıcı ile anlaşma kırmak değil, ancak seçici görüntüleyici, etkilerinizin tutarsızlığını fark edebilir ve uygulamanız veya sitenizle ne yapmaları gerektiğini yapmaktan rahatsız olabilirler.

Sıkıcı Olmayın

Tutarlılık için tasarım yapmak bazen sıradan ve hatta sıkıcı olabilir ve kullanıcıya bir sürpriz yapmak için tasarımınıza bir şeyler atmak isteyebilirsiniz ve gerçekten harika.

Kullanıcıları ayak parmaklarında tutmak iyidir, jsut bir şeyleri o kadar fazla sallamaz, o kadar cesaret kırılır veya karışırlar ki ayrılırlar ve başka bir yere giderler. Biraz kıvam uzun bir yol kat edebilir.