UX Çizimi Hakkında Bilmeniz Gereken Her Şey

Herhangi bir tür ciddi yaratıcı çalışma yaptıysanız, hepiniz yaratıcı bloklara aşinasınızdır. Tuğla duvara çarpmış gibi hissettiriyor: Gözünüzde canlandırabildiğiniz fikirlerin hiçbiri yeterince iyi değil ya da gerçek hayatta işe yaramıyor.

Tasarımcılar için bu duygu çok tanıdık. Ancak, net bir çözümü olmayan herhangi bir karmaşık sorun gibi, akıllı bir süreç de tüm farkları yaratabilir. UX eskizinin devreye girdiği yer burasıdır.

UX çizimi, kullanıcı deneyimi tasarımının çok önemli, ancak çoğu zaman gözden kaçan bir yönüdür. Eskiz yapmak, tasarımcıların çok sayıda fikri denemelerine ve bir tanesine karar vermeden önce bunları tekrar etmelerine izin verirken, tasarımı iletmenin çok etkili bir yoludur.

Bu yazıda, aşağıdaki noktalar da dahil olmak üzere UX çizimi hakkında bilmeniz gereken her şeyi ele almayı planlıyorum:

• UX çizimlerine ve tel kafeslere giriş
• UX çizim temelleri, araçları ve teknikleri
• Notlar, açıklamalar ve sayılarla çizimleri netleştirme
• UX çizim ipuçları ve püf noktaları
• Kaliteyi ve üretkenliği artırmak için tasarlanmış mini yöntemler
• Wireflow'lar hakkında bilmeniz gereken her şey
• UX akış çizimi için hızlı bir kılavuz

UX Çizimi İki Adımlı Bir İşlemdir

Tasarımda birçok seçeneğin göz önünde bulundurulması gerekir, bu da en iyisinin seçilmesi ve uygulanmasıyla sonuçlanır. Tasarımcılar seçeneklerini değerlendirir ve ardından ayrıntılar üzerinde çalışmaya devam ederek UX tasarımını iki aşamalı bir süreç haline getirir:

• Fikir üretimi

İlk adımda, birden fazla fikir üretilir, ancak tam olarak şekillendirilemeyecekleri için bazı öğelerin eksik veya eksik olması nadir değildir. Ana şey, farklı yaklaşımları göz önünde bulundurmak ve göreviniz ve projenin çeşitli kısıtlamaları bağlamında hangisinin en verimli olduğuna karar vermektir.

• Detay ve İyileştirme Ekleme

Adım adım, birkaç umut verici varyant üzerinde anlaşıyorsunuz ve ayrıntıları bulmaya başlıyorsunuz, böylece bazı fikirleri uygunsuz hale getiriyorsunuz.

UX Çizimleri ve Tel Çerçeveler: Giriş ve Sınıflandırma

Tel kafesleriniz istenilen detay seviyesi, renkler ve stil, birine gösterip göstermeyeceğiniz gibi faktörlere bağlı olarak farklılık gösterebilir.

Aşağıdaki çizim türlerini seçtim:

• Eskiz: Fikir Üretimi

Bunlar ilk çizimler. Alt düzey ayrıntılar basitçe not edilir. Sınırlı sayıda renk kullanılmıştır.

Problemi farklı açılardan ele almak ve farklı çözümler düşünmek için birçok temel eskiz çizerim. Bu tür eskizleri çizerken aynı zamanda mümkün olduğunca çok çözüm çeşidi üretmeye çalışıyorum.

Bu özel adımda, eksiklik zihnimi özgür bırakır, bu yüzden bu aşamada ayrıntılara takılıp kalmamak çok önemlidir. Amacım mümkün olduğunca çok fikir üretmek ve en umut verici olanları seçmek.

• Tel kafes: Spesifikasyon, Ayrıntılı Aşama

Genellikle umut verici eskizler seçerim ve ayrıntıları gözden geçiririm, ardından en iyi varyantı seçer ve daha ayrıntılı olarak çalışırım.

Ancak bu, her ayrıntı anlamına gelmez . Bariz şeyler sadece not edilebilir. Ayrıca, bazı yönleri kağıt üzerinde açıklamak zor olacaktır.

Bu adımda tüm önemli detayları çiziyorum ama Balsamiq'te henüz tel kafes çizmiyorum. Kağıt üzerinde her şey bittikten sonra Sketch'te çizim yapmaya başlıyorum.

Dijital araçlar, kağıttan çok daha fazla yaratıcı özgürlük sağlar ve dikkatinizi kolayca küçük şeylere kaydırabilirsiniz. Örneğin, tasarım yerine “piksel parlatma”ya odaklanabilirsiniz.

• Görsel Tasarım Taslağı

Bu nadiren kullanılan bir yaklaşımdır, ancak bazen yardımcı olabilir. Projenin erken bir aşamasında çeşitli görsel çözümler düşünülür, ancak hepsi için dijital eskizler oluşturmak uzun zaman alabilir. Bu nedenle, farklı seçenekleri değerlendirmek ve görsel bir tasarım yönü seçmek için önce kağıda tasarım eskizleri çiziyorum.

• Bileşenler/Öğeler Dağılımı

Halihazırda genel bir fikrim olduğunda ve belirli bir sayfa işlevselliğini veya arayüz bileşenlerinin ayrılmaz parçalarını düşündüğümde bu tekniği faydalı buluyorum. Ayrıntıya girerek farklı sayfa öğeleri çizerim ve ardından sayfa öğelerinin farklı olası konumlarını çizerim.

Elementler, en basitleri bile bir duruma sahip olmalıdır; bir düğmeye basılabilir ve boş olabilecek veya olmayabilecek bir vurgulu metin bloğuna sahiptir. Ne kadar karmaşıksa, o kadar çok duruma sahiptir.

Temel Bilgilere Başlarken

• Aletlerinizi hazırlayın. Mümkün olan en uygun yeri bulun, bol miktarda alana sahip büyük bir masa. Bir sürü kağıt alın ve birkaç kalem ve keçeli kalem hazırlayın.
• Isınmak. Hazırlanmak için bazı çizgiler, daireler, temel şablonlar ve simgeler çizmenizi öneririm.
• Hedeflerinizi tanımlayın. Ne çizmek istediğinize karar verin. Hedefinizi belirleyin ve hangi hikayeyi anlatacağınıza karar verin. İstenen detaylandırma seviyesini belirleyin. Çok çizmeye hazır olup olmadığınıza karar verin.
• Hedef kitlenizi tanımlayın. Bunu kendiniz için yapıyorsanız, eskizinizin nasıl göründüğü konusunda endişelenmenize gerek yok. Ancak, çizimlerinizi bir müşteriye göstermeyi düşünüyorsanız, çiziminize daha fazla ayrıntı eklemek için fazladan zaman ayırdığınızdan emin olun.
• Bir zaman çerçevesi belirleyin. Eskiz için ayırmaya hazır olduğunuz süreye karar vermiş olmanız, diyelim ki 30 dakika, işinize odaklanmanıza yardımcı olacaktır.

Artık hazırsınız ve başlayabilirsiniz:

• Kenarları çizin. Çerçeveleri, bir tarayıcıyı veya telefon penceresini, arayüzün bir bölümünü vb. çizin.

• En büyük veya temel öğeleri ekleyin: menü, alt bilgi, ana içerik.

• Ayrıntılar ekleyin. İlgili ayrıntıları ekleyin, ancak bu aşamada bunları basit tutun.

• Ek açıklamalar ve notlar ekleyin. Bunlar yalnızca eskizleri paylaşmayı planlıyorsanız gereklidir. Ancak, sadece gözleriniz için yapıyor olsanız bile faydalı olabilirler.

• Alternatifleri çizin. Çözümünüze bazı hızlı alternatifler çizin.

• En iyi çözümü seçin. En iyi seçenekleri seçin.

• Gölge ve eğim ekleyin. Bu özellikle paylaşım amaçları için önemlidir. Çiziminizi görsel olarak çekici kılmak için bir gölge ekleyin; bu, onu ekip üyeleri ve/veya müşterilerle paylaşmayı planlıyorsanız önemlidir.

• Krokiyi kaydedin. Bir fotoğraf çekin veya bir klasöre koyun. Eskizler için masamda birkaç kağıt tepsisi var.

• Paylaş. Genellikle aşağıdaki paylaşım yöntemlerinden birini kullanırım:
  • Eskizleri Evernote aracılığıyla tarayın ve diğer ekip üyelerine veya paydaşlara kalıcı bir bağlantı sağlayın.
  • Bir fotoğraf çekin ve InVision'a yükleyin.
  • Görüntüleri Realtimeboard'a yükleyin ve eşleyin.
  • Veya sadece bir fotoğrafı e-postayla gönderin.
• Eskizleri gözden geçirin ve notlar ekleyin. Bir ara verin ve bir süre sonra eskizlerinize geri dönün. Onlara tekrar bir göz atın. Çizim hala sana mantıklı geliyor mu? İyi bir eskiz takip etmesi kolay olmalıdır.

Ek Elemanlarla Çizimleri Netleştirme

Uygun bir çizim bulun veya çizin ve ardından buna aşağıdaki ayrıntıları ekleyin:

1. Başlık. Bazen bir başlık eklemek iyi bir seçenektir. Çizimin üst kısmına gerekirse bir açıklama ve tarih yazın. Başlık, neye baktığınızı ve eskizin alakalı olup olmadığını anlamanıza yardımcı olacaktır. Bu, özellikle çok fazla eskiziniz varsa veya başkalarına gösterecekseniz kullanışlıdır.

2. Ek açıklamalar Açıklamalar, içeriğini veya diğer niteliklerini açıklamak için bir öğeye yakın yerleştirilen adlar ve notlardır. Diğer öğeleri netleştiren ve genellikle çizilmesi zor olan ayrıntılar eklerler. Örneğin, bloğun adı, bazı etkileşim ayrıntıları, bir resmin açıklaması, gelecekteki tasarım varyasyonları için bazı fikirler vb. Bir açıklama taslağının nasıl göründüğünü görmek için örneklerimden birine göz atabilirsiniz.

3. Sayılar. Çiziminizin öğelerini veya eskizlerin kendilerini numaralandırın. Bunları nasıl sıralayacağınıza karar verebilirsiniz (örneğin, etkileşim akışına, onları oluşturduğunuz sıraya göre, vb.). Meslektaşlarınız ve müşterileriniz geri bildirimlerinde taslak numarasını gösterebilecekleri ve yorumlarının hangisini kastettiğini anlayacağınız için, tartışmalar sırasında da (özellikle uzak tartışmalarda) yararlı olabilir.

4. Oklar. Ekran geçişlerini belirtmek için okları kullanabilirsiniz. Ayrıca eskizlerin farklı kısımlarını birleştirmek, bir dizi eylemi belirtmek vb. için de kullanılabilirler. Bir okun anlamı değişebileceğinden, okun hemen üzerine okun ne anlama geldiğine dair bir açıklama veya açıklama ekleyebilirsiniz. İşte bir geçişi ve birkaç farklı durumu gösteren temel bir çizim örneği.

5. Notlar. Ek açıklamalar gibi, notlar da kavramları açıklamak için kullanılır. Ancak, notlar yerleşimlerindeki ek açıklamalardan farklıdır. Bu örneğe benzer şekilde, bir elemana bağlı değildirler veya açıklanan elemanın yakınında bulunmazlar. Notlar sayfanın üstüne veya altına yerleştirilebilir. Hatta tasarıma dahil olmayan öğeleri, aklınıza gelebilecek soruları, genel açıklamaları, taslaksız fikirleri vb. tanımlayabilirler.

6. Mimik. Dokunmatik cihaz tasarımı durumunda hareketler önemlidir. Bir el hareketi çizmek pratik gerektirebilir. Farklı eylem türlerini belirtmek için kullanılan çeşitli hareket türleri vardır, bu nedenle belirli bir eylemi nasıl belirlediğinize (elbette açık değilse) önceden karar vermek ve onu çizmeye çalışmak daha iyidir.

7. Geri bildirim. Krokiyi başkalarına gösterdikten sonra veya kendiniz bir kez daha inceledikten sonra düzeltme veya iyileştirme önerileri alabilirsiniz. Geri bildirimi orijinal çizimden ayırt etmeye yardımcı olmak için bu tür geri bildirimleri farklı bir renkle işaretlemek genellikle yararlıdır.

Farklı eleman türleri için farklı renkler kullanabilirsiniz. Bazen çizimler için siyah, bağlantılar için mavi, notlar için koyu yeşil, başlıklar ve geri bildirim için kırmızı kullanıyorum. Eskizlerinizde farklı renkler kullanmaya çalışın, ancak renk seçiminizin tutarlı olduğundan emin olun!

Daha Özel İpuçları ve Püf Noktaları

1. Kalite konusunda endişelenmeyin. Dribbble'daki skeçlere bakma; onlar tamamen farklı bir şey hakkında. Eskizlerin asıl amacının daha net düşünmenize, daha iyi çözümler bulmanıza ve zamandan tasarruf etmenize yardımcı olmak olduğunu unutmayın.

2. Uygulama. Başlangıç ​​için birkaç uygulama çizmeyi deneyebilirsiniz. Bir web veya mobil uygulama açın ve notlardaki öğeleri açıklayarak ekranı kopyalamaya çalışın. Boş zamanınız olduğunda, tasarımlarınızın temel yapı taşlarını çizmeye çalışın. Genel olarak, pratik mükemmelleştirir. Bir süre sonra, tasarımcı benliğinizin bir parçası olacak.

3. Bir klasör satın alın. Genellikle ofisimden değil, bir kafeden veya evimden çalışırım. Kağıt eskizler zarar görmeye çok meyillidir, bu nedenle onları güvenli ve sağlam tutmak için basit bir klasör satın alın.

4. Aletleri gittiğiniz her yere yanınızda götürün. Bu, fikrinizi istediğiniz zaman kağıda aktarabilmenize yardımcı olur, aksi takdirde düşünceyi kaybedebilir veya yeterince ayrıntılı olarak hatırlayamayabilirsiniz. Her zaman yanımda bir not defterim, birkaç A4 kağıdım ve kalemim olur.

5. Başkalarıyla paylaşın. Diğer insanlarla etkileşim kurmak ve ekibinizle iletişim kurmak çok önemlidir. Başkalarını dahil etmek ve özellikle erken aşamada onlardan geri bildirim almak, uzun vadede zamandan ve kaynaktan tasarruf etmenize yardımcı olur. Başkalarını da tasarımı hayal ettikleri şekilde çizmeye teşvik edebilirsiniz.

6. Kağıt tepsileri. Çalışma masanıza kağıt tepsileri yerleştirmeyi düşünün. Örneğin bende üç tane var: gelen görevler için, eskizler için ve temiz kağıtlar için.

7. Deneyin ve özelleştirin. Önerilerim deneyimlerime dayanmaktadır. Zamanla, size en uygun olanı bulacaksınız; hangi yöntemler, hangi adımlar dizisi, yaratıcı potansiyelinizi tam olarak ne karşılar. Oraya ancak sürekli olarak yeni bir şey denerseniz ulaşırsınız, bu nedenle farklı biçimler, stiller denemek ve yeni şablonlar denemek önemlidir.

8. Şablonları kullanın. Şablonlar zamandan tasarruf sağlar ve biçim kısıtlamalarını dolaylı olarak hesaba katarak önemli olana odaklanmak için daha fazla zaman kazandırır.

Eskizlerinizi Geliştirmek için Ek Mini Yöntemler

Bunlar mutlaka ipuçları ve püf noktaları değildir, ancak üretkenliğinizi artırması veya eskizlerinizin kalitesini iyileştirmesi gereken bir dizi yöntem, araç ve öneridir.

1. Bir eskiz tahtası oluşturun. Dijital bir eskiz aracı yerine kalem ve kağıt kullanmanın en büyük faydalarından biri, onu gerçekten duvara yapıştırabilmenizdir. Ekibinizdeki herkes bunu görebilir ve katılabilir (her ne kadar inceleme oturumları ayarlamanızı tavsiye etsem de).
   
   • Eskizlerinizi kendiniz göreceksiniz ve bu, düşüncenizi harekete geçirecek ve izole parçaları değil, tüm sistemi büyük resmi görmenize izin verecektir. Parçalar arasındaki etkileşimleri ve birbirlerine nasıl uyduklarını göreceksiniz.
     
   • Eskiz tahtasını oluşturun - beyaz tahta eskizlerinizi ekleyin. Ofisinizde beyaz tahta yoksa, eskizlerinizi duvara yapıştırmak için çift boyutlu yapışkan bant veya post-it not kağıtları kullanabilirsiniz. Duvara yapışmak istemiyorsanız, bunun yerine büyük bir karton kağıt parçası bulabilirsiniz. En iyi tasarım araçlarından biri oldukları için eskiz tahtalarını kullanmanızı şiddetle tavsiye ederim.
2. Bir beyaz tahta kullanın. Beyaz tahta harika bir çizim aracıdır. Bir dizi avantajı vardır:
   • İşbirliğine dayalıdır ve diğer ekip üyelerini de tartışmaya ve çizime dahil etmek kolaydır. Fikirleri tam oturmasa bile, onların düşünme biçimlerini anlayacaksınız ve aynı sayfada olmanıza yardımcı olacaktır.
     
   • İşaretçiler ayrıntılara odaklanmanıza izin vermez, genel şeyler hakkında düşünmeniz gerekir. Eskizler yoruma açıktır.
     
   • Bir beyaz tahtanın temizlenmesi ve üzerinde düzeltmeler yapılması kolaydır.
     
   • Çok fazla alan var ve tüm sistem akışını kolayca düşünebilirsiniz.
     
   • Mıknatısları kullanarak çizimler, çıktılar ve referans malzemeleri ekleyebilirsiniz.

3. Prototipler. Tasarımınızı değerlendirmek için tıklanabilir bir prototip yapın. Bazı öğeler hakkında geri bildirim almaya çalışın. Bu, özellikle şablon kullanırken işe yarar - eskizleriniz aynı boyuttadır. Açıkçası, bir şablon kullanıyorsanız, aynı boyutta eskizler çizmek çok daha kolay olacaktır. İndirip kullanabileceğiniz birkaç şablon sağlayarak bunu daha da kolaylaştırmaya çalışacağım: Mobil, Tarayıcı çoklu pencere, Tarayıcı kaydırma, Kişiler.

   

4. Yazıcınızı ve tarayıcınızı kullanın. Çerçeveyi elle çizin (daha doğru çizmek için cetveli kullanabilirsiniz), ardından bir tarayıcı veya mobil uygulama kullanarak tarayın ve yazdırın. Şablonunuzu yazdırmadan önce görüntü düzenleyicide düzenleyebilirsiniz. Gereksiz ayrıntıları kaldırabilir veya bazı öğeleri çoğaltabilirsiniz. Ayrıca hazır bir site sayfası, fotoğraflar ve diğer açıklayıcı öğeleri yazdırabilirsiniz. Kesikleri çiziminize yapıştırabilirsiniz.

5. Tarama için Evernote'u kullanın. Evernote harika bir tasarım aracıdır. İçinde eskizlerinizi saklayabilir ve paylaşabilir, temalar oluşturabilir ve eskizlerinizi düzenlemek için etiketler kullanabilirsiniz. “Tarayıcı” modunun yetenekleri özellikle etkileyicidir. Önünüze eskizinizi koyarsınız ve o onu "taratır", böylece eskizin kopyasını alırsınız. Ardından iş arkadaşlarınızı Evernote'a davet edebilir ve onlara not bağlantınızı verebilirsiniz. Tabletler ve telefonlar için bir mobil uygulama olduğundan, eskizleriniz her zaman elinizin altında olabilir.

6. Hibrit eskiz. Eskizlerinize biraz hayat ve gerçekçilik katmak için onları fotoğraflarla birleştirebilirsiniz. Bu, bir fotoğraf çekmeniz ve ardından üzerinde arayüz öğeleri olan bir hikaye çizmeniz gerektiği anlamına gelir. Bu ayrıca bazı etkileşim sorunlarını ve ayrıntılarını fark etmenize yardımcı olabilir.

7. Gerçek dünyayı izlemek. Bir storyboard oluşturmanız gerekiyorsa, belirli bir bağlamda bir deneyim göstermeniz gerekiyorsa (örneğin, bir otobüs terminalinde akıllı telefon kullanan bir kişi), insanların, yerlerin ve çeşitli gerçek hayattaki nesnelerin tasvirlerini eklemeniz gerekir. Özellikle çizim becerilerinde uzmanlaşmadıysanız, bunları çizmek zor olabilir, ancak işte size basit bir ipucu: Nesnenin veya durumun bir fotoğrafını çekin ve ardından bir görüntü düzenleyici kullanarak ana nesnelerin çevresini elde edin. Ortaya çıkan konturu daha sonra eskizlerinizde kullanabilirsiniz. Tabii bir tabletiniz ve kaleminiz varsa daha da kolay olacaktır.

Wireflow: Sistem Akışı ve Dallanmanın Anahatlarını Belirleme

Kablo akışı, esas olarak, dallar ve karar noktaları ile ekrandan ekrana sistem akışının bir dizisidir. Bir kullanıcının görevini nasıl ele aldığını, ekrandan ekrana nasıl geçtiğini ve zaman içinde ürünle ilgili genel deneyimlerini dikkate almalıyız.

Wireflow veya çizdiğiniz şey ve bağlanma şekli aşağıdaki yaklaşımlara göre düzenlenebilir:

• Sekans. Bir dizi düz bir yolculuktur, ekrandan ekrana. Karar noktaları olan bir hikaye de olabilir; sadece yolculuğu değil, aynı zamanda kullanıcının seçebileceği karar noktalarını ve farklı yolları da gösterirsiniz. Ekran etkileşiminin yapısını gösterebilirsiniz.
• Devlet değişiklikleri. Bazı öğelerin farklı ekran durumlarını ve bu durumlar arasındaki geçişlere neden olan koşulları veya eylemleri tasvir edin.
• Ekran ve ekran öğeleri. Tüm ekranları çizebilir veya mikro etkileşimleri ve etkileşimleri düşünebilirsiniz.
• Platformlar. Bir platform deneyimini veya birden fazla platformu düşünebilirsiniz.
• Kapsam. Kullanıcı yolculuğunun bir kısmını mı yoksa tüm yolculuğunu mu tasvir edeceksiniz? Sistemle tek bir kullanıcı etkileşimi mi yoksa birden çok kullanıcının etkileşimi mi?

Organizasyona ve pratik kullanıma bağlı olarak genellikle aşağıdaki kablo akışı türlerini tanımlamaya çalışıyorum:

1. Genel akışı ve üst düzey akışı haritalama. Hemen ekran kaymalarını çizin ve ürün kullanımınızın genel yolculuğunu çizin. Buraya bazı bağlamlar ekleyebilir ve isteğe bağlı olarak bazı kullanıcı etkileşimlerini gösterebilirsiniz. Örneğin, bir e-Ticaret alışveriş hizmeti, birçok adımı içerebilen oldukça uzun bir yolculuktur: kullanıcının mağazayı nasıl bulduğu, ürünü sipariş etmek için geçtiği adımlar, nasıl ödeme yaptıkları vb.

2. Ekran akışı. Bu, sistemdeki belirli bir işlevsel akışa odaklanır. Küçük bir düz ekran dizisi veya dallanma ile bir yolculuk olabilir. Örneğin, bazı fotoğraflar veya video yükleyen bir kullanıcı.

3. Navigasyon şeması. Ekranınızı ve içerdiği seçenekleri çizin. Bunun yolculuğun haritasını çıkarmaması gerekiyor. Bu adım, bir kullanıcının seçebileceği seçenekleri, kullanıcıların sahip olduğu yönergeleri ve çeşitli uygulama bölümlerini gösteren bilgileri içerir. Genellikle bir projenin başında bir navigasyon şeması oluştururum. Navigasyonun nasıl yapılandırılması gerektiğini (hangi noktaların dahil edilmesi gerektiğini, kaç seviyenin gerekli olduğunu) anlamaya hizmet eder.

4. Ekran durumları. Ekranı veya öğe durumlarını çizin (bir dosya yükleme diyaloğu buna örnek olabilir). Bu durumda, örneğin, ekran aşağıdaki durumlara sahip olacaktır:

   • Boşluk
   • Bir kullanıcı dosyayı etkin alanda çeker
   • dosya yükleniyor
   • dosya yüklendi
   • Bir hata var

UX Akışı Çizimi: Hızlı Nasıl Yapılır Kılavuzu

Tel akışı tasarım süreci tel kafese benzer. Birçok adım benzer veya aynıdır, ancak bazı önemli farklılıklar vardır:

Ne çizmeniz gerektiğini tanımlayın. Tam olarak ne çizmek istediğinize karar verin (örneğin, genel tarihçesi veya tasarımınızın bir parçası). Farklı seçenekler oluşturmak mı yoksa bir yolculuğun ayrıntılarını düşünmek mi istiyorsunuz? Eskizlerinizi başka birine gösterip göstermeyeceğinize karar verin.

Çiziminize hangi ana kareleri ve geçişleri dahil etmeniz gerektiğini tanımlayın. Tüm ekranları ve kaydırmaları eklerseniz, kablo akışınız çok uzun ve karmaşık olacaktır. Görevinizi gerçekleştirmenize yardımcı olan etkileşimin özünü iletmek için hangi anahtar ekranları göstermeniz gerektiğini düşünün. Aynı şey ekran kaymaları için de geçerli. Fikrinizi ifade etmede hangi vardiyaların daha faydalı olacağını seçmeniz gerekiyor. Referans için bu örneğe göz atın.

Başlangıç ​​noktasını tanımlayın. Yolculuğunuzun başlangıç ​​noktası ne olacak? Giriş noktasıyla, yani yolculuğun başlangıcıyla, örneğin bir kullanıcının uygulamanıza giriş yaptığında gördüğü şeyle başlayabilirsiniz. Alternatif olarak, orta noktadan veya en ilginç/zor/önemli ekranlardan veya işlem adımlarından başlayabilirsiniz. Veya bir kullanıcı tarafından elde edilen sonuçla en sondan başlayabilir ve kullanıcının bu noktaya gelmek için attığı adımları açıklayabilirsiniz.

Bundan sonra ne olacağına karar verin. Başlangıç ​​adımlarını çizdikten sonra, aşağıdaki soruları yanıtlayarak sonraki adıma karar verin:

• Bu adım kullanıcıları hangi yöne yönlendiriyor?
• Hangi yoldan gitmelerini istiyorsun?
• Oraya ulaşmak için ne yapmaları gerekiyor?

Alternatif rotalar, girişler çizin. Kullanıcının her adıma ulaşabileceği alternatif yollar düşünün:

• Kullanıcının İnternet bağlantısı başarısız olursa ne olur?
• Başka hangi seçeneklere sahipler?
• Kullanıcı veya uygulama hatası durumunda ne ters gidebilir, ne olacak?
• Kullanıcı bu adımda uygulamayı kapatırsa ne olur?
• Kullanıcı uygulamayı bir sonraki başlatışında nereden başlayacak?

Alternatif akışları düşünün. Geçmişi analiz edin, alternatif bir akış tasarlayın ve çizin.

Ek açıklamalar, notlar, ayrıntılar ekleyin. Açık olmayan ayrıntıları netleştirecek açıklayıcı öğeleri ekleyin.

Kayıt etmek. Krokinin dijital bir kopyasını yapın.

Paylaş. Çizimi paylaşın (örneğin, Evernote veya InVision aracılığıyla).

Temel UX Akış Çizimi İpuçları ve Püf Noktaları

Önce bir kablo akışı taslağı oluşturun. Uzun bir yolculuğa çıkacaksanız, ne kadar alana ihtiyacınız olduğunu anlamak ve bazı önemli adımları veya detayları kaçırmamak için hızlı bir eskiz yapsanız iyi olur. Bunları daha sonra kağıt taslağına eklemek zor olurdu.

Çok fazla ayrıntı içeren büyük bir harita oluşturmayın. Kağıt eskizlerde geri alma düğmesi yoktur, bu nedenle değişiklik yapmak zor olacaktır. Ayrıntıları çok doğru çizebilirsiniz ve bu, hayal gücünüzü farklı üst düzey varyantların oluşturulmasından uzaklaştıracaktır. Tüm sistemi gösterecek büyük bir şema oluşturmak yerine, ana komut dosyalarına odaklanmaya çalışın ve her komut dosyası için ayrı bir sayfa ayırmaya çalışın.

Gereksiz detayları kesin ve çeşitli detaylandırma seviyelerini birleştirin. Tüm etkileşim açıklamalarını çizmek gerekli değildir, bu nedenle yolculuğunuzun yalnızca temel öğelerini kullanmaya çalışın. Büyük bir etkileşim haritası çizerken, her bir ekranı ayrıntılı olarak incelemenize gerek yok. Bazı ekranlar sadece birkaç kare ile gösterilebilir ve diğer anahtar ekranlar ayrıntılı olarak işlenebilir.

Farklı kağıt boyutları deneyin. A3 veya A5 gibi farklı kağıt formatlarını deneyin. Kağıt yaprak boyutu sizi sınırlayacak ve işleminizi farklı şekillerde etkileyecektir. Küçük bir kağıt sayfa, çok fazla ekran veya ayrıntı eklemenize izin vermez, ancak ana fikirlere konsantre olmanıza yardımcı olabilir. Büyük bir kağıt yaprağı kullanarak büyük bir yolculuk, birçok ayrıntı ve ek notlar çizebilirsiniz. Alternatif olarak, üzerine birkaç küçük yolculuk da yerleştirebilirsiniz.

Post-it notları da yardımcı olabilir. Ayrıca post-it notları kullanmayı deneyebilirsiniz. Bunlara ayrı ekranlar veya bazı dipnotlar çizebilir veya eskizinizin elemanlarının ek durumlarını çizebilirsiniz. Avantajları, kolayca değiştirilebilmeleridir, ayrıca notu başka bir yere de taşıyabilirsiniz. Örneğin, akışın değişmesi durumunda, sadece post-it notlarınızın sırasını değiştirebilirsiniz.

Şablonları kullanın. Şablonları kullanmayı deneyin. Zamandan tasarruf edecekler ve daha tıklanabilir, yüksek kaliteli prototipler oluşturmanıza olanak sağlayacaklar.

Bir beyaz tahta kullanmayı deneyin. Beyaz tahtanın birçok avantajı vardır. Çok sayıda şube ile büyük bir yolculuk çizmenize olanak sağladığı için giderek daha popüler hale geliyor. Kağıda birçok uygulama bileşeni çizebilir ve ardından bunları mıknatıslar kullanarak beyaz tahtaya bağlayarak yolculuğa ekleyebilirsiniz.

Bir gölge çizimi. Gölgeler, önemli öğeleri işaretlemenize yardımcı olabilir ve çiziminize görsel çekicilik katar. Üç farklı türde gölge kullanıyorum:

• Işık yönünü takip eden çizgiler - bu her zaman güzel görünmez, ancak derecelemeyi kullanabilir ve nesneleri farklı “yüksekliklere” kadar kaldırabilirsiniz.
• Bir kısmı daha koyu bir renkle çerçeveleme (yalnızca alt veya alt ve sağ taraf)
• Pro-marker'ı (veya çizim için kullandığınız uygulamadaki eşdeğerini) kullanma

Çizim bileşenleri. “Ben o kadar iyi çizemiyorum” gibi bir itiraz, inisiyatifinizi boğabilir. Aslında göründüğünden daha kolay. En karmaşık eskizler bile, bu örnekte olduğu gibi genellikle birkaç temel bloktan oluşur. Bir nokta, bir çizgi, bir üçgen, bir kare ve bir daire çizebiliyorsanız, o zaman çiziminiz için herhangi bir şeyi çizmek için ihtiyaç duyduğunuz temel yapı taşlarına sahipsiniz.

Hepsini bir araya koy. Temel öğeler, düğmeler, radyo düğmeleri ve açılır menüler, temel öğelerden oluşur. Bu öğeleri çizmeyi öğrendikten sonra bunları birleştirebilir ve karmaşık bloklar ve bileşenler çizebilirsiniz.

Sarmak

Tasarımcıların farklı ihtiyaçları ve kişisel tercihleri ​​olduğundan, bu yazının amacı UX çizimi veya genel olarak çizim için nihai, herkese uyan tek beden kılavuzu oluşturmak değildi.

Gördüğünüz gibi, bu kapsanacak çok şey var . Tasarımcılar, UX çizimleri üretmek için sayısız araç, teknik ve yaklaşım kullanır ve bu oldukça özneldir. Belirli teknikler, farklı projelerde çalışan farklı kişiler için işe yarayabilir veya çalışmayabilir. Yeni başlıyorsanız, kesinlikle denemelisiniz. Sürekli uygulama ve deney, sizin için neyin işe yaradığını bulmanıza yardımcı olacaktır.

Projenize ve tasarım yaklaşımınıza en uygun ipuçlarını ve teknikleri seçmek size kalmış. Diğer UX kullanıcıları için ek çizim ipuçlarınız var mı? Bunları yorum bölümünde paylaşmaktan çekinmeyin.

• • •

Toptal Tasarım Blogunda daha fazla okuma:

• eCommerce UX – En İyi Uygulamalara Genel Bir Bakış (Infografik ile)
• Ürün Tasarımında İnsan Merkezli Tasarımın Önemi
• En İyi UX Tasarımcı Portföyleri – İlham Veren Vaka Çalışmaları ve Örnekler
• Mobil Arayüzler için Sezgisel İlkeler
• Öngörülü Tasarım: Büyülü Kullanıcı Deneyimleri Nasıl Yaratılır