Bu Başarılı Etkileşim Tasarım İlkeleri ile UX'inizi Güçlendirin

Yayınlanan: 2022-03-11

Çalışan bir etkileşim ile kullanılamaz bir etkileşim arasında ince bir çizgi vardır. Etkileşim tasarımı ilkeleri, uçurumu kapatmaya yardımcı olur.

İyi yürütülen etkileşim tasarımı, harika UX'in uygulanmasında büyük rol oynar ve tartışmasız UX tasarım ilkelerinin temellerinden biridir.

"Kullanılamaz", "devam ediyorum" anlamına gelir ve görsel tasarım ne kadar "güzel" olursa olsun - bu animasyon ne kadar süslü olursa olsun - etkileşim tasarımını mahveder ve UX'iniz kaput olur. Doğru yapın ve estetik yetersiz kalsa bile çok daha iyi bir UX yolunda olacaksınız. Ürünün başarılı olma şansı çok daha yüksek olacak ve bu da sonuçta kârlılığa katkıda bulunacak.

Etkileşim tasarımı (IxD), Etkileşim Tasarımı Derneği (IxDA) tarafından “etkileşimli sistemlerin yapısı ve davranışı” olarak tanımlanır. Etkileşim tasarımcıları, bilgisayarlardan mobil cihazlara, cihazlara ve daha fazlasına kadar, insanlar ile kullandıkları ürün ve hizmetler arasında anlamlı ilişkiler kurmaya çalışır.”

Deneyim önemlidir, çünkü insanların etkileşimlerini ne kadar sevgiyle hatırladıklarını belirler. —Don Norman, Gündelik Şeylerin Tasarımında.

Etkileşim tasarımı ilkelerini takip etmek, büyük etkileşim tasarımına son derece katkıda bulunur ve bu da deneyime katkıda bulunur.

Mobil uygulama etkileşim tasarımı ve UX
Mobil uygulama etkileşim tasarımı (Adam Kalın)

Günümüzün tüm cihazlarının ve teknolojisinin bir gecede tamamen farklı bir şeyle değiştirilmesi mümkündür, ancak kalıcı ilkeleri nedeniyle harika etkileşim tasarımı yine de elde edilebilir. Bu değişmez ilkeler, insanları neyin motive ettiği, davranışları ve nasıl düşündükleri ile ilgilidir.

Her kapıdaki her kapı kolunun farklı çalıştığını hayal edin. Birincisi , önce kapıya, sonra aşağı itmeniz gerekir; bir diğeri için aşağı bastırmak yerine yukarı çekmeniz gerekirken, bir diğeri için iki kez yukarı ve ardından aşağı çekmeniz gerekir - tam bir felaket. Aslında, "kapı kolunu çevir" ifadesi, bunu yapmanın tek bir yolu olduğunu varsayar.

Kimse "kurallara uyun" çığlıkları tarafından hırpalanmaktan hoşlanmaz, ancak gerçekten mükemmel etkileşim tasarımı bir dizi standarda, en iyi uygulamalara, sözleşmelere ve temel kurallara (sezgisel) dayanır. Yumuşacık bir bilim değil, ancak IxD'nin temelini oluştururlar ve en az miktarda sürtünme ile etkileşimi mümkün kılarlar. Arayüz standartları yaratıcılığı boğmaz; bunlar katı ve hızlı kurallar değil, bir tasarımcının yenilik yapabileceği “kullanılabilir ve tanıdık bir tasarım” temeli oluşturmasına yardımcı olan temel yönergelerdir.

Etkileşim Tasarımı İlkeleri ve En İyi Uygulamalar

Etkileşim tasarımı, "Bilgisayar teknolojisinin tasarımına ve özellikle insanlar (kullanıcılar) ve bilgisayarlar arasındaki etkileşime odaklanan çok disiplinli bir çalışma alanı" olan İnsan-Bilgisayar Etkileşimi (HCI) disiplini altına girer. Tasarım Vakfı.

Harika UI tasarımı, temel UI tasarım ilkelerini hedef odaklı etkileşim tasarımıyla birleştirerek saf kullanıcı keyfi sağlar.

  • Başarılı etkileşim tasarımı, basit, açıkça tanımlanmış hedefler, güçlü bir amaç ve sezgisel bir kullanıcı arayüzü kullanır.
  • Etkileşimleri basit ve kolay tutma çabası içinde, hedef odaklı etkileşim tasarımı , kullanıcıların bir görevi tamamlamaları için gereken mutlak minimumdan başka bir şey koymaz.

En önemli ilkelerden bazılarına girelim (herhangi bir şekilde kapsamlı bir liste değil):

keşfedilebilirlik

Temel olarak, kullanıcı onu bulamazsa, mevcut değildir. Bir kullanıcı arayüzünde mikrosaniyeden daha kısa bir sürede hangi eylemlerin mümkün olduğu, örneğin simgelerin en iyi uygulama olarak etiketlenmesi gibi bir zil olarak netleştirilmelidir. Etiketlenmemiş simgeler, anlamı deşifre etmek için durmaları gerekeceğinden, bir kullanıcının yoluna barikatlar atmakla eşdeğerdir. "Akış"ı kesiyorsunuz. Ve işte bir şok edici… Kullanıcı arayüzünüzü öğrenmekle ilgilenmiyorlar.

Linkedin ve Facebook UI etiketli simgeler etkileşim tasarımı en iyi uygulamaları
Tahminleri ortadan kaldırmak için LinkedIn, NPR ve Facebook simgelerini etiketler.

gösterenler

Keşfedilebilirliğe çok bağlı olan belirteçlerin etkin kullanımı, uygunlukların (bir nesne üzerinde bir eylem olasılığı) kullanıcı arayüzünde açıkça belirtilmesini sağlar. Göstergeler, sinyaller veya işaret direkleri gibi güçlü ipuçları sağlar. Kullanılabilir bir etkileşimi göstererek, kullanıcıya "İşte buradayım, bana dokunabilirsin (tıklayabilirsin, kaydırabilirsin, vb.)!" diye bağırarak yeşil ışıklar yakıp söndürürler. Kullanıcı arabiriminde bir uygunluk bulunabilir, ancak bir göstereni yoksa görünmez kalacağı için gizli kalabilir. Bir örnek, kullanıcı yanlışlıkla sola veya sağa kaydırmadıkça (örneğin bir şeyi silmek için) kendini göstermeyen bir "gizli hareket etkileşimi" olabilir.

Affordances, hangi eylemlerin mümkün olduğunu tanımlar. Göstericiler, insanların bu olasılıkları nasıl keşfettiklerini belirler: gösterenler işaretlerdir, ne yapılabileceğinin algılanabilir işaretleridir. Tasarımcılar için göstergeler, olanaklardan çok daha önemlidir. —Don Norman (Norman, 2013)

Etkileşim tasarımı ilkeleri, Apple Mail tarafından gizli bir uygunlukla ihlal edildi çünkü hiçbir gösteren yok
Gizli bir satın alma ile Apple Mail. Masaüstünde Magic Mouse kullanarak insanlar sola kaydırabilir. Farkında olmadıkça etkileşim gizli kalır çünkü gösteren yoktur.

Geri bildirim

Gösterenlerden sonra, kullanıcı için bir sonraki en önemli iletişim geri bildirimdir. Geri bildirim şu anlama gelir: eylemin etkisi hakkında açık bilgi . Ayrıca sistem durumunun sürekli görünürlüğü anlamına gelir, yani sistem aşağıdakileri sağlamalıdır:

  • Kullanıcılar, olup bitenler hakkında bilgilendirilir.
  • Eylemlerinin sonuçları ve ürünün (sistemin) mevcut durumu hakkında sürekli bilgi vardır.
  • Bir kullanıcının zihninde ürünün durumu, yani işleme, yükleme, arama, yükleme vb. veya başka bir durum değişikliği konusunda herhangi bir karışıklık yoktur.
  • Bir eylem yürütüldükten sonra yeni durumu belirlemek kolaydır.

Belge yükleme animasyonu geri bildirim etkileşim tasarımı ilkesi
Bu yükleme sırası, sürekli geri bildirim yoluyla üç durumu gösterir: bir belgeyi bir simgeye sürükleme, karşıya yükleme ilerlemesi ve tamamlama onayı. (Jokubas tarafından)

Kavramsal Modeller ve Zihinsel Modeller

Harika etkileşim tasarımı, bir kullanıcının sistemin iyi bir kavramsal modelini oluşturmak için ihtiyaç duyduğu tüm bilgileri sunar ve böylece onların anlayışına ve kontrol duygusuna yol açar. Kavramsal bir model, sistemi kullanırken hem keşfedilebilirliği hem de sonuçların değerlendirilmesini geliştirir.

Zihinsel modeller veya bilişsel haritalar, bir kullanıcının zihnindeki, belirli bir etkileşim beklentilerini ve gerçek dünyada bir şeyin nasıl çalıştığını bildiren görüntülerdir. Bilişsel haritalar, fiziksel çevremizin, özellikle uzamsal ilişkilerle ilişkili içsel temsilleridir. Etkileşim tasarımcıları, kullanıcının zihinsel modelini etkin bir şekilde kullanarak, sezgisel "hissettiren" sistemler yaratabilirler.

Araba koltuğu ayarı zihinsel model etkileşim tasarım ilkeleri
Bir Mercedes'teki araba koltuğu ayarı, zihinsel bir model kullanan bir etkileşim tasarımının harika bir örneğidir. Kontroller için bir araba koltuğu şekli, sezgisel olarak anlaşılmasını ve çalıştırılmasını kolaylaştırır.

Tasarımcı kavramsal bir model, yani tasarım modeli icat eder ve tasarımcı, aygıtın veya yazılımın bu şekilde çalışmasını amaçlar. Bu modeli kullanıcılara iletmenin tek yolu, onu bir UI aracılığıyla uygulamaktır. Kullanıcılar daha sonra kavramsal modelle etkileşime girer ve bir şeyin nasıl çalıştığına dair kendi zihinsel modellerini yaratırlar.

Tasarımcılar, kullanıcılara bir uygulamanın nasıl çalışmasını amaçladıklarını söyleyemezler ; amacını açıkça iletmek için uygun bir kullanıcı arayüzü tasarlamaları gerekir. Başka bir deyişle, arayüzün anlaşılmasını ve kullanılmasını kolaylaştırın. Kötü etkileşim tasarımı, kullanıcı için yanlış zihinsel model oluşturma riskini taşır. Bu, uygulamayı tasarımcının istemediği şekilde çalıştırmaya çalıştıkları için kafa karışıklığına ve kullanıcı hatasına yol açar.

ABD merkezli tam zamanlı serbest UX tasarımcıları istedi

Eşlemeler

Haritalama, kontroller ve dünyadaki etkileri arasındaki ilişkidir. Geri bildirim ilkesi, eşlemenin yakın bir kuzenidir çünkü iki ilke sorunsuz bir deneyim yaratmak için birlikte çalışır. Neredeyse tüm yapay nesneler, kontroller ve efektler arasında bir tür eşlemeye ihtiyaç duyar - arayüz tasarımı durumunda, bu, bir kontrol ile onun ortaya çıkan işlevi arasındaki ilişkidir.

Etkileşim tasarımı ilkesini gösteren görsel geri bildirimli araç gösterge paneli ekranı
Araba etkileşim tasarımı: Direksiyon simidi üzerindeki ses kontrol düğmeleri doğal haritalamayı kullanır: sesi artırmak için sağa, azaltmak için sola dokunun ve geri bildirim, gösterge panosunda anında gerçekleşir.

Fiziksel analojilerden ve kültürel standartlardan yararlanan doğal haritalama, anında bir anlayışa yol açar. Örneğin, bir tasarımcı kullanıcı arayüzünde uzamsal benzetmeyi kullanabilir:

  • Kaydırıcı bileşeniyle bir değeri artırmak için kaydırıcıyı sağa kaydırın,
  • Küçültmek için sola kaydırın.

Yükselen bir düzeyin daha fazlasını, azalan bir düzeyi, daha azını temsil ettiği evrensel standartta olduğu gibi, bazı doğal eşlemeler biyolojiktir.

Fiziksel analojilerle doğal haritalama etkileşimi tasarım ilkesi örnekleri
Bilinen fiziksel analojilerle eşleme: düğmeler ve kaydırıcı kontroller (Anton Kudin tarafından)

kısıtlamalar

Tasarım kısıtlamaları kavramı, belirli bir anda gerçekleşebilecek kullanıcı etkileşimi türünün nasıl kısıtlanacağını belirlemenin bir yoludur. Etkileşim tasarımı kısıtlamaları, kullanıcılar için "kılavuz raylar" sağlayarak verimli etkileşime yardımcı olur - neredeyse meydana gelebilecek etkileşimleri yönlendiren bir kılavuz gibi.

Tasarımdaki kısıtlamalar, kullanıcıyı belirli etkileşimlere yönlendirmek için yalnızca belirli şeylerin etkinleştirilmesini ve hatta görünür olmasını sağlar. Boyut, ölçek, orantı, vurgu ve durumu ve bunların birlikte uyum içinde çalışarak hiyerarşi oluşturmaya nasıl yardımcı olduğunu ve dolayısıyla kullanıcıyı nasıl etkilediğini dikkate alır. Doğru şekilde uygulanan kısıtlamalar, kullanıcı hatası olasılığının azaltılmasına da yardımcı olur.

Kısıtlamanın tersi, kullanıcıya her seçeneğin sunulduğu ve daha sonra ne yapacağına karar vermesini zorlaştıran durumdur. Seçim ilkesidir. Seçenekler ne kadar fazlaysa, bunlardan herhangi birini seçmek o kadar zor olur - tüm olasılıklar karşısında bunalırız.

Harika etkileşim tasarımı , mevcut her seçeneği arayüze koymaz, ancak onu herhangi bir anda en önemli olanla sınırlar.

Foursquare, etkileşim tasarımında mevcut etkileşimleri sınırlamak için tasarım kısıtlamalarını kullanır
Foursquare, mevcut etkileşimleri sınırlamak ve kullanıcının görevlerine odaklanmak için tasarım kısıtlamalarını kullanır.

Tutarlılık, Standartlar ve Buluşsal Yöntemler

Bunların hepsi birbiriyle bağlantılıdır—isterseniz kalıplarla kardeşler (aşağıda). Kullanıcı hatasını önlemek ve bir uygulamayı öğrenmeyi kolaylaştırmak için etkileşim modelinin tutarlı olması önemlidir. Tutarlılık, kullanıcı deneyimini, genel kullanılabilirliği ve kullanıcıların dijital ürünleri kullanma verimliliğini artırır.

Tutarlılık, benzer görevleri başarmak için benzer öğeleri kullanmak ve baştan sona benzer işlevlere ve davranışlara sahip olmak anlamına gelir; tutarlı bir arabirim, bir şeyi yapmak için aynı işlemi kullanmak gibi kuralları izleyen bir arabirimdir.

Apple News iPad Uygulaması paylaşım menüsü harika bir etkileşim tasarımıdır
Tüm iPad uygulamalarındaki "paylaş" menüsü bir tutarlılık modelidir. Her zaman aynı şekilde çalışır.

Yüksek düzeyde kullanılabilir olmaya çalışan ürünler, yerleşik sözleşmeleri, standartları, en iyi uygulamaları ve kullanılabilirlik buluşsal yöntemlerini (belirli kullanılabilirlik yönergeleri değil, genel pratik kurallar) takip eder.

Örneğin bir sözleşmeye uygunluk, bir sayfanın düzenlenme biçiminde olabilir. Web kullanıcıları zamanlarının %69'unu sayfanın sol yarısını ve %30'unu sağ yarısını inceleyerek geçirirler. Bu nedenle, bir sitenin geleneksel bir düzeni takip etmesi durumunda kârlı olma olasılığı daha yüksektir.

Standart , bir kırıntı izi (hemen tanınabilen bir yönlendirme ve navigasyon cihazı) veya BCC sitesinde olduğu gibi sayfanın üst kısmındaki genel bir gezinme menüsü olabilir.

Kalıplar ve Öğrenilebilirlik

Yeni bir kullanıcı bir arayüzde gezinmeyi ne kadar kolay öğrenebilir? Kendisinden öncekilere göre önemli bir fayda sağlamadıkça hiç kimse bir şeyler yapmanın yeni bir yolunu öğrenmek istemez - yine de sürekli olarak denenmemiş, alışılmamış etkileşimlerle dolup taşıyoruz.

Ortak bileşenler veya modeller anında öğrenilebilirlik sağlar. Kaşık kullanmayı öğrendikten sonra, her zaman kaşık kullanmayı da bileceksin. Bisiklete binmek, paten kaymakla aynı şey… aynı yapı her gün kullandığımız UI bileşenleri için de geçerlidir: düğmeler, metin alanları, açılır menüler, onay kutuları, radyo düğmeleri, çarklar, kaydırıcılar, simgeler, akordeonlar, arama kutuları vb.

Etkileşim tasarımı kalıpları, etkileşim tasarımı ilkelerinin temelini oluşturur
UI kitleri, form bileşenleri gibi iyi bilinen standart kalıpları kullanır (Keynotopia tarafından)

En iyi etkileşim tasarımları, tekerleği yeniden icat etmeye çalışmaz, ancak kalıpları yeni bir şekilde verimli ve etkili bir şekilde kullanır.

Kalıplar yalnızca öğrenilebilirliği teşvik etmekle kalmaz, aynı zamanda tutarlılık sağlar (yukarıda tartışılan başka bir ilke) ve onu, işlerin nasıl yürümesi gerektiğine dair kullanıcının beklentileriyle uyumlu hale getirir.

Görsel Hiyerarşi ve Vurgu

Bir site veya uygulamayla etkileşimleri sırasında, insanlar aramalarıyla en alakalı bilgileri ararlar. Görsel hiyerarşi, öğelerin önemi ima edecek şekilde düzenlenmesiyle ilgilidir. Tasarımdaki görsel hiyerarşi, insan gözünün gördüklerini algılama sırasını etkiler. Her şeye eşit “ağırlık” verilmez; düzen, bir algı alanındaki nesneler arasındaki görsel karşıtlıkla yaratılır. Görsel kontrast (vurgu), boyut, yakınlık, renk, opaklık ve öğeler arasındaki gerçek ton kontrastı ile elde edilebilir.

Etkileşim tasarım ilkelerinden biri olan görsel hiyerarşiyi kullanan mobil UI tasarımı
Bu mobil ekranlar, kullanıcıyı ekranın belirli alanlarına odaklamak ve içerik ağırlık düzeylerini belirlemek için görsel hiyerarşi kullanır (Vonn mobil UI kiti)

Görsel hiyerarşinin gücünü hafife almayın. Çağlar boyunca her türlü tasarımda, mimaride ve endüstriyel tasarımda olduğu kadar baskı tasarımında da çok etkin bir şekilde kullanılmaktadır. Bazı harika poster tasarımlarına göz atın. Bu tekniği etkileşim tasarımında iyi kullanarak, doğru şeyler doğru zamanda doğru şekilde ortaya çıkıyor.

Harika etkileşim tasarımcıları, sihir gibi çalışan "yalın ve ortalama" arayüz tasarımlarını başarılı bir şekilde elde etmek için vurgunun gücünü kullanır.

Fitts Yasası

İster inanın ister inanmayın, bu yasa, insan kas hareketine ve telgraf operatörü ile üretim hattı görev performansının hedeflenmesine bakan ilk çalışmalardan gelir ve daha sonra HCI'ye (insan-bilgisayar etkileşimi) uyarlanmıştır. Temel olarak şöyle der: "Bir hedef edinme zamanı, hedefe olan mesafenin ve boyutunun bir fonksiyonudur."

Daha basit bir ifadeyle, bir hedefin ne kadar uzakta ve ne kadar büyük olduğu ve diğer hedeflere göre ne kadar yakın olduğu ile ilgilidir. Daha kısa fare hareketleri veya dokunuşlar daha iyidir—başlangıç ​​konumunuza daha yakınsa bir hedefi tıklamak veya kaydırmak her zaman daha hızlıdır. İlgili görevler de birbirine yakın olmalıdır, böylece kullanıcılar UI ile etkileşime girerek ekranın etrafında dolaşmak zorunda kalmazlar.

Fitts yasası, bir hedefe hareket etmek ve bir hedef seçmek için gereken süreyi doğru bir şekilde tahmin edebilir. Hedef, ekrandaki bir düğme, açılır menü veya başka bir etkileşimli öğe olabilir. Çok uzaksa, çok küçükse veya tıklanabilir öğeler birbirine çok yakınsa, kullanıcı arayüzünün verimliliği ve kullanılabilirliği büyük ölçüde azalır.

UX ve etkileşim tasarımı ilkelerinden birini kullanan Fitts yasası kullanıcı arayüzü örneği
Büyük düğmelerin hedeflenmesi kolaydır. Fitts Yasasından yararlanarak, hataları önlemek için kısıtlamalar da getirilebilir: "İptal" düğmesinin en soldaki yerleşimine dikkat edin.

Gutenberg Diyagramı, Z- ve F-Pattern Düzenleri

Bu kalıplar içeriğe bağlı olarak farklı durumlarda uygulanabilir ve çoğunlukla batılı izleyiciler tarafından kullanılır. Gutenberg diyagramı, çoğunlukla bloglar veya haber siteleri gibi metin ağırlıklı siteler olmak üzere, eşit olarak dağıtılmış, homojen bilgilere bakarken gözlerin hareket ettiği genel bir modeli tanımlar. Gutenberg diyagramı, güçlü ve zayıf nadas alanlarının, okuma yerçekimi yolunun dışında kaldığını ve bir şekilde görsel olarak vurgulanmadıkça asgari düzeyde ilgi gördüğünü ileri sürer.

Gutenberg diyagramı
Yerçekimi okuma olarak bilinen yaygın kullanıcı davranışını gösteren Gutenberg Diyagramı.

Z deseni, Z harfinin şeklini takip eder. Bazı durumlarda bu desene Zig-Zag deseni de denir. Gutenberg diyagramıyla arasındaki temel fark, Z modelinin izleyicilerin iki nadas alandan geçeceklerini önermesidir. Aksi halde yine aynı yerde başlayıp aynı yerde biter ve yine ortasından geçerler. Gutenberg'de olduğu gibi, bir tasarımcı en önemli bilgiyi Z-deseninin yolu boyunca yerleştirir.

Etkileşim tasarımı için Z-kalıp okuma örneği
iZettle'ın web sitesi, Z-desen tasarımıyla görsel taramayı optimize ediyor

F hızlı içindir ve kullanıcıların içeriği nasıl okuduğunu ifade eder. F modeli, 200'den fazla kullanıcının web'de içerik okuduğunu kaydeden bir NNGroup göz izleme çalışmasıyla popüler hale getirildi. İnsanların tarama modellerinin birçok farklı site türünde oldukça tutarlı olduğunu buldu.

Eyetracking çalışması F-desen tarama ve web sitelerindeki içeriği okuma, birçok etkileşim tasarımı ilkesinden biri
Göz izleme çalışmaları, sayfaları tararken (NNGroup'tan) bir F-şekilli ısı haritası gösteriyor

Bu neden önemli? Örneğin bir e-ticaret sitesinde, taramayı en üst düzeye çıkarmak için en önemli içeriği F düzenini takip edecek şekilde düzenlemek isteyebilirsiniz.

Hatırlamak yerine Tanıma

Tanıma, bir olayı veya bilgi parçasını tanıdık olarak “tanıma” yeteneğimizi ifade ederken, hatırlama, ilgili ayrıntıları bellekten çekmeyi içeren “bilişsel bir yük”ten çok daha fazlasıdır. Kullanıcılara tanıyabilecekleri şeyleri göstermek, öğeleri sıfırdan geri çağırma ihtiyacına göre kullanılabilirliği artırır.

Bir kullanıcı arayüzündeki simgeler anında tanınabilir - harika etkileşim tasarımı
Standart simgeler anında tanınabilir

Örneğin, bir UI'de simgelerin kullanılması güçlüdür çünkü bir sembolün anında tanınmasına olanak tanır. Beynimiz sembolleri metin okumaktan yaklaşık 1000 kat daha hızlı işler (tanır). Bir tasarımcı bir iletişim kutusunda standart bir uyarı işareti simgesi görüntülerse, bir sonraki eylem yıkıcı olabileceğinden, kullanıcının hemen odaklanmasını ve dikkat etmesini sağlar. Ancak bir simge, kullanıcıları anlamı hatırlamaya ve deşifre etmeye zorlayacak şekilde tasarlanırsa (örneğin uyarı simgesi yerine bir el kaldırılırsa), bu, kullanıcı arayüzünün verimliliğini ve kullanılabilirliğini azaltır.

Estetik ve Minimalist Tasarım

Elzem olmayan kısımlardan kurtulabilmek için bir ürünün özünü derinlemesine anlamanız gerekir. —Jonathan Ive.

Bu en zorlayıcı ilkelerden biridir çünkü zordur. Tasarımcıların ve ürün yöneticilerinin eğilimi, güneş altında mevcut her seçeneği ekleme ve kullanıcının gitmek istediği yola karar vermesine izin verme yönündedir. Bu gerçekten tembel bir yaklaşımdır ve gereksiz dağınıklıklarla dolu ürünlere yol açar.

Apple web sitesi estetiği ve minimalist tasarımı, bir UX ve etkileşim tasarımı ilkesi
Apple, uzun süredir mükemmel estetiğin ve minimalist, basit tasarımın savunucusu olmuştur.

Arayüzlerin, kullanıcının amaçlarını ve görevlerini desteklemeyen gereksiz unsurlardan ve içerikten arındırılması gerekir. Tasarımcılar sadece estetik açıdan hoş kullanıcı arayüzleri tasarlamamalı, aynı zamanda kullanıcı akışında bilgiyi ekrandan ekrana önceliklendirmelidir. Görsel hiyerarşi ve vurgunun büyüsü kullanılarak, kullanıcının bir görevi tamamlaması için gereken yalnızca temel ve mutlak minimum bilgi sunulmalıdır.

Michelangelo eseri hakkında şunları söyledi: "Mermerdeki meleği gördüm ve onu özgür bırakana kadar oydum."

Daha iyi etkileşim tasarımı için Lufthansa biniş kartı yeniden tasarlandı
Dağınıklıktan sadeliğe. Kelsey Raymond tarafından yeniden tasarlanmış biniş kartı

Minimalist, estetik açıdan hoş ve basit bir etkileşim tasarlamak, tasarımcının tam olarak insanların ürünü kullanacağı anda neler olup bittiğini anlamasını ve gerekli olmayan her şeyden kurtulmasını gerektirir. Kullanıcıların ürünü nasıl kullanacaklarını anlamak için derin kullanıcı araştırması ve testi yapmak genellikle en iyi yaklaşımdır.

Hata Önleme

Kullanıcıların genellikle bir görevi yerine getirirken dikkati dağılır, bu nedenle görsel vurgu, önerilerde bulunmak ve dikkatle tasarlanmış kısıtlamaların kullanılmasıyla bilinçsiz hataların önlenmesi çok önemlidir. Poka-Yoke olarak da bilinen bir hata önleme biçimi, bir işlemin hata üretmesini önlemek için güvenli mekanizmaların uygulanmasını ifade eder.

Hataları önlemenin en iyi yollarından biri, daha iyi bir zihinsel model tasarlamaktır. Tasarımcının modeli ve sistemin nasıl çalışması gerektiğine dair yorumu kullanıcının zihinsel modeliyle uyuşmadığında birçok kullanıcı hatası meydana gelir.

Standart tasarım kuralları yardımcı olur (yukarıda bahsedilen ilkelerden biri), çünkü kullanıcıların hangi eylemleri gerçekleştirebileceklerini anlamalarına yardımcı olurlar. Web siteniz veya uygulamanızla etkileşime giren kullanıcılar, binlerce başka site ve uygulama kullanmıştır ve ortak etkileşimli öğelerin belirli bir şekilde görünmesini ve çalışmasını bekler. Ürününüz bu kurallardan saptığında hataya açık durumlar ortaya çıkabilir.

komik hata

Hata yapılmadan önce uyarın ve yıkıcı eylemlerden önce onaylayın. İyi uygulanmış hata mesajlarından bile daha iyisi, ilk etapta bir sorunun oluşmasını önleyen dikkatli bir tasarımdır. Hataya açık durumları ortadan kaldırmaya çalışın ve bunları kontrol etmeye devam edin.

Etkileşim Tasarımının Geleceği

Yeni cihazlar, ortamlar ve arayüzler, yeni etkileşim olanaklarıyla ilerlemeye devam edecek. Video oyunu kontrolörleri sürekli gelişiyor ve çok çeşitli giriş kontrollerinin yanı sıra dokunsal geri bildirim sağlıyor. Hareket arayüzleri, 2B ve 3B hareketleri (örneğin, iOS ve Android cihazlardaki hareketler) destekleyen dokunmatik ekranlardan sanal gerçeklik alanları, oyun konsolları ve çevremizi kontrol etmemize izin veren IoT cihazlarıyla etkileşim kurmak için 3B alanlardaki el hareketlerini kullanmaya kadar olgunlaşacaktır. .

Google'ın Project Soli örneğinde olduğu gibi, fareye, izleme dörtgenlerine ve joysticklere sayonara diyebilir ve cihazları kontrol etmek için elimizi ve parmaklarımızı kullanarak daha doğal hareketlerle etkileşime geçebiliriz. Bazı durumlarda - örneğin konuşma kullanıcı arayüzlerinde - giriş yöntemleri klavyeden sese değişebilir. Bununla birlikte, herhangi bir biçimde (sesli, dokunsal ve görsel) anında ve sürekli geribildirim ilkesine hala ihtiyaç duyulacaktır.

Google Project Soli jestsel etkileşimli arayüz kontrolü etkileşim tasarımı
Parmakları kullanarak Google'ın Project Soli jestsel arayüz kontrolü (kaydırıcı efekti gösterir)

Temel etkileşim tasarım ilkeleri, gelecekteki sistemlerin tasarımında her zaman merkezi bir rol oynayacaktır ve UX/UI tasarımcılarının bunları akılda tutması önemlidir. Sert ve hızlı kurallar değiller, ancak daha iyi ve daha ilgi çekici ürünler ve hizmetler yapacaklar. Başarılı filmlerin, denenmiş ve gerçek, zamana saygı duyan bir yapıyı takip eden eski hikaye anlatımı tekniklerini kullanması gibi, iyi bir nedenle var olan etkileşim tasarımı ilkeleri vardır. Bunları takip etmek, kullanılabilirliği artırarak ve ürünlerinin daha geniş çapta benimsenmesini sağlayarak herhangi bir ürün tasarımcısına fayda sağlayacaktır.

• • •

Toptal Tasarım Blogunda daha fazla okuma:

  • Tasarım İlkeleri: Hiyerarşiye Giriş
  • Kullanıcı Arayüzü Tasarımı En İyi Uygulamaları ve Yaygın Hatalar
  • Tasarımın Gestalt İlkelerini Keşfetmek
  • Kapsamlı Bilgi Mimarisi Rehberi