Mükemmel Ürün Tasarımına 26 Adım
Son dört yıl boyunca panolar ve uygulamalar tasarlıyorum ve farklı departmanlar ile nasıl başa çıkılacağını öğrendim ve ürün tasarımını daha verimli hale getirmek için bilgilerini kullandım.
Bugün, günlük rutinimde oluşturduğum tüm adımları paylaşacağım, daha iyi bir tasarımcı yaptıklarına inanıyorum.
Ön işlem
1. Mümkün olduğu kadar çok bilgi edinin (üç örnek isteyin)
Benim için hiçbir şey gerçek bir çalışma örneği görmekten daha fazla netlik sağlamaz. Yeni bir müşteri ile çalışırken veya bir ürün için yepyeni bir açılış sayfasında, en kolay başlangıç noktasının müşteriden üç veya dört ilham verici sayfa sunmasını istemek olduğunu buluyorum, çünkü bu her iki tarafa da gerçekten yardımcı oluyor. Müşterinize fikirleri masaya koymanız, neleri sevdiklerini ve bitmiş tasarımdan ne beklediklerini kolayca anlayabilmenizi sağlar.
Birden fazla ekiple çalışıyorsanız, tasarımcı arkadaşlarınızla yaptığınız gibi ürün geliştiricilerinizle bir çok zaman geçirmeyi hedeflemelisiniz. Öğrenmiş olduğum şey, etkili bir tasarım kararı vermenin anahtarı, dev ekibiyle konuşabildiğiniz kadar konuşmanızı sağlamaktır. Benim durumumda, bir problemin çözümünün bulunduğum, kendimle başaramadığım vakalar oldu.
Amaç, gelişime geçmeden önce mümkün olduğunca çok soruyu ortadan kaldırmaktır.
2. Personas hakkında bilgi edinin
İlk başta, ben şahıslar hakkında şüpheci olduğumu söylemeliyim, ama şimdi her şey bana mantıklı geliyor.
Bu yüzden eski sürecimin tam tersine, özellikle çözümün birçok farklı kenar durumu olduğunda, ürün özellikleri üzerinde çalışırken personelin nasıl önemli olduğunu görebiliyorum. Gerçekten kimin için tasarlandığını anlamanıza yardımcı olur. Dört ila beş kişiyi bulmayı hedefliyorum.
3. Tam hedefler belirleyin - tam olarak ne izleyelim?
Çoğu tasarımcının / müşterinin bu adımı görmezden geldiğini düşünüyorum, ancak her iki taraf için de tasarımın en önemli yönlerinden biri, tasarladığınız ürünün hedeflerini anlamaktır. Düzgün piksellere atlamak ve projenin UI'sini hızlı bir şekilde ortadan kaldırmak eğilimindeyiz. Yepyeni bir web sitesi veya yeni bir özellikse, önce elde etmek istediğiniz şeylerin açık hedeflerini belirlediğinizden emin olun.
Her şey izlenebilir olduğundan, izleyeceğiniz kesin noktalar hakkında konuşun. Örneğin, bunlar yeni kayıtlardan, Paypal ve kredi kartı ile yapılan alışverişlerden yararlanan müşterilere kadar değişebilir. Her zaman başlangıçta ne kadar yükseğe nişan aldığınızı bildiğinizden emin olun!
(Bu süreçte daha sonra Mixpanel'de dönüşüm hunileri kurmak için buna ihtiyacınız olacak.)
4. Bir proje klasörü oluşturun ve bir moodboard oluşturmaya başlayın.
İlham için bolca site var - Dribbble , Behance , Pttrns vb üzerinde çalıştığınız projeye benzer projeler bulmak gerçekten çok kolay. Ayrıca, yaşadığınız ve çözmeye çalıştığınız bir soruna zaten bir çözüm olabilir.
Yeni bir proje üzerinde çalışmaya başladığımda, her zaman - Kaynak Dosyaları , Ekranlar ve Veriler , İlham Kaynakları ve Kaynaklar adlı bir klasörle bir klasör kuruyorum . İnternette bulduğum her şeyi, temel mizanpajları oluşturmak için daha sonra kullanmak üzere Inspiration klasörüne kaydediyorum. Bu klasör eklentilerden, renk örneklerinden ve hatta Behance'den tam vaka çalışmalarından herhangi bir şeyle doldurulabilir.
Düşük sadakat
5. Beyaz Tahta
Yeni bir özellik eklemek veya bir süreci yeniden tasarlamak istiyorsak, oturduğumuzda ve toplantıdaki herkes bir beyaz tahtada, kağıda veya bir iPad'de fikir oluşturmaya başlar. Bu eylem, ekibi herkesin tasarımcının konumuna getirmemizi sağlıyor. Daha sonra hangisinin en iyi çalıştığını görmek için iki tasarım seçeneğiyle sonuçlanırız.
Her zaman tüm deneyimden geçmeye ve sürecin bu bölümünde kenar durumların çoğunu tartışmaya çalışıyoruz. Geliştirme aşamasında, tasarım aşamasında, hatta daha da kötüsü olarak, bunları ele almak gerçekten çok önemlidir. O zaman çok zaman ve enerji kaybedebilirsiniz.
6. Tüm ekranlarınızı haritalayın (kullanıcının girmesi gereken veriler)
Bu, beyaz tahtanın ötesine geçme ve kullanıcının tüm girişlerini ve hikayelerini listeleme zamanıdır. Bir kullanıcının belirli bir ekrana tam olarak ne ekleyeceğini ve bir kullanıcının istediği hedeflere nasıl ulaşabileceğini yazın.
7. Tüm olası durumları not edin
Tüm gösterge panoları, uygulamalar veya web sitelerinin formları farklı durumlara sahip olduğundan, bu, unutmamanız gereken önemli bir adımdır.
Tasarım yaparken hepsine hitap ettiğimizden emin olmalıyız. Eskiz dosyalarımızda veya PSD'lerimizde parlak grafikler ve havalı profil resimleri olması güzel bir şey. Ancak, büyük olasılıkla, kullanıcılar uygulamanızın karşıt tarafını göreceklerdir. Özellikle de ürününüze geldiklerinde. Hazırlanmak için gerekli. Aşağıda, veri bileşenlerimizden birinde boş durumlarla nasıl başa çıktığımızın bir örneği verilmiştir.
8. İlk diyagramınızı hazırlayın
Tüm bunlar düşük sadakatin son bölümüne yol açar. Beyaz tahta görevinin sonucu sayesinde, tüm olası eyaletleri, kullanıcının giriş ve hedeflerini biliyoruz. Tüm etkileşimleri özetlemek için bir diyagram oluşturuyorum ve dürüst olmak gerekirse, bunu defalarca yapma stilini değiştirdim: Rasterleştirilmiş düzenleri olan Sketch dosyalarından, her bir sayfayı kendi adlarıyla aşağıda sembolize eden dikdörtgenlere dönüştürmek. Bu söyleniyor ki, süreç her zaman acı vericiydi, genellikle değişmek istediğimiz ya da daha sonra bir şey eklemek istediğimiz bir durumda sonuçlanırım. Bu çözümler ile genellikle daha fazla adım atmak zorunda kalırım; çizgiler, oklar ve resimlerin konumlarını değiştirmek gibi.
Yakın zamanda kullanıyorum Camunda Modeler Bu tam olarak bir tasarım aracı değildir; Teknik diyagramlar oluşturmak için basit bir uygulama. Hangi garip geliyor, ama bu uygulama temel diyagramları oluşturmanıza yardımcı olmak için geliştirilmiştir. En önemlisi yaratılan her şey tamamen ölçeklenebilir. Herhangi bir noktayı kolayca sürükleyip bırakabilir ve sizin için otomatik olarak çizgiler ve oklar oluşturacaktır. Ayrıca, örneğin bir kullanıcının Interkom'dan bir e-posta aldığını vurgulamak için yararlı olabilecek farklı noktalardan birini seçebilirsiniz. Camunda, Sketch'de izlenebilir noktaların renklendirilmesini kolaylaştıran SVG'ye ihracat yapıyor.
İş tasarımı
9. Moodboard
Tüm görüntüleri Inspiration klasörüne topladığım için, ruh kurulu kurulumu ile başlayabiliyorum. Genelde pixel süreçlerinden başlayamadan önce düşüncelerimi meslektaşlarımla tartışmak ve görsel fikirlerin bazılarını anlatmak için duygudurum panoları kullanıyorum.
10. İlk taslak
Tasarım her zaman devam eden bir süreçtir. Harika bir sonuç için yol boyunca çok fazla yineleyeceksin. İlk taslak ile de geri bildirim toplamak için bir yoldur. Takım arkadaşlarınızdan, müşterilerinizden veya potansiyel kullanıcılardan geri bildirim almaya başlamak için piksel mükemmel tasarımına gelmek zorunda değilsiniz. İlk düşüncelerini almak ve bir tartışma başlatmak için genellikle mevcut tasarımlarımızdan ekranları karıştırıyorum. Bu, gerçek görünümlü tasarımlarla bir günden daha kısa sürede oynamaya başlamamızı sağlar. İşlerin iyi bir şekilde birbirine bağlanıp bağlanmadığını test etmek için ilk basit bir prototip yapabilirsiniz.
11. kopyanızı yazınız
Kopya, kullanıcıların kararlarının önemli yönlerinden biridir ve bunu tasarımın önemli bir parçası olarak kabul ediyorum. Kullanıcıların bir sonraki adımı bulmak için uğraştığı kafa karıştırıcı diyaloglarla güzel bir tasarımdan daha kötü bir şey yoktur.
12. İlk staj testi
İlk taslağınızla hızlıca bir prototip oluşturabilirsiniz. mucize veya Invision . Bu, yakın zamanda yapmaya başladığım bir şey ve başka bir şaşırtıcı doğrulama yönü. Bir prototip ile ekibinizden 3 veya 4 kişi ile kolayca bir çağrı kurabilir ve prototip bağlantısını onlarla paylaşabilir ve belirli akışlar / senaryolar üzerinde test yaparken birkaç soru sormaya çalışabilirsiniz.
Bu sayede sorgulama becerilerinizi kolayca test edebilir ve gerçek zamanlı olarak tasarım kararlarınızı boşa harcanan kaynak ve zaman konusunda endişelenmeden test edebilirsiniz. Pano geliştirmede o kadar fazla yer almayan insanları tercih etme eğilimindeyim. Ayrıca daha önce prototiple oynama şansı olan birini izlemekten de kaçınmaya çalışın.
13. Görgü kuralları
Hepimiz düzenli kalmanın ne kadar zor olduğunu biliyoruz. Başka bir özellik nasıl teslim edilir. Bu genellikle dağınık bir Sketch veya PSD dosyalarına yol açar. Başlangıçta tek bir tasarımcı olarak çalışmak, takım halinde çalışmak veya kendi dijital ürünlerimde çalışmak arasındaki farklar hakkında çok şey öğrendim.
Bir takımda çalışırken, PSD'nizi başkaları için yaratıyormuş gibi düşünün. Bir klasörde 8'den fazla katman varsa, yeni bir tane oluşturmalısınız kuralını kullanıyorum.
UI Kitlerimde çalışırken saatlerimi kurtardığım Sketch için harika bir eklenti buldum: Yeniden Adlandır .
İpucu: Her şeyi tuvalin üzerine koyun. Tuvalin geri kalanı beyazken, her zaman güzel başlıklar tasarladım. Tasarım yaparken tüm içeriği ilk önce yerleştirmeyi öğrendim - sadece düzen ve tipografi ile oynayın. Güzel detaylar tasarlamak ve içerikle bütün konseptle oynamak çok daha kolay.
14. UI öğeleri oluşturun ve Lego ile oynamaya başlayın
Muhtemelen partiye geç kaldım ve yazı yazarken eskimiş görünüyor. Bu yolculukta herhangi bir tel örgü yapmadığımızın nedeni basit. Sketch 39, inanılmaz bulduğum ve “yeniden boyutlandırma özellikleri olan şekiller” ile birlikte geliyor. Bu, ekipteki herkes için tasarımı kolaylaştırıyor. Eskiz dosyamız artık tamamen sürükle-bırak. Takım arkadaşlarınızdan herhangi birine boş bir tuval verebilirsiniz ve neredeyse yüksek kaliteli taslaklar oluşturabilirler. Bu sayede tüm wireframing araçlarını atlayabilir ve neredeyse gerçek görünümlü piksellerle başlayabiliriz.
Bu aynı zamanda, tel kafesleri gerçek tasarımlara dönüştürebilmemiz için el ele gider. Herhangi bir PM bir tel kafes oluşturabilir ve daha sonra kolayca alabilir ve yüksek sadakate dönüştürebilir.
Varlıklar ve Teslimat
İlk geri bildirime göre tasarlama ve yineleme ile işiniz bittiğinde, henüz tamamlanmadı. Şimdi tasarımlarınızı mühendislerinize / devlere teslim etme zamanı geliyor.
15. Teknik Özellikler
Temel hedeflerimden biri de kararlarımı ekiple her zaman iletebilmem ve mümkün olan en iyi kaynakları sunabilmek için geliştiricilerimiz için olabildiğince zorluğu azaltabilmektir. Bu benim için kesinlikle bir tasarımcı olarak işimin en önemli kısmı.
Tüm etkileşimleri belgelediğimizden ve sürecimizin başlangıcından itibaren herşeyi hazırladığımızdan, özelliklerin oluşturulması bir parça kekdir. Google Dokümanlar'da veya Sketch dosyalarındaki ekranların altında teknik özellikler yazmaya eğilimliyim. Tasarımlarınızı tüm özelliklerin açıklamalarıyla ele almak güzeldir, bu sayede herkes dosyayı gelecekte yakalayabilir.
16. Diyagram
Bu teknik, tasarımları basmak ve ekiple tartışmak için güzel bir yöntem. Ama bugünlerde daha iyi seçenekler olduğunu düşünüyorum. Son prototipin hazır olması gibi.
17. Son Prototip
Benim için en önemli şeylerden biri, her zaman tüm etkileşimlerin prototipte hazır olmasıdır. Genelde takım arkadaşlarıyla yaptığım küçük seanslar için ya da bazı özel akışları göstermek için sonuncusuna kadar 3-5 prototip elde ediyorum. Sketch'deki tüm durumları bir çalışma yüzeyinde hazırlamaya ve daha sonra bu durumları çoğaltmak için her bir devletin hazır olmasını sağlamaya çalışıyorum.
Teknik özelliklerinizi daha da genişletmek için tasarımlarınızın parçalarına yorum eklemek harikadır, böylece bir metin yazıcısı bile her kopya ve iletişim kutusu gerektiği gibi çalışırsa gerçek pikselleri kolayca kontrol edebilir ve akabilir.
18. Quicktime Videosu> Notlar
Ekip veya bir müşteriye Hangout'ta hiçbir şey sunmadığımda, prototipten geçip, tasarladığım her şeyi açıklayan bir ekran paylaşımı videosu gönderiyorum. Herhangi bir soruya cevap verdiğim herhangi bir sunumdan ve tasarım yapmaya karar verdiğim olası etkileşimlerden önce, benim için güzel bir onay. Uzak takımlarda çalışırken güzelce kullanılabilir. Herkesin tüm etkileşim düşüncesini istediği zaman tekrar oynatma hakkı vardır.
19. Animasyon
Güzel bir son dokunuş olarak kullanabilirsiniz After Effects veya Prensip . Bunu nasıl istersen ya da hareket etmen gerektiğini açıklamak güzel.
20. Stil kılavuzu
Mühendisler için bir diğer önemli nokta, işlerin farklı senaryolarda nasıl tepki vereceğini bilmek. Girdi hata durumlarını veya hata mesajlarının nerede görüntüleneceğini düşünün. Benzer şekilde, bir gönder düğmesinin devre dışı durumuna nasıl bakılacağı, bir spinner vb.
Mühendisler için, Sketchboard dosyası Lego blokları sayesinde tüm ekranları kodlamaya başlamadan önce, mühendisler için çalışma yüzeylerinizi ve stil öğelerinizi tek tek yapmanız çok kolay.
Son test
Tasarımlarımızı mühendislere teslim etmemizden bu yana sürecin son bölümüne odaklanabiliyoruz - kararlarımızı test ediyoruz!
21. İnceleme / HotJar
Tasarımlar çalışma koduna dönüştürüldükten sonra Inspectlet veya HotJar JS parçacıkları. Kullanıcıların gösterge panosunda nasıl gezindiklerini veya portföy sayfamda neler yaptığını görmek için her zaman heyecanlıyım (veya hüsrana uğramışım). Inspectlet, tüm kullanıcı oturumunuzu ele geçirirken harikadır. Büyük projeler için de harika çalışıyor.
Belirli bir özelliğin veya akışın oturumlarını izlemenize yardımcı olan kolay "/ sayfa" filtreleme ile gelir.
22. Mixpanel
Mixpanel Hedeflerimizi doğrulamak için harika çalışıyoruz (sürecimizin en başında kurduğumuz). Mixpanel, kaç kullanıcının belirli akışları tamamladığını görmeye yardımcı olur. Hesabı kurmadan önce kaç kullanıcı düştü. Ana açılış sayfasından mağazaya ve en değerli ürünümüze kaç kişi gitti.
23. Google Analytics
Ben büyük şeyler kodlama yeteneğine sahip değilim, ama en azından CSS dosyaları ve basit bir kod ile çalışabiliyorum. Son zamanlarda, kullanıcıların Hotjar ısı haritalarına tıklayıp nereye baktıklarını görmek istedim. Bu yüzden, Google Analytics'te temel tıklama izleyicisini ayarlamaya karar verdim. Her kullanıcının tıklamalarını web sitenizde de kolayca izleyebilirsiniz.
Bu, kullanıcının davranışını kolayca eşleştirmeme yardımcı oluyor. Örneğin, kullanıcıların sitemde en üstteki gezinmeyi intro metninde vurgulanan bağlantı üzerinden 5 kat daha fazla kullandıklarını öğrendim. Ne yazık ki AdBlock kullanan kullanıcıların tıklamalarını saymaz.
24. Dahili telefon
İlk akışlarımız üzerinde anlaştığımızda, kullanıcının bir e-postayı aldığı akışların bir kısmı hakkında konuşuyorduk. interkom . Buradaki sorumluluğumuz, tüm kopyanın ve mesajın kendisinin anlamlı olmasını ve ziyaretçiye gerçekten yardımcı olmasını sağlamaktır. E-postalarınızın, kullanıcılarınızı keskin sonuçlarınıza yönlendirdiğinden emin olun ve her zaman akışa nasıl devam edeceğiniz konusunda belirli destek makaleleri ve bilgiler sağlamaya çalışın.
Son birkaç kelime
25. Dribbble'ı geride bırakın
Ne öğrendiğime ve tasarımımın son 4 yılda nasıl değiştiğine göre, Dribbble'ın mutlaka tasarımlarınızı oluşturmak istediğiniz yer olmadığı noktaya geldim. Her zaman seksi profil resimlerle güzel piksellere sahip olmayı hedefledim, ancak gerçek kullanıcıların ihtiyaç duyduğu ve kullanacağı şey bu değil.
İşte bir örnek, solda Dribbble için tasarladığım bir şey göreceksiniz. Sağ tarafta, insanların profillerini düzenlemelerini izlemek için biraz zaman geçirdim ve vizyonumun ihtiyaç duydukları şeyi sunmadığını fark ettiğimde tasarladığım bir şey göreceksiniz.
Patates veya kayan pizzanın parlak çılgın animasyonu için 500 beğeni alabilirsiniz, ancak gerçekten önemli olan, kullanıcılarınızın şirket e-postalarının sıklığını nasıl yöneteceklerini veya performans analizlerini nasıl filtreleyeceklerini bulabilmeleridir.
[- Bu gönderi aslen yayınlandı Ortada , yazarın izni ile yeniden yayınlandı. -]