Mobil UX Tasarım Kısıtlamaları, En İyi Uygulamalar ve Geliştiricilerle Çalışma

Mobil UX tasarımı en iyi uygulamalarını takip ederek, kısıtlamaları anlayarak ve geliştiricilerle sağlam bir çalışma ilişkisini kolaylaştırarak daha iyi kullanıcı deneyimleri elde edebiliriz.

Mobil UX Tasarımı Nedir?

TechCrunch ile ilgili yakın tarihli bir makale, 2018 Şükran Günü tatil döneminde mobil e-ticaretin tüm çevrimiçi satışların yaklaşık üçte birini oluşturduğuna dikkat çekti ve Digital Trends, 2017'de dünya çapında 5 milyar insanın artık bir mobil cihaza sahip olduğunu bildirdi. Google ayrıca, mobil öncelikli indekslemenin artık arama sonuçlarındaki web sayfalarının yarısından fazlası için kullanıldığını duyurdu.

İnsanlar her gün iletişim, e-ticaret, içerik tüketimi, iş, bankacılık, yol tarifleri ve giderek artan bir şekilde tek bilgi işlem cihazı olarak mobil cihazlara bağımlıdır. Dahası, cep telefonları, akıllı saatler, tabletler, tabletler, giyilebilir cihazlar ve hibrit dizüstü bilgisayarlar gibi çeşitli cihazlar kullanıyorlar.

Mobil kullanıcı deneyimi (UX) tasarımı, mobil cihazların ve giyilebilir cihazların ve bu tür cihazlarda çalışan uygulamaların veya hizmetlerin kullanımı sırasındaki olumlu deneyimlerin tasarımını ifade eder…Mobil UX tasarımı, verimlilik ve keşfedilebilirliğe güçlü bir şekilde odaklanır. - Etkileşim Tasarımı Vakfı

UX tasarımcıları için bu mobil cihaz trendleri hem zorlukları hem de fırsatları temsil ediyor. Bir yandan, cihazların çeşitliliğini ve bunların kullanılma şekillerini hesaba katmamız gerekiyor. Öte yandan, bu, UX tasarımında tamamen yeni bir dizi odak alanı açar ve bu, tamamen yeni nesil kullanıcılar için olumlu deneyimler yaratmak anlamına gelir.

Mobil Kullanıcı Deneyimi Tasarımı için En İyi Uygulamalar

Mobil UX tasarımı zor. Daha önce de belirtildiği gibi, artan mobil cihaz listesi, insanların onlarla etkileşim kurma biçimleri ve insanların tüm cihaz türlerinde tutarlı ve zevkli deneyimler istemesi gibi dikkate almamız gereken pek çok şey var.

Google'ın 25 Mobil UX Tasarım İpuçları

2015'te Google, dahili araştırmalara dayalı 25 mobil UX tasarımı en iyi uygulamasını yayınladı. Bu ipuçları, onları daha güncel hale getirmek için yakın zamanda güncellendi. Yazar ayrıca, herhangi bir mobil UX projesi için kullanışlı olması güzel olan 25 ipucunun tümünün indirilebilir bir PDF'sini içerir.

Apple'ın İnsan Arayüzü Yönergeleri

Elinizin altında bulundurmanız gereken bir başka harika kaynak da Apple'ın mobil tasarım için İnsan Arayüzü Yönergeleri'dir. Güzel bir düzen ile okunması kolaydır ve en iyi uygulamalar, ipuçları ve Apple'ın kendi tasarım ilkelerini ele alır. Mobil UX tasarımcıları için bu yönergeler, yüksek kaliteli kullanıcı deneyimleri sunmak için harika bir kaynaktır.

Ek Mobil Kullanıcı Deneyimi En İyi Uygulamaları

İşte, Google'ınki kadar iyi bilinmeyebilecek, ancak mobil tasarımcıların dikkate alması gereken birkaç mobil UX tasarımı en iyi uygulaması.

• UX Araştırması . Belli bir noktada, doğrudan maketlere veya prototiplere girmeye meyilli hissedebiliriz, ancak önce uygun UX araştırması yapmak hafife alınamayacak bir şeydir. Her zaman "sizin kullanıcınız değilsiniz" ve olumlu bir kullanıcı deneyiminin her durumda kapsamlı UX araştırmasına bağlı olduğunu unutmayın. Daha fazla referans için Adobe'nin UX araştırma yöntemlerine yönelik kapsamlı kılavuzu.
• dağınıklık . Hepimiz dağınık bir masaüstünün kaygısını yaşadık; bunu bir mobil cihazda hayal edin! Eklenen her düğme, resim, içerik parçası vb., işleri çok daha karmaşık hale getirir. Bir mobil kullanıcı arayüzünde kesinlikle gerekli olmayan her şeyden kurtulmak iyi bir fikirdir. Harika bir ipucu, minimalizm için çabalamaktır, ancak iyi kullanılabilirlik tehlikesine girmemek. Bu genellikle her ekranda bir ana eyleme öncelik verilerek başarılabilir.
• Öncelik ver . Mümkün olduğunca çok özellik eklemeye çalışma eğilimi vardır. Bir şeyi dışarıda bırakmanın bir şekilde kullanıcılar için daha az deneyim yaratacağını düşünüyoruz. Aksine, temel hedeflere dayalı olarak özellikleri yüksek oranda odaklayın ve hangi özelliklerin en çok kullanıldığını analiz ederek tasarımı iyileştirin, ardından bu özellikleri hem sezgisel hem de zevkli hale getirmek için çaba gösterin.
• Hedefler öğesine dokunun . Kullanıcılar, bir şeye dokunduklarında ve yanıt vermediğinde fiziksel olarak sinirlenebilir ve mobil cihazlarına vurmaya başlayabilir. MIT'de yapılan bir araştırma, çok küçük bir dokunma hedefi olan bir şeye dokunduklarını buldu. En iyi uygulama, ortalama parmak ucu genişliği olan en az 7-10 mm kontroller, düğmeler, bağlantılar vb. (dokunma hedefi olan herhangi bir şey) oluşturmaktır. Bu UI öğeleri arasında yeterli boşluk olmasını sağlamak da iyi bir fikirdir.
• Okunabilir Metin . Kullanıcıların yaptıklarının çoğu içerik tüketimine dayandığından, her tür mobil cihazda tutarlı bir deneyim sağlamak için, birden çok boyut ve ağırlıkta iyi çalışan yazı biçimleri seçtiğinizden emin olun. Göz yorgunluğunu azaltmak için en az 11 puntoluk yazı boyutları önerilir. Google'ın Roboto ve Noto'su veya Apple'ın yeni San Francisco yazı tipi gibi temiz ve okunması kolay yazı tipleri, keşfetmek için harika seçeneklerdir.
• Kullanıcı Arayüzü Geri Bildirimi . İyi tasarlanmış uygulamalar, onlarla etkileşime girerken bizi bilgilendirir. İyi geri bildirim eksikliği, kullanıcıların kafasını karıştırabilir ve bir şeyin olup olmadığını, olup olmadığını veya neden olduğunu/olmadığını sorgulamalarına neden olabilir. En iyi uygulama, UI öğesine veya uygulamanın mevcut durumuna bağlı olarak farklı geri bildirim biçimleri (ses, dokunma, görselleştirmeler) kullanmaktır.
• Erişilebilirlik Bu muhtemelen kullanıcı deneyimi tasarımının ve özellikle mobil UX tasarımının en çok gözden kaçan yönlerinden biridir. Dünya nüfusunun %15'i bir tür engellilik yaşıyor. Web İçeriği Erişilebilirlik Yönergeleri ücretsiz olarak erişilebilen bir kaynaktır ve dijital tasarımcılar için araç kutularının bir parçası olarak "olması gereken" bir kaynaktır.

Mobil UX Tasarım Kısıtlamaları

Çoğu UX tasarımcısının amacı, zevkli deneyimler sunmak ve hem keşfedilebilirlik (hangi eylemlerin mümkün olduğu) hem de anlayış (ürünün nasıl kullanılması gerektiği) sağlayan harika tasarımlar ortaya çıkarmaktır. Ancak mobilde boyut, taşınabilirlik ve bu cihazların kullanıldığı ortamlar nedeniyle getirilen bazı kısıtlamalar vardır.

Depolama Kısıtlamaları

Tasarımcıların yerel mobil uygulamalarla uğraşırken bazı kullanıcıların depolama kısıtlamaları olabileceğini göz önünde bulundurması gerekir.

Bir web uygulamasının aksine bir mobil uygulama, depolamayı doğrudan mobil cihazda kullanır. Bunun mobil UX tasarımı üzerinde etkisi vardır, çünkü kullanılabilecek video, ses ve görüntülerin kalitesi üzerinde potansiyel sınırlamalar getirir.

Yerel uygulamalar için depolama kısıtlamalarını hesaba katan mobil UX tasarımları istiyoruz. Bir kullanıcı bir depolama sınırlamasıyla karşılaştığında, neyi saklayıp neyi sileceğine dair zor kararlar vermek zorundadır. Kullanıcıları bu seçimleri yapmaya zorladığımızda kötü bir kullanıcı deneyimi yaşar.

Ekranlar ve Kontroller

Mobil UX tasarımında karşılaştığımız bir diğer kısıtlama, ekran boyutu ve mobil cihazlarımızdaki kontrollerdir.

Mobil ekranlar daha küçüktür: gözetleme deliğinden okumak bilişsel yükü artırır ve anlaşılmasını yaklaşık iki kat zorlaştırır. - Jakob Nielsen, Web Kullanılabilirlik Danışmanı.

Ekranlar ve kontrollerle başa çıkmanın en iyi yolu, mümkün olduğunca fazla sürtünmeyi ortadan kaldırmaktır. Bilgileri yeniden yapılandırın, başparmak bölgelerine dikkat edin, tıklamaları azaltın (özellikle e-ticaret ile) ve genellikle sinir bozucu olabilen oturum açma sürecine dikkat edin.

Çevre

Mobil cihazlarda UX tasarımı için dikkate alınması gereken çevresel faktörler vardır. Kullanıcılar çok daha sık çevrimdışı olmaya maruz kalıyor ve bu durumların genel kullanıcı deneyiminde dikkate alınması gerekiyor. Onları oldukları yere nasıl geri getireceğiz? Yaptıkları şeye en baştan başlamak zorunda olmadıklarından nasıl emin olabiliriz?

Bir diğer çevresel faktör de dikkat dağıtıcı unsurlardır. Cep telefonlarımızı veya tabletlerimizi kullandığımızda, genellikle konsantre olmayı zorlaştıran gürültülü veya kalabalık bir ortamdayız. Dikkat dağıtıcı unsurlar bir kullanıcının dikkatini çekmek için rekabet ederken iyi bir kullanıcı deneyimini nasıl sağlayabiliriz? Durumları kaydetmenin ve kullanıcılarımızın da durumları kaydetmesine izin vermenin yolları var mı?

Küçük Ekran Boyutu, Tek Pencere

Tasarımcıların mobil UX tasarımıyla karşı karşıya oldukları bir diğer kısıtlama, ekranın sınırlı boyutudur. Bu nedenle, insanlar bir seferde yalnızca bir pencere görebilir ve bu, kullanıcı deneyimine büyük bir sınırlama getirir.

“Çoklu ekran” ve “çoklu görev”e uyum sağlamaya yönelik çabalar var, ancak bunlar henüz norm değil ve kendi kısıtlamaları ile birlikte geliyor.

Bu tek pencere kısıtlamasıyla daha iyi mobil UX'in anahtarı, tasarımın kendi kendine yeterli olması gerektiğidir. Kullanıcı tarafından yapılması gereken herhangi bir şey tek bir ekran veya pencere içinde yapılabilir olmalıdır, yani bilgi bulmak için uygulamadan ayrılmak zorunda kalmamalıdır vb.

Kullanıcılar uygulamalardan çıkmak veya yeni ekranlar açmak zorunda kaldığında, bu genel bilişsel yüke eklenir ve bu, işlerin çok karmaşık ve sinir bozucu hale geldiği anlamına gelir.

İnsanlar Mobil Cihazları Nasıl Tutuyor?

Dikkat edilmesi gereken son bir kısıtlama var: Gadget'larımızı tutmak. İnsanlar onları nasıl tutuyor ve bu, mobil UX tasarımı için ne anlama geliyor?

Steven Hoober tarafından yapılan ve Design for Fingers, Touch and People, Bölüm 2'de özetlenen araştırmaya göre, insanların cihazları nasıl tuttuklarına bağlı olarak farklı şekillerde etkileşime girdiği ve bunun daha sonra mobil UX tasarımı üzerinde bir etkisi olduğu keşfedildi.

İnsanlar mobil cihazlarını çeşitli şekillerde tutarlar ve konumlarını her zaman değiştirirler. Bunun, hangi parmak(lar)ı kullandıkları ve mobil kullanıcı arayüzü ile nasıl etkileşime girdikleri üzerinde etkisi vardır (aşağıya bakın). Görünen o ki, kullanıcılar ekranın ortasını tercih ediyor ve kenarlara çok yakın olan öğelere tıklamaktan hoşlanmıyorlar.

İşte Steven'ın araştırmasından bazı ek mobil UX ipuçları:

• Her kullanıcı ve her tür ve boyutta mobil cihaz için tasarım
• İnsanların cihazlarıyla çalıştığı tüm çeşitli yollar için tasarım
• Kullanıcıların çoğu durumda ekranlarının ortasına dokunmayı tercih ettiğini düşünün
• Anahtar eylemleri ekranın orta yarısından üçte ikisine kadar yerleştirin
• Parmakların ve başparmakların içeriği engellemediğinden emin olun
• Seçilebilir öğeler, rahatça dokunulabilecek kadar büyük olmalıdır.

Geliştiricilerle Çalışmak

Çevik/yalın bir UX ortamında çalışsın ya da çalışmasın, çok dikkatli hazırlanmış tasarımları yorumlamak ve uygulamak zorunda olan geliştiricilerdir. Tasarımların amaçlandığı gibi uygulandığından emin olmak için geliştiricilerle önceden denenmiş ve gerçek en iyi uygulamalar oluşturmak iyi bir fikirdir. İşte birkaç öneri ve ipucu.

maketler

Maketleri hazırlarken ve teslim ederken dosya adlarını basit, tutarlı ve açıklayıcı tutmaya çalışın. Bu, ileri geri gitmek için çok zaman kazandıracak. Her ekranın yalnızca bir sürümünü almaları için geliştiricilerle paylaşmadan önce tüm maketleri sonlandırmak da iyi bir fikirdir. Zaman kazandıran başka bir ipucu, prototiplerle olan tüm etkileşimleri çalışır ve işlevsel olacak şekilde test etmektir. Örnekleri paylaşmak için iyi araçlar: InVision ve Marvel .

Fonksiyonel özellikler

UX tasarımcıları olarak yapılan işlerin çoğu, geliştiricileri projenin başlarında içerir ve tasarım sürecinin devam eden bir şekilde anlaşılmasını kolaylaştırmanın ve daha iyi bir iletişim hattı oluşturmanın harika bir yolu, bir İşlevsel Belirtim belgesi veya bir "Func" oluşturmak ve kullanmaktır. -Spec.”

Func-Spec belgesi, tasarım projesi boyunca geliştiricilerle paylaşılması ve bir uygulamanın veya web sitesinin nasıl çalışacağını (ya da kullanıcı arayüzünün nasıl görüneceğini) anlamalarına izin vermesi dışında, mimarların oluşturduğu bir plana benzer.

Çalışan bir Func-Spec'in iyi bir örneği aşağıda gösterilmiştir:

kopyala

Genellikle, geliştiricilere iletilmesi gereken bir maketin dışında yaşayan çok sayıda kopya vardır. İşte kesinlikle takdir edecekleri bir fikir:

Yukarıda görüldüğü gibi bağlam , geliştiricinin mesajın ne zaman görünmesi veya kaybolması gerektiğini anlamasına yardımcı olur. Geliştiricinin neler olup bittiğini bilmesini sağlamalıdır, böylece tahmin etmek zorunda kalmazlar. Mesaj , görünecek asıl kopyadır. Gerçek kopyayı kullanın ve anlamsız sözler kullanmayın (ör. lorem ipsum). Geliştiriciler metin yazarı olmak istemiyor ve biz onlar için işleri olabildiğince sorunsuz hale getirmek istiyoruz.

Özellikler

Bu, tasarımların geliştiricilerle iletişiminin en önemli bölümlerinden biridir. İşte burada Zeplin ve InVision's Inspect gibi araçlar gerçekten parlıyor çünkü ölçümler, stil kılavuzları, yazı tipleri, kullanıcı deneyimi akışı ve tasarımın her parçasının nasıl çalıştığı gibi iletişim özellikleriyle ilgileniyorlar.

İletişim IRL (Gerçek Hayatta)

Tasarımcılar aletlerini severler. Öyle ki, telefonu elinize almayı, görüntülü arama başlatmayı veya geliştiricilerin yanına gidip konuşmayı unutmak gerçekten çok kolay olabilir. Bir tasarımın bir kısmını teslim ettikten sonra geliştiricilerle basitçe buluşarak çok zaman kazanıldı çünkü herhangi bir soru veya nüans anında tartışılabilir. Bu genellikle unutulur, ancak normal teslim sürecinin bir parçası yapılırsa, herkes zamandan tasarruf ettiğini takdir edecektir.

Hepsini Bir Araya Bağlamak

Mobil gitmiyor. 2016 yılında, web'e mobil cihazdan erişen kullanıcı sayısı ilk kez masaüstü kullanımını geçti. UX tasarımcıları için mobilin artan oranda benimsenmesi ve çeşitli cihaz türlerinin yaygınlaşması, kullanıcı deneyimi tasarımını çok daha zorlu hale getirecek.

Bu nedenlerle, bir dizi en iyi uygulamaya bağlı kalmak, mobilin getirdiği kısıtlamaları anlamak ve geliştiricilerle sorunsuz bir çalışma ilişkisi sağlamak, olumlu insan deneyimleri yaratan tasarımlar elde etmede kilit faktörler olacaktır.

• • •

Toptal Tasarım Blogunda daha fazla okuma:

• Tasarım İlkeleri ve Önemi
• En İyi UX Tasarımcı Portföyleri – İlham Veren Vaka Çalışmaları ve Örnekler
• Tasarımın Gestalt İlkelerini Keşfetmek
• Adobe XD ve Sketch - Hangi UX Aracı Size Uygun?
• En İyi Tasarımcıların Kullandığı 10 UX Çıktısı