Mobil uygulama arayüzü ilhamı bulup tasarım özetine dönüştürme
Mobil uygulama arayüzü referansları toplamak, eksiksiz ekran dizilerini incelemek ve görsel gözlemleri özgün, test edilebilir bir tasarım özetine dönüştürmek için pratik bir iş akışı.
Çekici uygulama ekranlarıyla dolu klasör toplamak kolay, kullanmak zordur. Aramaya yön veren soru yoksa görsel referanslar gerçek kullanıcı görevini çözümsüz bırakırken tasarımı taklide çekebilir.
Ekran görüntülerini araştırmayı başlatan ipuçları olarak kullanın. Yararlı iş akışı görevle başlar, eksiksiz akışları karşılaştırır, görsellerin arkasındaki kararları kaydeder ve gözlemleri prototipleyip değerlendirebileceğiniz bir özete dönüştürür.
Önemli noktalar
- Referans toplamadan önce kullanıcıyı, görevi ve tasarım belirsizliğini tanımlayın.
- Yalıtılmış görsel uygulamaları değil, ekran dizilerini ve etkileşim durumlarını inceleyin.
- Aktarılabilir ilkeleri yazın, ardından ürününüz için özgün kararlar verip bunları kişilerle doğrulayın.
- Özet hâlâ esnekken erişilebilirliği ve platform uyumunu kontrol edin.
1. Tasarım sorusuyla başlayın
Göz atmaya başlamadan önce kimin için hangi anı tasarladığınızı tek cümlede yazın. Örneğin: “İlk kez evde yemek yapan biri hafta içi akşamı için tarif seçmeli ve sonra ne yapacağını anlamalı.” Ardından belirsizliği adlandırın: zor olan seçenekleri taramak mı, öneriye güvenmek mi, yoksa çok adımlı tarife başlamak mı?
Bu soru aramanın sınırlarını belirler. Hangi platformun, ürün alanının ve görevin önemli olduğuna karar verin. İlk kullanım deneyimini araştırıyorsanız ilk kullanım örneklerine göz atın; sorun plan seçimi ise abonelik ekranlarını inceleyin; veri girişi için form kalıplarını karşılaştırın. ScreenKits gerçek uygulama ekranlarına kategoriye göre göz atmanızı sağlar. Yararlı uygulamaları tarayıcı yer işareti olarak kaydedin ki sentez sırasında ekranlarına dönebilesiniz.
- Hedeflenen kişi kim ve neyi başarmaya çalışıyor?
- Hangi tasarım kararı belirsiz: hiyerarşi, sıra, gezinme, içerik veya geri bildirim mi?
- Platform, erişilebilirlik, cihaz boyutu veya iş kuralları gibi hangi kısıtlar önemli?
2. Küçük ve amaca uygun bir referans kümesi toplayın
Aynı veya yakın bir görevi ele alan birkaç örnek toplayın. Birden fazla yaklaşım ekleyin: doğrudan yol, yönlendirmeli yol, belki hata veya boş durumu ele alan bir sürüm. Her aday için uygulamayı kaydedin ve yeniden bakmak istediğiniz ekranı veya anı not edin. Küçük küme, filtrelenmemiş ilham panosuna göre karşılaştırmayı kolaylaştırır.
Alttaki sorun ortaksa kategoriler arasında bakın. Planlama uygulaması ve market uygulaması, kişinin tarih seçip değişikliği onaylamasına yardım etmek zorunda olabilir. Yararlı bağ yüzeydeki tema değil, karar yapısıdır. Benzer kitle veya sektörü, arayüzün sizin özel sorununuzu çözdüğünün kanıtı saymayın.
- Referansları “Seçilen seçeneğin özeti nasıl değiştirdiğini gösteriyor” gibi açıkça ifade edebileceğiniz bir nedenle seçin.
- Farklı çözümler ekleyin ki ilk özenli örnek varsayılan yanıt hâline gelmesin.
- Özeti yazarken seçilen uygulamaları karşılaştırabilmek için tarayıcı yer işaretlerini kullanın.
3. Yalnızca ekran görüntüsünü değil, akışı okuyun
Tek başına ekran, bir andaki düzeni, rengi, metni ve denetimleri gösterir. Oraya neyin götürdüğünü, dokunmadan sonra ne olacağını veya görevin başarıp başarmadığını göstermez. İlgili her ekranı sırayla izleyin. Giriş noktasını, kararı, eylemi, geri bildirimi ve sonraki durumu not edin. Görevi etkiliyorsa doğrulama hatası, kapatma ve seçimi düzenlemek için geri dönüş gibi alternatifleri de dahil edin.
Gözlemi yorumdan ayırın. “Birincil eylem üç adım boyunca alta yakın kalıyor” gözlemdir; “bunu kullanmak kesinlikle daha kolaydır” ise henüz kanıtlamadığınız bir iddiadır. Ekran görüntüsü hipoteze ilham verebilir ama kullanılabilirlik kanıtı değildir. NN/g, prototiplemeyi ve kullanıcı testini olası kullanılabilirlik sorunlarını belirleme ve kişilerin önerilen arayüzle nasıl etkileştiğini öğrenme yolları olarak açıklar.
| Kaydedilecek bilgi | Tarif seçimi akışından örnek |
|---|---|
| Kullanıcı hedefi | Bu akşamın süresine uygun akşam yemeği tarifi seçmek. |
| Gözlemlenen kalıp | Süre ve beslenme filtreleri tarif listesinden önce görünüyor. |
| Olası ilke | Sonucu çok etkileyen kısıtları sonuçlara göz atmadan önce sunun. |
| Açık soru | Kişiler hangi filtrelerin isteğe bağlı olduğunu biliyor mu? |
| Ürün kararı | İki temel filtreyi gösterin, daha fazla seçeneği istek üzerine sunun. |
4. Gözlemleri özgün bir tasarım özetine dönüştürün
Sentez, referansların yararlı hâle geldiği yerdir. “Seçimin sonucunu onaydan önce görünür kılmak” gibi taşınabilir bir ilke çıkarın. Sonra görevi, içeriği ve kısıtları temel alarak bu ilkenin ürününüzde nasıl işleyeceğine karar verin. İkna edici örnekte görünüyor diye markalı çizimi, birebir metni veya ayırt edici düzeni kopyalamayın.
Tarif örneğinde referans kümesi, zamanı erkenden göstermeyi ve seçilen filtrenin neyi değiştirdiğini önizlemeyi düşündürebilir. Özgün özet, kısa bir akşam yemeği planlama yolu, görünür zaman kısıtı, açık filtre durumları ve kaydetmeden önce inceleme adımı belirleyebilir. Bu kararlar ürünün hedefine yanıt verir; başka uygulamanın ekranını yeniden üretmez.
- Kitle ve bağlam: buna kimin ihtiyacı var, nerede veya ne zaman kullanacak?
- Kullanıcı hedefi ve başarı: neyi bitirebilmeli veya anlayabilmeli?
- Akış: ana adımlar, kararlar ve önemli alternatif durumlar neler?
- Tasarım ilkeleri: arayüz neyi açık veya kolay kılmalı?
- Kısıtlar ve açık sorular: neler doğru olmalı, neler araştırılmalı?
- Değerlendirme planı: prototipi kullanan kişiye hangi görevi vereceksiniz ve neyi gözlemleyeceksiniz?
5. Prototip oluşturun, erişilebilirliği kontrol edin ve iyileştirin
Görsel stili parlatmadan önce özeti kabaca çizilmiş ekran akışına dönüştürün. Temel kararı ve geri bildirimini prototipleyin, ardından hedef kitleyi temsil eden bir kişiden gerçekçi görevi tamamlamasını isteyin. Duraksamaları, beklenmedik seçimleri ve hataları izleyin. Akışı gözden geçirip yineleyin; NN/g'nin araştırma rehberi, ilk taslağın tamamlandığını varsaymak yerine yinelemeli tasarımı ve prototip değerlendirmesini öğrenmenin parçası sayar.
Bu çalışmayla birlikte erişilebilirlik incelemesi de yapın. Apple'ın Human Interface Guidelines rehberi algılanabilir, uyarlanabilir etkileşimleri ve farklı giriş yöntemlerini dikkate almayı vurgular. Metin büyütmeyi, kontrastı, denetim boyutu ve aralığını, açık etiketleri ve anlamın yalnızca renge bağlı olup olmadığını kontrol edin. Akışın uzun metinlere uyarlanıp uyarlanmadığını ve yardımcı teknolojilerle anlaşılıp anlaşılmadığını da kontrol edin. Ürününüz Android kurallarını izliyorsa Material Design erişilebilirlik rehberi yararlı bir tamamlayıcıdır.
- Arayüz turu değil, görev yönergesi verin ve kişilerin ilerleyip ilerleyemediğini gözlemleyin.
- Yapısal değişiklikler hâlâ kolayken erken, düşük ayrıntılı sürümü test edin.
- Desteklediğiniz cihaza ve tasarım sistemine ilişkin platform rehberini inceleyin.
- Referanslara yalnızca soruyu araştırmak için dönün; görsel benzerliği kanıt yerine koymayın.
Referanstan özete kontrol listesi
Özeti devretmeden önce ruh hâli panosu değil, ürün kararı anlattığından emin olun. Referansları toplamayan biri amaçlanan görevi, önerilen akışı, hâlâ çözümlenmemiş seçimleri ve ekibin tasarımın işe yarayıp yaramadığını nasıl öğreneceğini anlayabilmelidir.
- Özgün kullanıcı ve görev açıkça belirtilmiştir.
- Her referansın, hangi soruyu veya kalıbı araştırmaya yardımcı olduğunu açıklayan notu vardır.
- Gözlemler varsayımlardan ve kullanılabilirlik iddialarından ayrılmıştır.
- Özet özgün akışı ve ürüne özgü gerekçeyi açıklar.
- Erişilebilirlik, platform davranışı ve önemli alternatif durumlar dahil edilmiştir.
- Bir prototip görevi ve gözleme dayalı inceleme planı tanımlanmıştır.
