Kullanıcı Deneyimi Tasarımı İçin Kapsamlı Bir Kılavuz

( Bu sponsorlu bir makaledir .) İlk kullanıcı araştırmasını üstlendikten ve araştırma bulgularınızı analiz ettikten sonra, tasarım sürecinin bir sonraki aşaması, varsayımlarınızı test etmek için bir dizi tasarım geliştirerek öğrendiklerinizi uygulamaktır. Adobe XD serimin dördüncü makalesinde tasarım sürecinin ilk aşamasına odaklanacağım.

Bu on makalelik genel seride, tasarım sürecini birbirine bağlayan üç makaleden ilki budur. Bu makale, kuş bakışı açısından UX tasarımını daha üst düzeyde ele almaktadır. Bir sonraki makalem UI tasarımını, arayüz envanterlerini keşfetmeyi, desen kitaplıkları oluşturmayı ve etkileşimler ve animasyonlar tasarlamayı keşfedecek. Bu dizinin bir dizi içindeki üçüncü makalesi, tel çerçeveleme ve prototip oluşturmayı keşfedecek.

UX araştırması ile ilgili önceki makalemde araştırdığım gibi, üstlenilen kullanıcı araştırmasını temel aldığımızı vurgulamak önemlidir. Araştırma bulgularımızı analiz ettikten sonra, tasarım sürecinin bu aşamasında hedefimiz:

• kullanıcı hikayelerini, senaryoları ve storyboard'ları benimseyerek farklı kullanıcıların ihtiyaçlarını karşılayan bazı net kullanıcı yolları oluşturun;

• İnsan Bilgisayar Etkileşimi (HCI) dünyasından bazı dersleri uygulayarak ilk ilkeleri akılda tutarak tasarlayalım; ve

• tasarımlarımız için hem masaüstü hem de mobil bağlamda uygulanabilecek, cihazdan bağımsız bir 'görünüm ve his' oluşturun.

Kısacası bu makale, araştırma aşaması ile tasarım aşaması arasında bir köprü görevi görmeyi amaçlamaktadır. Son makalemde vurguladığım gibi, tasarım süreci – araştırma, tasarım, prototip, inşa, test – yinelemeli bir süreçtir; sürecin bu aşamasında, prototip yapabileceğimiz, inşa edebileceğimiz ve test edebileceğimiz bir dizi tasarım geliştirmeye odaklanıyoruz.

UX Tasarımı geniş bir konudur, bu nedenle bu makaleyi kısa bir başlangıç ​​olarak kabul edin, ancak - önceki makalelerimde olduğu gibi - iyi bir şekilde kapsandığınızdan emin olmak için önerilen bazı okumaları sağlayacağım.

Bir İskeleti Yerine Getirmek

Kullanıcı arabirimi (UI) tasarımının ayrıntılarına inmeden ve etkileşimli prototipler oluşturmadan önce, tasarımın üst düzey akışını yerine getirmek ve tasarımımızı etrafında oluşturabileceğimiz bir iskelet oluşturmak önemlidir.

Sürecin bu noktasında, farklı kullanıcıların hedeflerini belirleyerek kullanıcı hikayelerinin gelişimini bilgilendirmek için araştırma bulgularımızı kullanmak önemlidir . Bu kullanıcı hikayelerini farklı senaryolar oluşturmak için kullanabiliriz. Bu, tasarım sürecine rehberlik eden net hedefleri ve temel bir amacı belirlememize yardımcı olur. Ayrıca, inşa ettiğimiz şeyler aracılığıyla akışlar geliştirmemizi sağlar.

Kağıt prototipler ve resimli taslaklar kullanarak ilk akışları geliştirirken, ayrıntılara inmeden önce tasarımın bütünlüğü içinde bir fikir edinmeye odaklanıyoruz. Bir iskeleti yerine oturtmak ve çizgiyi takip edecek olan ayrıntılarda kaybolmamak önemlidir.

Bir önceki yazımda, bir projenin tasarım aşamasına geçmeden önce kullanıcı araştırması yapmanın önemine odaklanmıştım. Ben koyduğum gibi:

Kullanıcılarınızla biraz zaman geçirin, onların ihtiyaçlarını ve neyi başarmaya çalıştıklarını öğrenin, bunlar onların 'yapılması gereken işleri'dir.

Kullanıcılarımızın 'yapılması gereken işleri' anlatarak, tasarladığımız şeyin gerçekten kullanıcı merkezli olmasını sağlayabiliriz. Odaklanmış bir kullanıcı araştırması yaptıktan sonra, bulgularınızı alıp tasarım sürecinizi bilgilendirmek için kullanmanız önemlidir. Araştırmanız, tasarladığınız kullanıcıların ortak olması için ihtiyaç duyduğu bazı kalıpları oluşturmanıza yardımcı olmalıydı.

Bununla birlikte, tek bir boyut nadiren herkese uyar ve tasarladığınız her ne olursa olsun, farklı ihtiyaçlara sahip birden fazla kullanıcı türü olması muhtemeldir. Farklı kullanıcıların ihtiyaçlarını temsil eden 'kullanıcı hikayeleri' geliştirmek, çözmeye çalıştığınız hedefleri damıtarak sürecin geri kalanını şekillendirmenize yardımcı olabilir. Ancak kullanıcı hikayeleri tam olarak nedir?

Kullanıcı hikayeleri

Kullanıcı hikayeleri, farklı kullanıcıların 'yapılacak işleri' hakkında üst düzey bir görünüm oluşturmanın yararlı bir yoludur. Tipik kullanıcıların bakış açısıyla yazılanlar, farklı kullanıcılarınızın farklı ihtiyaçlarına göre tasarım yapabilmeniz için farklı kullanıcılarınızın sahip olduğu farklı hedefleri belirlemenize yardımcı olur.

'Kullanıcı Hikayesi' terimi, yazılım geliştirmedeki çevik hareketin başlatıcılarından biri olan ve 1998'de Chrysler için bir proje sırasında “kullanıcı hikayesi bir konuşma için verilen bir sözdür” ifadesini kullanan Alistair Cockburn tarafından ortaya atıldı.

Kullanıcı hikayeleri, vurguyu gereksinimler hakkında yazmaktan onlar hakkında konuşmaya kaydırır. İnce görünse de, yazmaktan konuşmaya geçişin tasarım süreci üzerinde önemli bir etkisi olabilir.

Çoğu zaman gereksinimler soyut bir şekilde sunulur, çünkü - dikkatli değilseniz - kontrol edilmesi gereken bir liste, kullanıcıların ihtiyaç duyduğu şeye çok az benzerlik gösterir ve bir 'komiteye göre tasarım' ihtiyacına daha fazla benzerlik gösterir. Kullanıcı hikayeleri, kullanıcıları konuşmanın merkezine yerleştirmeye yardımcı olur.

Sohbeti teşvik eden ve kolaylaştıran bu araç fikri, kullanıcı hikayelerinin gücünü yakalar. Kullanıcıların her zaman tasarım ve geliştirme sürecinin merkezinde kalmasını sağlayarak, senaryoların haritasını çıkarmaya başlamak için ideal bir araçtır .

Farklı kullanıcıların bakış açısından anlatılan hedeflerin ve özelliklerin kısa açıklamaları, kullanıcı hikayeleri, sorunu onların bakış açısından görebilmeniz için kullanıcılarınızın sahip olduğu temel hedefleri anlamanıza yardımcı olur. Bunlar aşağıdaki gibi bir model izler:

• Bir kişi olarak (belirli bir roldeki kişi),
• (bir eylem gerçekleştirmek veya bir şey bulmak) istiyorum
• Böylece (amacıma ulaşabilirim).

Yukarıdaki şablonu kullanarak kendimizi farklı kullanıcıların yerine koyabilir ve tasarımımızı şekillendirmek için farklı hikayeler geliştirebiliriz. Örneğin, öğretim görevlilerinin ve öğrencilerin öğrenme materyallerini paylaşabilecekleri web tabanlı bir öğrenme kaynağı oluşturduğumuzu hayal edin. Farklı ihtiyaçları olan çok sayıda farklı kullanıcımız olması muhtemeldir. Bir öğretim görevlisinin kullanıcı hikayesi şöyle olabilir:

Bir öğretim görevlisi olarak, öğrencilerime sınıf dışındaki kaynaklara erişim sağlayabilmek için ders slaytlarımı paylaşmak istiyorum.

Bu kullanıcının özel ihtiyaçları etrafında kısa bir hikaye geliştirerek, bu tür kullanıcıları tatmin edecek tasarım kalıpları tasarlamaya başlayabiliriz. Bir öğrencinin – farklı ihtiyaçları olan farklı bir kullanıcının – bakış açısından bakıldığında, aşağıdaki kullanıcı hikayesini geliştirebiliriz:

Bir öğrenci olarak, revize ederken onlara başvurabilmek için ders slaytlarına erişmek istiyorum.

Farklı bakış açılarından aktarılan bu hikayeler, tasarımımızı üst düzeyde haritalamaya başlamak için tasarım sürecinin başlangıcında kullanabileceğimiz faydalı provokasyonlar sağlar. Daha da önemlisi, hikayeler kullanıcılarımızın ihtiyaçlarını karşılamaya odaklanmıştır. Kısacası, kullanıcı hikayeleri, kullanıcıların yüksek düzeydeki hedeflerine dair bir fikir edinmemize yardımcı olur . Daha sonra bu hikayeleri, tasarlamaya başlayabileceğimiz farklı senaryolar geliştirmek için kullanabiliriz.

Tasarımınızı Bilgilendirmek İçin Senaryoları Kullanma

Bir projenin başlangıcında, bolca özellik ekleyerek ve 'özellik' içinde kaybolmak çok kolaydır. Bu yaklaşımın tehlikesi, kullanıcılarınızın temel hedeflerinden uzaklaşan özellikler ve işlevler eklemeye başlamanın kolay olmasıdır.

Tipik senaryolar geliştirmek için kullanıcı hikayelerini kullanarak, kullanıcılarınızın temel hedeflerine odaklanmaya devam edersiniz. Bu yaklaşım aynı zamanda , projenin başlangıcında net çıktılar ve kapsam belirlemek için kullanılabilecek tipik kullanıcı ihtiyaçları için beklentiler oluşturmanıza ve kıyaslamalar geliştirmenize olanak tanır.

Önceki örneğe dönersek, farklı kullanıcılarımızın bakış açısından bazı üst düzey hedefler belirleyebiliriz: öğretim görevlisi için bir yükleme özelliği tasarlamamız gerekecek; öğrenci için bir erişim özelliği tasarlamamız gerekecek. Bunlar üst düzey hedeflerdir, ancak senaryolarımızı geliştirirken, tasarımı daha fazla bilgilendiren kullanıcı hikayelerimize biraz ayrıntı ve karmaşıklık eklemeye başlayabiliriz.

Örneğin, öğrencilerin bakış açısından önceki örneğe dönersek, aşağıdaki senaryoları düşünebiliriz:

• Temel düzeyde, öğrenciler slaytlara erişmek ister.

• Biraz daha gelişmiş bir düzeyde, öğrenciler notlarını yakalayarak slaytlara açıklama ekleyebilmek isteyebilirler.

• Son olarak, eğer kaynaklar izin veriyorsa, öğrenciler notlarını akranlarıyla paylaşarak işbirlikçi öğrenmeyi mümkün kılmak isteyebilirler.

Yukarıda incelenen örnek gibi senaryolar, farklı karmaşıklık düzeylerinin net bir resmini elde etmemizi ve bunlara göre tasarım yapmamızı sağlar. Ayrıca, tasarımımız aracılığıyla kullanıcıların akışına ilişkin bir fikir edinmemizi sağlayarak, projeye kuş bakışı bir görünüm kazandırmaya başlayabilmemiz için bunları kağıt üzerinde haritalandırmamıza olanak tanır.

Tasarım Akışınızı Eşleştirme

Kullanıcı hikayelerinizi ve senaryolarınızı tartışma için bir itici güç olarak kullanarak, tasarımınız boyunca yüksek düzeyde yolları haritalamaya başlamak mümkündür. Daha önce gösterilen bu kullanıcı hikayesi eşleme süreci, farklı kullanıcı akışlarını tanımlamamıza yardımcı olur.

Sürecin bu noktasında kağıt, daha rafine hikaye tahtaları geliştirmeye geçmeden önce hızlı prototipleme için güçlü bir araçtır . Düşük maliyetli, aslına uygun ve hızlı bir yaklaşım olan kağıt prototiplemenin birçok faydası vardır:

• Düşük maliyetlidir, çok az giriş engeli ile birden fazla fikri keşfetmenize olanak tanır;

• Sizi büyük resme odaklanmaya ve ayrıntılarda kaybolmamaya teşvik eden düşük kalitelidir;

• Hızlıdır, bir akışın birden çok varyasyonunu hızla yinelemenizi sağlar.

Kağıt aynı zamanda işbirliğini mümkün kılar ve birden fazla katılımcının bir masa etrafında dolaşmasına ve herkesin görüş ve kavrayışlarını dikkate alarak hızlı bir şekilde bir tasarım geliştirmesine olanak tanır.

Son olarak, kağıt 'kendini kurtarır'. Ekranlarda tasarım yaptığımızda, yazılım kaydetme 'durumlarını', tasarım sürecindeki farklı noktaların doğası nedeniyle genellikle tasarım eserlerini kaybederiz. Kağıt prototipleme, bitmiş konseptimize giden yolda reddedilen fikirler de dahil olmak üzere tasarım sürecinin tamamını görmemizi sağlar.

Tecrübelerime göre, tipik bir proje, siz yinelemeli olarak düşünceniz boyunca ilerlerken, genellikle birden fazla kağıt prototip turu gerektirecektir. Sürecin bu noktasında ekranda çalışma çok yavaş ve çok rafine, bu da hızla gereksiz ayrıntılarda kaybolmaya neden olabilir. Kağıt, sizi bu aşamada önemli olan büyük resme odaklanmak için özgür kılar .

Elbette deneyimli tasarımcılar bile arayüzleri çizme fikriyle karşılaştıklarında süreci ürkütücü bularak geri tepebilir. “Ama çizemiyorum!” sözlerini duymak alışılmadık bir şey değil. Bu kesinlikle doğru değil, hepimiz çocukken gayet iyi çizebiliyorduk (ebeveynlerimizin buzdolaplarındaki tüm o resimlerin kanıtladığı gibi!) sadece bu değerli beceriyi yeniden öğrenmemiz gerekiyor.

Jason Santa Maria'yı yeniden ifade etmek için:

Eskiz yapmak iyi bir sanatçı olmakla ilgili değil, iyi bir düşünür olmakla ilgilidir.

Yüksek seviyeli eskizler oluşturulduğunda, bazı storyboard'lar ve tel çerçeveler oluşturarak biraz aslına uygunluk eklemeye başlamanın zamanı geldi. Bunu aklında tut. Ancak buna Wireframing ve Prototipleme ile ilgili altıncı makalemde döneceğim.

Bir Bilim Noktası: UX Yasaları

UX nispeten yeni bir disiplin olabilir, ancak İnsan Bilgisayar Etkileşimi (HCI) alanında onlarca yıllık araştırmalarla bilgilendirilir.

Bu serinin Kullanıcı Deneyimi Tasarımının Evrimi başlıklı ilk makalesinde belirttiğim gibi, her şeyden önce insanlar için tasarım yapıyoruz ve insanlar tasarım kararlarımızı verirken hesaba katmamız gereken benzer özellikleri genel olarak paylaşıyorlar. HCI, kullanıcı deneyimi tasarımı alanında uygulayabileceğimiz sayısız ilke sunuyor.

Bu ilkelerin çoğu, örneğin aşağıdakilerden yararlanabileceğimiz 'yasalar' biçiminde damıtılmıştır:

• Bilişsel yükü hafifletmek ve karar vermeyi yönlendirmeye yardımcı olmak için seçenekleri en aza indirme ihtiyacını vurgulayan Hick Yasası;

• Arayüz öğelerinin dikkatli bir şekilde boyutlandırılması ve konumlandırılması yoluyla etkileşimleri nasıl kolaylaştırabileceğimiz konusunda değerli tavsiyeler sağlayan Fitt Yasası; ve

• Karmaşık görevleri kolaylaştırmak için 'parçalamanın' faydalarını vurgulayan Miller Yasası.

Bunlar hem makro hem de mikro düzeyde uygulanabilen ve bir tasarımcı olarak geliştirmek için derinlemesine keşfedilmeye değer ilkelerdir. Üçünü keşfedeceğim - Hick Yasası, Fitt Yasası ve Miller Yasası - ama daha birçokları var.

Jon Yablonski'nin mükemmel sitesi, Laws of UX, faydalı bir ilkeler koleksiyonudur ve yer imi koymaya değerdir. Sadece kendi başına hoş bir tasarım parçası olmakla kalmaz, aynı zamanda daha fazla okuma bağlantılarıyla birlikte her bir ilkeye iyi bir genel bakış sağlar.

Hick Yasası

Hick Yasası (veya tam olarak Hick-Hyman Yasası) şöyle der:

Seçimlerin sayısı ve karmaşıklığı arttıkça karar verme süresi de artar.

Adını bir çift psikolog olan William Edmund Hick ve Ray Hyman'dan alan yasa , bir kullanıcıya sunduğunuz seçeneklerin sayısını azaltmanın önemini vurguluyor.

Sonsuz bir dizi seçenek sunarak kullanıcınıza yardımcı olduğunuzu düşünebilirsiniz, ancak gerçekte bilişsel yüklerine katkıda bulunuyorsunuz. Bir kullanıcı ne kadar çok seçenekle karşı karşıya kalırsa, ' karar felci ' nedeniyle sakatlanarak çekip gitme olasılıkları o kadar artar. Bu, özellikle kullanıcıların uzaklaşmasının kârlılık üzerinde doğrudan bir etkiye yol açtığı bir e-ticaret bağlamında sorunlu olabilir.

Hick Yasasını UX tasarımına çeşitli şekillerde uygulayabiliriz:

• Sonsuz bir seçenek listesi sağlamak yerine navigasyon oluştururken yalnızca birkaçına odaklanın . Kullanıcılarınız size teşekkür edecek.

• Bir e-ticaret bağlamında, her bir ürünü listelemek yerine, seçenek sayısını azaltın ve odaklanın. Bunu yaparsanız, daha yüksek dönüşüm oranına yol açan karar felcini dengelersiniz .

• Temel içeriği ikincil içerikten ayırt edin. Kullanıcıların daha az seçenek arasından bir yol bulmasını sağlayarak bilişsel yüklerini azaltacaksınız .

Genellikle 'daha fazla'yı 'daha iyi' ile eşitlemekten suçluyuz, ancak Hick Yasası bize aksini düşünmemizi söylüyor. Seçenek sayısı ne kadar fazla olursa, kullanıcılarımızın bir karara varmaları o kadar uzun sürer (ve bazen onları karar vermemeye yönlendirir). Önemli olan odaklanmak, en azından seçimle giderek artan bir şekilde bunalmış bir dünyada.

Fitt Yasası

Fitt Yasası şöyle der: Bir hedefi elde etmek için geçen süre, hedefe olan mesafenin ve boyutunun bir fonksiyonudur. Bunun tercümesi şu anlama gelir: Hedef ne kadar uzaktaysa - örneğin ekrandaki bir düğme - kullanıcının ona kolayca ulaşabilmesi için o kadar büyük olması gerekir.

Fitt Yasası, düğmelerin ve diğer tıklanabilir ekran öğelerinin tasarlanması söz konusu olduğunda özellikle önemlidir. Farklı bağlamlar farklı yaklaşımlar gerektirir ve tasarım yaklaşımınızı bilgilendirecektir.

Bir masaüstü bağlamında, bir kullanıcı bir fare kullanacak ve - büyük bir ekranda - potansiyel olarak büyük mesafeler kat edecek. Bu bağlamda, harekete geçirici mesaj butonlarınızın (CTA) makul boyutta, görülmesi ve tıklanması kolay olduğundan emin olmanız önemlidir.

Mobil bağlamda, arayüzler tasarlarken hafifçe vurma hedeflerini dikkate almak çok önemlidir. Dokunmatik ekranlar için tasarım yaparken, parmaklarımız fare işaretçilerinden daha düşük doğruluktadır, bu nedenle dokunma hedef boyutlarımızı artırmamız gerekir . (Tabii ki, masaüstü ortamlarındaki daha büyük hafifçe vurma hedefleri de yardımcı olabilir!)

Fitt Yasasını UX tasarımına çeşitli şekillerde uygulayabiliriz:

• Mobil cihazlar için tasarım yaparken hafifçe vurma hedeflerinizi göz önünde bulundurun. Daha az ekran alanı ile tıklanabilir öğelerin sayısını azaltın ve boyutlarını artırın .

• Kulağa bariz gelebilir, ancak ekranda büyük bir düğme varsa, bunun birincil harekete geçirici mesaj olduğundan emin olun, aksi takdirde kullanıcıların yanlışlıkla tıklama riskini alırsınız.

• Açılır menüler veya diğer iç içe gezinme biçimleri tasarlarken , hedef boyutlarınızın kullanıcıların alması için yeterince büyük olduğundan emin olun .

Genel olarak konuşursak, bir şey ne kadar uzaktaysa, kullanıcının ona vurması için o kadar büyük olması gerekir. Tasarımınızı üst düzeyde planlarken, önemli eylem çağrılarını dikkate alın ve bunları tasarlarken Fitt Yasasını dikkate aldığınızdan emin olun. Küçük düğmeler düzgün ve düzenli görünebilir, ancak kullanıcınızı hayal kırıklığına uğratıyorlarsa, tasarımınızın çalışması gerekir.

Miller Yasası

Miller Yasası şöyle der: Ortalama bir insan, çalışma belleğinde yalnızca yedi (artı veya eksi iki) öğe tutabilir. Kısacası: kısa bir süre içinde kafamızda tutabileceğimiz çok şey var.

Miller yasası, bilgileri nasıl organize ettiğimizi ve grupladığımızı düşündüğümüzde özellikle önemlidir ve yığınlamanın yararlı olabileceği yerdir. Aşağıdaki iki telefon numarasının (her ikisi de aynı, hayali numara) biçimlendirmesini düşünün:

• 07700984964

• 07700 984 964

Boşluksuz bir basamak dizisi olarak, bir kullanıcının çalışan bellekte tutması için on bir basamaklı bir sayı zordur. Bununla birlikte, biraz boşluk ekleyin ve kullanıcılarınızın görevi önemli ölçüde kolaylaşır. Bilgileri parçalayarak, kullanıcınız üç sayı grubunu çalışma belleğinde tutabilir ve görevlerini tamamlamalarına olanak tanır.

Miller Yasası, bunun gibi mikro etkileşimleri kolaylaştırmaktan daha ileri gider; daha makro ölçekte de kullanılabilir. Örneğin, formları tasarlarken, bilgileri mantıksal olarak organize edilmiş gruplara ayırmaya odaklanın : ad, adres ve iletişim bilgileri; kullanıcı adları ve şifreler gibi hesap ayrıntıları; banka detayları; ve diğer gruplamalar.

Miller Yasasını UX tasarımına çeşitli şekillerde uygulayabiliriz:

• Telefon numaralarını listelerken , bilgileri işleyen bellekte kolayca tutulabilmesi için parçalayın .

• Kredi kartı bilgilerini içeren ödeme formları tasarlarken, bir kredi kartı numarası dörde bölünmüşse kullanıcılar tarafından ayrıştırılması daha kolay olacaktır.

• Sunulan seçeneklerin sayısını sınırlayarak bilişsel yükü azaltın .

Tasarımcılar olarak, genellikle karmaşık bilgiler sunmak zorundayız. Miller Yasasını bu bağlamda akılda tutmakta fayda var. Mümkün olduğunda, kullanıcıların çalışma belleğinde daha kolay tutulmasını sağlamak için parçalanabilen ve parçalanabilen bilgi gruplarını arayın.

Bak ve Hisset: Görsel Tasarım İletişimi

Projenizin akışının kuş bakışı görünümü ile, görsel tasarımının yanı sıra görünümü ve hissi hakkında düşünmeye başlamak önemlidir. Bu benim 'görsel dilbilgisi' dediğim şeydir ve tasarımınızda benimseyeceğiniz görsel yaklaşımdır.

Saatler, telefonlar (küçükten büyüğe), tabletler, masaüstü bilgisayarlar ve diğer ortamlar için tasarlanacak cihazların giderek artan çoğalmasıyla, tek bir piksel mükemmel görsel geliştirme fikri eski haline geldi.

Bu değişen manzaraya yanıt olarak, bir tasarımın 'tadını' yakalama lehine piksel mükemmelliğinden uzaklaşan tasarım yapaylıklarına doğru bir hareket gördük. Bu eserler, örneğin şunları içerir:

• Mood Panoları
• Stil Fayansları
• Öğe Kolajları

Herkesin süreci farklıdır, ancak sürecin bu aşamasında, yön belirlemeye yardımcı olması için ruh hali panoları ve öğe kolajlarının bir kombinasyonunu kullanıyorum: ruh hali panoları doğru basketbol sahasına girmenize yardımcı olur , öğe kolajları görsel tasarımınız arasında bir köprü görevi görür ve kullanıcı arayüzü tasarımınız.

Moodboarding

Moodboarding, adından da anlaşılacağı gibi, genel hedefinize uyan belirli bir görünüm ve duyguya odaklanmanıza yardımcı olarak ruh halini belirler. Ruh hali panoları, etrafında oluşturabileceğiniz bir odak noktası işlevi gören konuşma başlatıcıları olarak yararlıdır. Genel bir kural olarak, genellikle her biri farklı yönlere işaret eden üç ila beş farklı ruh hali panosunu bir araya getiririm.

Aklınızda belirli bir görünüm ve his olabilir, ancak - hepimizin çok iyi bildiği gibi, eminim - tercih ettiğiniz seçenek müşterinizin bakış açısına uymayabilir. Alternatiflere sahip olmanın ve genellikle farklı ruh hali panolarından farklı unsurları bir araya getiren nihai sonucu bulmanın yardımcı olduğunu düşünüyorum.

Sonuç olarak: Bu aşamada, çok farklı ekran boyutlarının olduğu bir çağda beyhude olan piksel mükemmel tasarımlar yaratarak kaybolmadan , üst düzey bir görsel tasarım sunuyorsunuz. Tel çerçeveleme ve prototipleme aşamasında detaylı maketler yapılacaktır.

Sürecin bu noktası, konuşmaları ateşlemek için kullanılabilecek tasarım yapay öğelerini geliştirmekle ilgilidir. Bu yaratıcı tartışmayı yönlendirmek için, her biri farklı bir görünüme ve hisse sahip çeşitli farklı ruh hali panolarına sahip olmak yardımcı olur .

Ruh hali panolarını bir araya getirirken , dijital yaklaşımların yanı sıra analog yaklaşımları da dikkate almak önemlidir. Görsel ilhamınız %100 dijitalse, bir tasarımın tam olarak diğerine benzediği yerde benim her şeyin aynı görünmesi riskiyle karşı karşıya kalırsınız. İlham almak için ekranın ötesine bakmayı düşünün, ilham almak için eski istenmeyen dergileri kullanın, bunu yapın ve tasarımlarınız öne çıkacaktır.

Öğe Kolajları

Mood panolarınızdan toplanan geri bildirimlerle, bazı tasarım bileşenlerini geliştirmeye başlamanın, görsel yönünüzü bazı tipik kullanıcı arabirimi öğelerine uygulayarak bir 'görsel dilbilgisi' üzerinde karar kılmanın zamanı geldi.

Stil Döşemeleri ve Öğe Kolajları dahil olmak üzere bunu yapmak için kullanabileceğiniz bir dizi araç vardır. Her ikisinin de güçlü yönleri vardır, öncelikle bitmiş bir görünüm ve hisse doğru kenar için katalizör görevi görürler.

Style Tiles metodolojisini geliştiren Samantha Warren'ın dediği gibi:

Stil Fayansları, müşterinin tercihleri ​​ve hedefleri etrafındaki tartışmalar için bir katalizördür.

Bu vurgu - görünüm ve his hakkında bir tartışmaya - bu iki yöntemin gücüdür. Bu aşamada, birden fazla boyutta piksel mükemmelliğinde işlemeler oluşturma ihtiyacını ortadan kaldırarak önemli miktarda zaman tasarrufu sağlarlar.

Tecrübelerime göre, Stil Fayansları yanlışlıkla görsel örnekler olduğunu düşünen müşteriler tarafından yanlış okunabilir. Daha serbest biçimli, daha az şablon tabanlı bir yaklaşımı tercih ediyorum ve Dan Mall'ın Element Collage yaklaşımını keşfettiğimde bağımlısı oldum.

Mall, Reading Is Fundamental için bir projeyle ilgili tasarım sürecini detaylandıran mükemmel bir gönderide, müşteriyi sürece dahil ederek sunumları konuşmalarla değiştirme ihtiyacının altını çiziyor. Element Kolajları, bu konuşma yaklaşımını kullanmanın mükemmel bir yoludur. Mall'ın dediği gibi:

Müşterilerimle tasarım hakkında konuşurken, aynı şeyden bahsettiğimizden emin olmak için elimden geldiğince görsel malzemeye sahip olmayı seviyorum. Style Tiles versiyonum, 'Element Collage' adını verdiğim farklı bir uygulama türü için kolaj sevgimi bütünleştiriyor. Bu özel ifade, baktığımız şeyin nihai bir tasarım değil, belirli bir mantık veya düzen olmaksızın farklı parçaların bir araya getirilmesi olduğuna dair bir beklenti yaratıyor.

Element Kolajlarının güzelliği, ruh hali panolarınız ve (yakında geliştirilecek) UI bileşenleriniz arasında bir köprü görevi görmeleridir. Müşterilere ne inşa edeceğimiz konusunda bir fikir vermelerini sağlayacak kadar esnekler. Her şeyden önce, daha fazla zaman alan prototipler geliştirmeye başlamadan önce görsel dilbilginiz konusunda fikir birliğine varmanıza yardımcı olacak kullanışlı bir araçtır.

Kapanışta

Kullanıcı arabirimi (UI) tasarımının ayrıntılarına inmeden ve etkileşimli prototipler oluşturmadan önce, tasarımın üst düzey akışını yerine getirmek ve tasarımımızı etrafında oluşturabileceğimiz bir iskelet oluşturmak önemlidir.

Projelerinizin tasarım aşamasını başlatmak için üst düzey bir süreç oluşturarak, net bir çerçeve oluşturmak için daha verimli çalışabilirsiniz. Sürecin bu aşamasında, ayrıntılarda kaybolmamak, bunun yerine geniş fırça darbelerini yerine getirmeye odaklanmak önemlidir.

Kullanıcı arayüzü tasarlamaya ve tel çerçeveler ve prototipler geliştirmeye daha derine dalmadan hemen önce geniş fırça darbelerini elde etmek önemlidir. Ayrıntılara girmeden önce net bir tasarım yönü ve bazı net kullanıcı hedefleri oluşturmaya odaklanın . Açık tasarım hedefleri belirlenmeden ayrıntılara odaklanma dürtüsüne direnmek, boşa harcanan işten tasarruf sağlar.

Kısacası, her şeyi planlayana kadar ayrıntılarda kaybolmayın.

Önerilen Okuma

Maceranızda size yardımcı olacak çevrimdışı ve çevrimiçi birçok harika yayın var. Yolculuğunuza başlamak için aşağıya birkaç tane ekledim.

• Joe Natoli, “Daha Akıllı Kullanıcı Hikayeleri Nasıl Yazılır?”
  Kullanıcı hikayelerine zaten aşina iseniz, Natoli'nin kullanıcı hikayelerine yönelik önerilen geliştirmelerini okumanızı tavsiye ederim - ölçülebilir faydalara odaklanarak - ilginç bir yaklaşım.

• “Kullanıcı Hikayeleri”, Dağ Keçisi Yazılımı
  Bu kılavuz, kullanıcı hikayelerini bir dizi daha küçük, bağlantılı hikayeye bölme ve dikkate alınması gereken 'memnuniyet koşulları' ekleme konusunda faydalı tavsiyeler sağlar.

• “UX Kanunları,” Jon Yablonski
  Yer imlerine eklemeye değer, faydalı ilkeler koleksiyonuna sahip mükemmel bir site. Sadece başlı başına hoş bir tasarım parçası olmakla kalmaz, aynı zamanda daha fazla okuma bağlantılarıyla birlikte her bir ilkeye iyi bir genel bakış sağlar.

• “Psikoloji ve UX,” Nielsen Norman Group
  Kullanıcı deneyimi alanında uygulanabilecek farklı yasalarda sağlam bir temele sahip olarak, psikolojiyi de keşfetmenizi tavsiye ederim.

• “Element Kolajları,” Dan Mall
  Bu araçların tipik müşteri projelerinin hizmetinde nasıl kullanılabileceğini anlamak istiyorsanız bu kitabı okumaya değer.

Bu makale, Adobe tarafından desteklenen UX tasarım serisinin bir parçasıdır. Adobe XD, fikirden prototipe daha hızlı geçmenizi sağladığı için hızlı ve akıcı bir UX tasarım süreci için yapılmıştır. Tasarım, prototip ve paylaşım - hepsi tek bir uygulamada. Behance'de Adobe XD ile oluşturulan daha ilham verici projelere göz atabilir ve ayrıca UX/UI tasarımına yönelik en son trendler ve içgörüler hakkında güncel kalmak ve bilgi sahibi olmak için Adobe deneyim tasarımı bültenine kaydolabilirsiniz.