12 Mobil ve Web Uygulaması Kullanıcı Arayüzü Tasarım Püf Noktaları - Şimdiye Kadar Kimsenin Size Anlatmadığı
Yayınlanan: 2016-02-28[ Proto .io, gerçek uygulamalar gibi görünen ve hissettiren tamamen etkileşimli gerçekçi prototipler oluşturmak için girişimciler ve yeni başlayanlar tarafından kullanılan bir mobil uygulama prototipleme aracıdır.]
Yedi UI tasarımcısına, geliştiricisine ve girişimcisine, mobil ve web uygulaması UI tasarım püf noktalarını zor yoldan öğrendiklerini veya kariyerleri boyunca öğrendiklerini sorduk. Ya hiç kimse onlara bu ipuçlarından bahsetmedi ya da onları gündeme getirdiklerinde hiç kimse sorunları bilmiyor gibi görünüyor. Her durumda, şimdi deneme yanılma yoluyla öğrenmeniz gerekmeyen 12 şey var - tabii ki zaten öğrenmediyseniz!
Duffy'den En İyi 3 Tasarım Püf Noktası
John Geletka, 30 yılı aşkın tasarım deneyimine sahip bir ajans olan Duffy'de (@duffydesignx) Dijital Stratejiden Sorumlu Başkan Yardımcısıdır. İşte yıllar boyunca aldığı birkaç numara.
İki, sihirli bir sayı olabilir.
“Duyarlı tasarımla, her zaman aynı anda iki ekran tasarlayın: mobil dikey (320 piksel) ve masaüstü (1200 piksel). Süreci çok daha hızlı hale getiriyor” diyor Geletka.
Çıplak bir kemik tasarımıyla başlayın.
“İlk başta tüm özellikleri, zilleri ve ıslıkları azaltın. Önünüzdeki çöpleri kaldırın ve uygulamanın amacına odaklanın” diyor Geletka. “Bu, ilk başta tasarımınıza paylaşım, kaydetme ve her türlü entegrasyonu eklemeyin anlamına gelir. Ana fikri anladığınızdan emin olun.”
Kalem almaktan korkmayın.
Geletka, "Dijital araçlar harika, ancak bazen kağıt üzerinde 10 dakikada daha fazlasını yapabilirsiniz" diyor. "Zamanında sıkışıp kalırsan ya da vaktin kısıtlıysa, kağıt kullan."
Bu Web Uygulaması Kullanıcı Arayüzü Tasarım Numarası ile Dengeye Ulaşın
Brandon Termini, "amaçlı olarak güzel ve keyifli" web uygulaması kullanıcı arayüzü tasarımları ve dijital ürünler yaratmaya kendini adamış bir ajans olan Handsome'ın (@HandsomeMade) Kurucusu ve Yaratıcı Direktörüdür.
Doğru optik ağırlığı kullanın.
“Başarılı arayüzler oluştururken denge çok önemlidir. İyi bir denge, kullanıcılarınızın uygulamanızı istediğiniz şekilde kolayca taramasını sağlar," diyor Termini. “Arayüzlerde çeşitli simgeler kullanırken bu kuralın en sık ihlal edildiğini görüyorum. Bazı simgeler daha yatay, diğerleri daha dikeydir ve bir araya getirildiklerinde eşit derecede dengeli hissetmelerini sağlamak bizim işimiz.”
Optik Ağırlık ve Oynat Düğmeleri
“Bir oynat düğmesi tasarlıyorsanız, yanıt, bir dairenin içine yatay ve dikey olarak ortalanmış eşit kenarlı bir üçgen yapıştırmak değildir. Elbette, geometrik olarak ortalanmışlar, ancak üçgen, daha yüksek yüksekliği nedeniyle optik olarak solda daha ağır geliyor, ”diyor Termini. "Endişelenme - bunu düzeltmek için iki şey yapabilirsin: ya üçgeni ortalanmış olarak görmesi için kandırmak için üçgeni hafifçe sola doğru hareket ettir ya da tüm kenarların eşit görünmesini sağlamak için üçgenin genişliğini biraz azalt."
Web Uygulaması Kullanıcı Arayüzü Tasarımından Mobil'e
Sonraki üç mobil ve web uygulaması UI tasarım hilemiz, Başkan Yardımcısı ve Kullanıcı Deneyimi Strateji Direktörü Christian Dodd ve Cramer-Krasselt'in (@cramerkrasselt) Yaratıcı Teknoloji Direktörü Nathan Koch'tan geliyor. Cramer-Kasselt, Porsche, Corona Extra ve Heinz gibi müşterileri olan ABD'deki en büyük ikinci bağımsız reklam ajansıdır, dolayısıyla Dodd ve Koch bize şu tavsiyeyi sunmak için zengin bir deneyim birikiminden yararlanmaktadır:
Mobil ortama taşırken herhangi bir web üzerine gelme etkileşimini unutmayın ve tasarımın başlarında bunlarla başa çıkmak için net bir plan yapın.
“Masaüstünde fareyle üzerine gelme durumunun arkasına saklanan içerik, mobilde birkaç şekilde ele alınabilir: doğrudan sayfada ve bir dokunuşun arkasına saklanarak. Dodd ve Koch, masaüstü vurgulu olaylarıyla başa çıkmak için hiçbir çözüm her durumda işe yaramaz” diyor. “Açıklayıcı/faydalı içerik genellikle sayfada gösterilmek üzere yukarı kaydırılmaktan yararlanır ve keşif içeriği genellikle bir dokunuşun arkasında daha anlamlı olur. Genel olarak, kullanıcılar tüm cihazlarda daha rahat gezinmeye başladıkça, içeriği fareyle üzerine gelme durumlarının arkasına gizlemek ve widget'ları gizlemek/göstermek giderek daha az gerekli hale geliyor.
Sizin için tavsiye edilen:
Anti-Profiteing Hükmü Hintli Startuplar İçin Ne Anlama Geliyor?
Edtech Startup'ları Hindistan'ın İşgücünün Becerilerini Geliştirmesine ve Geleceğe Hazır Olmasına Nasıl Yardımcı Oluyor?
Bu Hafta Yeni Çağ Teknoloji Hisseleri: Zomato'nun Sorunları Devam Ediyor, EaseMyTrip Gönderileri Stro...
Hintli Startup'lar Finansman İçin Kısayollar Kullanıyor
Dijital Pazarlama Platformu Logicserve Çantaları 80 INR Cr Finansmanı, LS Dig Olarak Yeniden Markala...
Rapor, Lendingtech Alanına İlişkin Yenilenen Düzenleyici İncelemeye Karşı Uyarıyor
Mobil web'de otomatik olarak oynatılan videoyu almaya çalışmak genellikle buna değmez.
“Mobil işletim sistemi geliştiricileri, bir nedenden dolayı videonun otomatik oynatılmasına izin vermiyor. Dodd ve Koch, genel olarak ses ve videonun kullanıcı için mobil cihazlarda daha rahatsız edici olduğunu söylüyor. "Mobil kullanıcılar medyayı tüketmek için bilinçli seçimler yapmaya alışkın."
Duyarlı tasarımda tarayıcınızı küçültmekten daha fazlası var.
Dodd ve Koch, "Özellik algılama, mobil web geliştirmenin de önemli bir parçası" diyor. "Bir masaüstü web sitesinde dokunma olaylarını ikinci kez tahmin edemeyeceğinizi düşünmeyin, mobil etkileşimin ayrıntıları göründüğünden daha karmaşıktır."
Üç Kuralında Düşündüğünüzden Daha Fazlası Var
Karolyn Hart, InspireHUB'un (@Inspire_HUB) COO'su ve piyasadaki en eski kurumsal düzeyde mobil web uygulamalarından biri olan IHUBApp'ın yaratıcısıdır.
Tüm web uygulaması UI tasarım öğelerini üç kişilik gruplar halinde tutmaya çalışın.
“Müşterilerimiz için arayüzümüzde nasıl güven oluşturacağımızı araştırırken 'Üç Kural'a rastladık. Platformumuzun V1.0 hedefi isabetli değildi," diyor Hart. “Araştırma, güveni artıran en uygun sayının üç olduğunu gösteriyor. Üçten az ve insanlar emin değil, üçten fazla ve bunalmış hissediyorlar.”
Hart, "Bu yüzden, müşterilerimiz uygulamalarını doldururken kararlardan adımlara kadar her şeyin üçer üçer sunulması gereken bir UX meydan okuması yaptık" diyor. Kural, aracımızı dönüştürdü. Arka planımız, tasarımın sadeliğine uyum sağlamak için son derece sofistike, ancak getirisi buna değdi!”
Hareketleri Basit ve Sezgisel Tutmak
Jason Suriano, Rocketfuel Productions Inc.'in (@TrajectoryIQ) Kurucusu ve CEO'sudur. Mobil ve web uygulaması UI tasarımında 13 yılı aşkın deneyime sahip olan ve Discovery Communications gibi şirketler için çevrimiçi ve mobil tabanlı projeler yaratan Suriano, birkaç profesyonel ipucu aldı. İşte onun favorisi:
Mobilde tüm parmakların sakar olduğunu varsayın.
“Mobil oyunlar tasarlarken uyguladığımız bir püf noktası, tüm başlangıç ekranını dokunulabilir bir alan yapmaktır. Bunun anlamı, kullanıcı başlat düğmesine dokunur ve ıskalarsa, uygulamanın sonraki oyun ekranını yüklemeye devam etmesi ve kullanıcının uygulamaya devam etmesini sağlamasıdır, ”diyor Suriano.
"Mobil UI/UX, dokunma, çift dokunma, kaydırma ve hareketlerle tanımlandığından, başlangıç ekranı gibi basit bir şey tasarlarken yapılan bir yanlış adım, kullanıcınızı yarı yolda bırakabilir veya hayal kırıklığına uğratabilir ve onları ana sayfa düğmesine basıp uygulamadan çıkmaya zorlayabilir" diye ekliyor. .
Yeni Web Uygulaması Kullanıcı Arayüzü Tasarım Püf Noktalarına Açık Fikirde Olmak
Nolan Kier ve merkezi NYC'de bulunan bir uygulama geliştirme şirketi olan Messapps'ta (@Messapps) Proje Yöneticisi ve İş Geliştirme Ortağıdır. Kier, "Üç yıldan biraz daha kısa bir süre önce kurulmuş olmasına rağmen, Messapps hızla uygulama geliştirme alanındaki en itibarlı ve yenilikçi uygulama geliştirme firmalarından biri haline geldi" diyor ve "çok sayıda web uygulaması kullanıcı arayüzü öğrendik. bu üç kısa yılda tasarım püf noktaları.”
İşi halletmek için yeni ve daha iyi yollar araştırmaya devam edin.
Kier, "Bir görevi tamamlamak için ya sorunu araştırarak ya da belirli bir geliştirme sorununu daha derine inerek hangi yanıtların açığa çıkarılabileceğini belirleyerek öğrendiğimiz birçok püf noktası veya yeni yöntem" diyor. “Bunun örnekleri arasında, programlama stiline/formatına sahip bir metin düzenleyiciye benzeyen LaTeX'e yeni kod parçacıkları yazarak harika belgeler yazmayı öğrenme yer alıyor. Ayrıca, MacOS için Mathcad'e benzeyen Mathematica, bir kullanıcının yazılımı kullanarak zor bir 3D şema oluşturmasına izin veren bu temiz gizli özelliğe sahipti.”
Kierk, "Tasarım için, alfa kanallarını değiştirmek gibi şeyleri kullanarak kareleri nasıl sıkıştıracağınızı bulmak ve özel algoritmalar kullanarak tek tek görüntüleri sıkıştırma yeteneği, sürece yardımcı olan küçük numaralardı" diyor. “Web uygulaması UI tasarımı ve geliştirme işinde olmak, teknolojinin evrimine uygun inovasyon gerektirir. Sonuç olarak, tasarımcılarımız ve geliştiricilerimiz “tekerleği yeniden icat etmek” ve tasarım ve geliştirmenin yeni yollarını keşfetmek için sürekli olarak iç ve dış süreçlerimizi yeniden işlerler.
Birlikte Çalışacak Doğru İnsanları Bulmak
Robert Pieta, bağlamsal öneriler sunan akıllı bir iOS klavyesi olan Porter Key (@PorterKeyboard) şirketinin iOS mühendisi ve CEO'sudur. İşte hem bir mühendis hem de girişimci olarak en büyük tavsiyesi:
Bir geliştirici tasarımcısı veya tasarımcı geliştiricisi bulun.
Pieta, "Her iki taraftan da anlayan ve üst düzey deneyime sahip biri, iletişim sorunlarının çözülmesine ve bir projenin zamanında yapılmasına yardımcı olacaktır" diyor. “Bunun iki temel faydası var. İlk olarak, tasarım ve geliştirme deneyimine sahip bir kişi, iletişim boşluklarını kapatmaya yardımcı olabilir. Hem tasarım hem de geliştirme kendi anahtar terimlerine, argoya, örtük varsayımlara ve temel kiracılara sahiptir. Her iki dünyayı da bilerek, iletişim sorunları önceden yakalanabilir.”
Pieta, "İkincisi, tasarım deneyimine sahip bir geliştirici, karmaşıklığı ve kaynak gereksinimlerini tek bir geliştiriciden, tek tasarımcıdan ve hatta ürün yöneticisinden çok daha iyi tahmin edebilir," diye ekliyor. "Genellikle, küçük tasarım değişiklikleri geliştirme süresinde önemli bir azalmaya yol açabilir. Bu, özellikle belirli tasarım paradigmalarının neredeyse önceden oluşturulduğu mobil cihazlarda geçerlidir. Hangi özelleştirmelerin uygulanmasının kolay olduğunu ve hangi animasyonların kullanımının kolay olduğunu anlamak, hem geliştiricilerin hem de tasarımcıların süreçten keyif almasını sağlamaya yardımcı olacaktır."
Pieta, "Bazı mevcut ekipler, geliştiriciler ve tasarımcılarla yapılan stand-up toplantılarının bu sorunları çözdüğünü iddia edebilir, ancak çoğu zaman durum böyle değildir. Toplantı, örtük tasarım varsayımlarını, önceki kullanıcı araştırmalarını, mevcut kod mimarisi kararlarını, dil seçimini ve projeyi tanımlayan daha fazla seçeneği doğru bir şekilde incelemek için çok kısa. Yalnızca her iki dünyadan da deneyimi olan bir kişi aradaki farkı hızlı ve etkili bir şekilde kapatabilir.”
Ve Bizden Bir Numara Daha: Doğru Prototipleme Aracını Kullanın
Bazı mobil ve web uygulaması UI tasarım püf noktaları öğretilebilir ve bazıları yalnızca deneyim yoluyla zor yoldan öğrenilebilir. Neyse ki, günümüzün tasarımcıları ve geliştiricileri, dedikleri gibi, uzmanlıklarını devlerin omuzlarında inşa edebilirler.
[ Proto .io, gerçek uygulamalar gibi görünen ve hissettiren tamamen etkileşimli gerçekçi prototipler oluşturmak için girişimciler ve yeni başlayanlar tarafından kullanılan bir mobil uygulama prototipleme aracıdır.]