Kullanıcı dostu mobil arayüzleri nasıl tasarlanır

Sep 10, 2025
Nasıl Yapılır

Bazı mobil tasarımlar bir sorundan muzdariptir: yüzeyde harika görünebilirler, ancak bunları kullanmaya başlayabilirler ve yakında çok önemli bir faktörün ihmal edildiğini öğrenirsiniz: ergonomi. İnsan vücuduna uygun tasarımlar yaratma sanatı (diğer yoldan değil), tasarım dünyasının gerçek asılsız kahramanlarından biridir.

Ergonomi, endüstriyel tasarımcılar için her zaman çok önemli olmuştur, ancak dijital tasarımcılar için de giderek daha önemli hale geliyor. Neden? Akıllı telefonlar ve tabletler, dijital tasarımlarla etkileşime girdiğimiz yolu değiştirir. Artık, dijital arkadaşlarımızı ne yapmalı anlatmak için sadece zahmetli bir klavye ve bir fare kullanmıyoruz. Şimdi daha doğrudan, daha fiziksel. Cihazlarımızı tutarız. Onlara dokunuyoruz. Onları sıkarız. Sevgiyle onları vuruyoruz.

Sevgili mobil cihazlarımızla bu giderek daha fazla fiziksel bağ, tasarımcıları yalnızca bir tasarımın nasıl göründüğünü ve hissettiğini, aynı zamanda kullanmanın fiziksel yönlerini de düşünmemelerini zorlar. Tasarımcıların, kullanıcıların akıllı telefonları ve tabletleriyle nasıl tuttuğu ve etkileşime girdiğini düşünmeye zorlar; Ekranın ne kadarıyla rahatça ulaşabilecekleri ve bir tasarımın elinde nasıl hissedebileceği hakkında. Tasarımcıların mobil tasarımın ergonomisini düşünmelerini zorlar.

Peki, ergonomik ve bu nedenle kullanımı rahat olan bir mobil tasarım yaratıyorsunuz?

01. Ofisten çık

Olası tasarımları düşünmeye başlamadan önce bile, bazı ilk elden gözlemler yapmak için ofisin dışındadır. Bir sabah ya da öğleden sonra, insanların mobil cihazlarını nerede, ne zaman ve neden kullandıklarını görün.

İnsanların cihazlarıyla nasıl tutulduğunu ve etkileşimde bulunduğunu, o zamanlar ne yapabileceklerini ve zorluklar ve dikkat dağıtıcı şeyleri neler yapabileceklerini not edin. Bu bilgiler tasarımın ergonomisini bilgilendirmeye yardımcı olacaktır ve gerçekte gerçek dünyada gerçekleştiğiniz senaryoya karşı test edebileceğiniz bir tasarımı test etmek söz konusu olduğunda.

02. Birden fazla tutar için tasarım

The three main holds used for a smartphone, and the frequency which they’re typically used

Bir akıllı telefon için kullanılan üç ana tutar ve tipik olarak kullandıkları frekans

Mobil cihazları kullanan kişileri gözlemlerseniz, yakında kullandıklarını göreceksiniz. farklı tutarların çeşitliliği . Kullanılan çeşitlerin çeşitliliği ve kullanıcıların tutuşunu değiştirdiği frekans, birden fazla tutar ile tasarlamanın önemli olduğu anlamına gelir.

Örneğin, tek elle kullanımı akılda tutulan bir akıllı telefon tasarımı başlatın (bu en zorlu olduğu gibi), ancak her birinin ne kadar rahat olduğunu görmek için her zaman bir dizi tutar boyunca tasarımları test edin.

03. Popüler kontrolleri ulaşmak için yerleştirin

Green areas are easy to reach, amber takes more effort and red areas are hard to reach

Yeşil alanların erişmesi kolaydır, Amber daha fazla çaba gerektirir ve kırmızı alanlara ulaşmak zor

Düğmeler ve bağlantılar gibi sıkça kullanılan kontrolleri, parmaklarınız veya başparmaklarla kolayca ulaşılabilecekleri gibi yerleştirin. Ekranın orta ve dibi, kullanılacak iyi alanlardır, ancak alt köşeler bir cihaz sadece bir elinde tutulduğunda hafifçe vurulabilir (daha fazla oku) İşte ).

Hala menüleri ekranın üstüne yerleştirme sözleşmesidir. Bununla birlikte, bu, ulaşmak zor bir alan olabilir, bu nedenle menüyü ortaya çıkarmak için bir kaydırma eylemini de desteklemek iyi bir fikirdir.

04. İçeriği kontrollere yerleştirin

The BBC iPlayer iPad app places controls in easy to reach areas and below content

BBC iPlayer iPad uygulaması, kontrolleri kolayca ulaşması kolay ve içeriğin altına yerleştirir.

Birinin parmağını ya da parmağını, ekrana dokunurken içeriği engellemek istemiyorsunuz, bu nedenle içeriği kontrollerin üzerine yerleştirin. Ayrıca, bir akıllı telefonun bir yandan tutulduğunda sıklıkla kaplanmış olan alt köşeler gibi, bir parmak veya parmağın - örneğin, bir parmak veya parmağın - örneğin bir parmağın veya parmağın - örneğin, bir parmak veya baş parmağınızla gizlenebileceği bir alanda olmadığından emin olun.

05. Akılda portre modu ile tasarım

Kullanılan tutucu değişebilirken, hem akıllı telefonlar hem de tabletler için çok daha tutarlı olan bir şey, insanların zamanın çoğunluğu için dikey olarak tutması eğilimidir. Yatay tutma genellikle videoları veya fotoğrafları görüntülemek gibi özel görevler için kullanılır, ancak bu norm değil istisna.

Tabii ki bir mobil tasarım hem portre (dikey) hem de manzara (yatay) modları desteklemelidir, ancak bir video veya fotoğraf-ağır site veya uygulama tasarlamıyorsanız, göz önünde bulundurun.

06. Thumbs için Tasarım

The Spotify app is designed to be thumb-friendly, with large tap targets

Spotify uygulaması, büyük musluk hedefleri ile başparmak dostu olmak için tasarlanmıştır.

Thumbs, tüm akıllı telefon etkileşimlerinin çoğunluğunu sürer. Bunun nedeni, bir cep telefonunun bir elinde tutulduğu ve iki elinde tutulduğunda yoğun bir şekilde kullanıldığında başparmakların yalnızca kullanılmasıdır.

Başparmak parmaklarından biraz daha büyüktür ve bu nedenle daha büyük bir dokunuş hedefine ihtiyaç duyar. Bu muslukları en az 44 x 44 puan (16 x 16mm), aralarında en az 7 puan (2,5 mm) ile yapmayı deneyin. Daha büyük musluk hedefleri her zaman daha iyidir ve kesinlikle 44 x 30 puandan (16 x 11mm) daha küçük olmamalıdır.

Tabletler için tasarlamanıza rağmen, hala başparmak için tasarlamanız bile, çünkü bir tasarım, karşılaşacağı en az temas yöntemini desteklemelidir. Büyük bir musluk hedefi sadece başparmak için iyi değil, parmaklar için de harika.

07. Büyük jestler için tasarım

Daha büyük dokunun hedefleri daha iyidir. BÜYÜK TAP HEDEF NEDİR, tüm ekrandan daha mı var? Kullanıcıların, bir fotoğraf galerisinde ileri veya geriye doğru hareket ettirmek veya bir menü ortaya çıkarmak için kullanıcıların öngörülen veya geriye doğru kaydırılmasına izin vermek gibi akılda büyük jestlerle tasarlamaya çalışın.

Kullanıcıların bir jestin desteklendiğini fark etmeyebileceğini unutmayın, bu nedenle bir sonraki fotoğrafı getirmek için bir ok simgesine dokunmak gibi bir şeyler yapmanın ikincil bir yolunu sağlamak için her zaman iyi bir fikirdir.

08. Mücadeleye yükseliş

Ergonomide, bazen 2,5'ten 97.5'in yüzdesine kadar rahat olan bir tasarım yaratarak kullanıcıların yüzde 95'inin yüzde 95'e uyması için tasarımı duyuyorsunuz. Her zaman barınması çok zor olan aşırı kullanıcılar olacak - hepimizin hepimizin bildiği gibi, her zaman herkesi memnun edemezsiniz, ancak daha zorlu kullanıcıların rahatlıkla kullanabileceği bir tasarım yaratabilirseniz, aynı zamanda herkes için çalışması gerekir. aralarında olanlar.

Bu yüzden akılda zorlu kullanıcılar ve senaryolarla tasarlamak iyi bir fikir. Örneğin, bir yandan kahve ile sokakta yürüyen yoğun bir banliyö, diğerinde, ya da artritli biri.

09. Etkileşimleri minimumda tutun

En rahat mobil cihaz etkileşiminin hangisinin olduğunu biliyor musunuz? Bir musluk ya da bir kaydırma ya da bir basın değil. Hiçbir etkileşim yok. Mobil tasarımınızın gerektirdiği daha az etkileşim, ergonomi için endişelenmeniz gerekir. Her zaman etkileşimleri minimumda tutmaya çalışırım. Acımasızca mobil formları azaltın, AutoGugests kullanın ve yalnızca bir kullanıcının gerçekten bildirilmesi gereken şeylere bildirimleri kısıtlayın.

10. Prototip tasarımları

Bir mobil tasarımın ergonomisini elinizde fiziksel olarak tutabilen ve farklı sapları denemeye kadar bir mobil tasarımın ergonomisini yargılayamazsınız. Bu yüzden mümkün olan en kısa sürede bir tasarım prototip yapacağım. Severiz Eksen , ama çok başka var Büyük prototipleme araçları .

Hızlı bir deneme için, basit kağıt prototipleriyle temel kullanıcı testlerini bile çalıştırabilirsiniz. Bir mobil cihaza sıkışmış bir eskiz veya kağıt çıktığı size ergonomi hakkında şaşırtıcı bir miktar söyleyecektir.

11. Test, test edin, sonra biraz daha test edin

Ergonomik mobil tasarımlar oluşturmanın garantili bir yolunu bilmek ister misiniz? Tasarımları test etmek, daha sonra yinelemek ve test etmek, yinelemek, yinelemek, yinelemek ve test etmek ... ve bir sürü farklı kişiye sahip oluncaya kadar devam edin, tüm farklı cihazları kapsayan, tüm tasarımın kullanımı rahat olduğunu bildirir. Bu kadar basit.

Mobil cihazlar tabii ki 'mobil' olarak tasarlanmıştır, bu nedenle, kullanmaları muhtemel olan ortamlarda ve durumlarda tasarımları test etmek için ofisin dışındadır. Kahve dükkanları her zaman test etmek için her zaman iyi bir yerdir. Mümkün olduğu kadar birçok insan (en az beş ya da altı) ve bir akıllı telefonu tek elle kullanmak gibi daha zorlu senaryolara odaklanın. Tasarım, kullanıcının etkileşimleri daha sınırlı olduğunda iyi çalışırsa, zamanın geri kalanını mükemmelleştirdiğinizden emin olabilirsiniz. Öncelikle, gerçekten ergonomik mobil tasarımlar yaratabileceğinizi sürekli test ederek ve yinelemesiyle.

Bu makale başlangıçta net dergide ortaya çıktı. Abone olun.

İlgili Makaleler:

  • Takip etmeniz gereken 16 UX / UI En-Hesapları
  • 20 en iyi tel kafes araçları
  • 2018 için en büyük 5 UX tasarım eğilim

Nasıl Yapılır - En Popüler Makaleler

Windows, MacOS ve Android için Web Bildirimleri Nasıl Kapanır

Nasıl Yapılır Sep 10, 2025

(Görüntü Kredi: Gelecek) Düzenli bir web kullanıcısıysanız, ekranınızın sağ üst köşesinde düzenli ola..

Fotogerçekçi bir oda sahnesi nasıl oluşturulur

Nasıl Yapılır Sep 10, 2025

Gerçekçi bir 3D mimari sineklik nasıl yaratılacağını bilmek istiyorum, ancak çabalarınızı boru hattı içinde nereden ..

Suluboya köpüklü bir gece gökyüzüne üç adım

Nasıl Yapılır Sep 10, 2025

Suluboya, sağa doğru olan inanılmaz bir ortamdır. Sanat Teknikleri En büyülü ve benzersiz görüntüleri ya..

Çarpıcı baskı promosyon malzemesi işçiliği için 3 ipuçları

Nasıl Yapılır Sep 10, 2025

Giderek daha fazla dijital dünyada, akıllıca hazırlanmış baskı promosyon malzemesi ciddi bir etki yaratma gücüne sahipti..

Etkileşimli 3D tipografi etkilerini

Nasıl Yapılır Sep 10, 2025

Tipografi, mesajı artıracak ve iletilen şey için doğru bağlamı sunacak olan doğru yazı tipini seçtikleri için tipograf..

Web Geliştirmede Markdown Nasıl Kullanılır

Nasıl Yapılır Sep 10, 2025

Web geliştiricileri ve içerik yaratıcıları olarak, genellikle içine sarılmış metin yazma metni harcıyoruz. Html..

Fantasy canavarları nasıl boyanır

Nasıl Yapılır Sep 10, 2025

Bir fantezi yaratığı için bir fikir bulduktan sonra, bir sonraki adım inanılır renk ve dokularla boyayarak hayata geçirme..

Photoshop CC'sinde ressam efektler oluşturun

Nasıl Yapılır Sep 10, 2025

Adobe, Photoshop'unuzu almanıza yardımcı olmak için iki yeni video eğitimi yayınladı. Yaratıcı bulut Bir ..

Kategoriler