Kanama gözleriniz için üzgünüm ama bunlar önemli.

metodoloji

50 Şey [Muhtemelen] Tasarımı Unuttum

Her PM: “Kızmadım, sadece hayal kırıklığına uğradım…”

Küçük Şekerler: Bu makaleyi seviyorsanız, arkadaşlarınızla paylaşın. Eğer köpek yavrularını seviyorsanız, bir tanesini kurtarın. Mayonezi seviyorsanız, soğutun.

Bak, hepimiz arada sırada bir şeyler tasarlamayı unuturuz. Bu çok havalı!

Güzel değil… ama…… tamam. Olur. Bu liste seni daha iyi yapacak. Veya en azından daha fazla farkında. Ya da belki sadece bir kaç alkış verin, çünkü birisinin bu listeyi küratörlüğünde geçirerek zaman geçirdiğini ve hayatınıza devam ettiğini biliyorsunuz. NBD. Ben bütün bu alkışlar ve bu bas hakkında. İlk paragraftaki Meghan Trainor referansı ile, kükreyen bir başlangıç ​​yapıyoruz.

Bu, tasarlamayı unutmuş olabileceğiniz şeylerin bir listesi. Instagram veya Snapchat gibi bir uygulamanın ne kadar basit olduğunu düşündüğünüzde, gerçekten harika bir kullanıcı deneyimi yaşatmak için kaç ekranın, durumun ve içeriğin göründüğünü göz ardı etmek kolaydır.

  • Giriş ve Üye ol
  • İlk tecrübe
  • Bütün Küçük Şeyler
  • Malzeme Başlat
  • Profil Sayfaları
  • Mad Akar

Öyleyse bunları okuyun, yansıtın ve… gibi… Başbakanınızı üzmeyin.

Giriş yapmak kayıt olmak

1. Splash Ekranı

Bir mobil uygulamayı başlattığınızda veya bir web uygulamasına giriş yaptığınızda ve her şey yüklendiğinde görünen ekran.

İşte James Jackson’dan güzel bir tane

2. Şifremi Unuttum

“Abcd1234” veya “1234abcd” miydi? Bu önemli. Sakın unutma.

Majo Puterka, kullanıcılarını yağmur altında evden dışarıda bırakmaz.

3. “Kayıt olduğunuz için teşekkürler” sayfası

Bu ekran genellikle bir kullanıcı bir hesap oluşturduktan ve e-posta adreslerini onaylamalarını söyledikten sonra gelir.

Sıradaki ne? Hayley Cattlin'e sor.

4. Hoş Geldiniz E-postası

Bu, ürün tasarımı ve ürün pazarlaması arasındaki çizgiyi zorluyor, ancak kelimenin tam anlamıyla kullanıcılarınız üzerinde edindiğiniz İLK izlenim. Sayımı yapmak. Ürününüzün tuhaf sesini tanıtmak için harika bir zaman.

Gerçekten böyle. Brian Golatka tarafından.

5. Hizmet Şartları ve Gizlilik Sayfaları (ugh)

Sadece yasal olarak millet için yap. Sadece dava edilmekten kaçınmaya çalışıyorlar.

Marko Prljic'in Şartlar ve Koşulları nasıl daha ulaşılabilir hale getirmeye çalıştığını gerçekten takdir ediyorum.

İlk tecrübe

6. Kullanıcı Onboarding

Kullanabileceğiniz tonlarca farklı yöntem var. İşte benim favorilerimden beşi:

MuNa tarafından nefis yararlı.

7. Kutu Dışı Boş Durum (lar)

Bir eve taşınmak gibi ve hiçbir mobilyaya taşınmamışsınız. Oldukça boş görünüyor, ha? Kullanıcılarınıza doğru yönde dürtme vererek yardımcı olun. “Kanepeyi buraya yerleştirin.”

Veli-Johan Veromann'ın süper kahramanlardan hoşlandığı hissine kapılıyorum.

8. Yardım Belgeleri

Büyük bir şirketseniz, muhtemelen buna bağlı bir ekip var. Ama yine de resimler ve ekran görüntüleri için seni rahatsız edecekler. Bu, giriş sayfası veya etkinlik yayını kadar çok (veya daha fazla) çaba gerektirir.

Maya Gao çok yardımcı oldu. Maya gibi ol.

9. Varsayılan Kullanıcı Profili Resmi / Avatarı

Gravatar gibi sosyal hesaplara veya hizmetlere kaydolmak, gülümseyen yüzlerimizi göstermemize gerçekten yardımcı oldu, ancak yine de bir profil fotoğrafı yüklemeyi başaramayan bir erkekle karşılaşacaksınız. Biraz yetenek verin ve markayı gösterin.

Hermes Garip sevimli şeyler yapar. Bunlar sevimli AF.

10. Çıkış Düğmesi

Ne yazık ki, kullanıcıların gitmesine izin vermek zorundasınız. Uygulamanızı bir halk kütüphanesinde kullanıyormuş gibi yapın ve bazı yabancıların hesap adlarını “Mr. Butts”. Uygunsuz.

Galiba Kristofer, muhtemelen Henrik’in öğle yemeği parasını çaldı. Oturumu terk etmesine ve olay yerinden kaçmasına izin verin.

Tüm küçük şeyler

11. Uygulama Altbilgisi

Çoğu zaman sayfaların sonsuza dek sürdüğünü, insanların dünyanın düz olduğuna inandığını ve devam etmeyi sürdürdüğünü farz ediyorum. Not: Dünya düz değildir.

Ash Schweitzer ormanda bir yerde kaybolabilir. Birisi ona yardım etsin.

12. Tarayıcı Favicon

Bilirsiniz… bir tarayıcı sekmesinde görünen o küçük simge. Orta sekmelerimi kaybediyorum çünkü artık yeşil değil. Ama bu güzel!

Michael Flarup indirebileceğiniz harika bir favicon şablonu yaptı.

13. 404 Sayfa

Rizvan o deliğe sıkıştı. Git ona yardım et.

14. Default / Hover / Focus / Pressed / Disabled / Etc. Giriş Durumları

Ugh, pek çok eyalet. “Odak + Hover” benim favorim / en belirsiz olabilir. Aşağıdaki ekran görüntüsü UX Elektrikli El Aletleri Tasarım Sisteminden alınmıştır.

Benim yan projem için ek not, kesinlikle kontrol etmelisiniz:

15. Sekme Sırası

Sekme Sırası, kullanıcıların Sekme tuşunu kullanarak bir sayfada gezinmelerini sağlayan bir erişilebilirlik özelliğidir. Bunu temsil edecek bir resim bulamadım, bu yüzden Christian Beck’in 2007’de yazdığı ve bir tablodaki her bir UI kontrolü için bir tabloda sekme sırası konumunu tanımladığı bir özelliğin ekran görüntüsünü çektim. SnoozeFest 2017 ™). Birincil eylemlerin ikincil işlemlerden önce gelmesini sağlamak için maddelerin ziyaret sırasını tanımlayabilirsiniz. Bu zarif bir tasarım zorluğudur.

Ahhh, 80 sayfalık yazım günleri ve şelale gelişimi.

16. Kaydırma Davranışı

Sadece nereye ve nasıl kaydırdığı değil, gerçekte kaydırdığı şey de. Başlık sabit mi? Altbilgi mi?

Ah, Peter Blazej, bu düzgün hissettiriyor. Güzel!

17. İnterkom Düğmesi

Yani yapabileceğin en az şey, uygulama renklerine uydurmak. Hadi millet. Roket ameliyatı değil.

Bir kase mısır gevreği yapmaktan daha kolaydır.

18. Sayfalama Düğmeleri

Sonsuz kaydırmayı tercih etmediğinizi farz edersek, kullanıcılarınızın sayfa 27'ye ulaşmak için bir yola ihtiyaçları olacak.

Borunda iyi bir iş yaptı. Sarıyı sevdim, Borunda!

19. İmleçler

Düğmeler bir işaretçi olmalıdır. Etkileşimli olmayan öğelerin varsayılan imleci olmalıdır. Metin bir metin imlecine sahip olmalıdır. Geliştiriciler bunu her zaman bilmezler. Geçen gün, bir geliştiricinin düğmenin vurgulu durumu için bir metin imleci içerdiği bir uygulama ekranını reddettim. Merhamet.

Jeff Broderick eşyalara tıklayarak SEVİYOR. Ayrıca bir freebie yaptı.

20. Tablo Sıralama / Filtre / Arama Mekanizması

ZZ Top’a ulaşmanın daha hızlı bir yolu olmalı, “Sakallı Bantlar” veri tablosu…

Eugen Esanu, filtreleme mekanizmaları ve mor / sarı kombinasyonları için olağanüstü bir göze sahiptir. Güzel.

21. “Sonuç Yok” Boş Durumlar

Bazen bir şey ararsınız veya çok fazla filtre eklersiniz ve sonuç yoktur. Ne kadar üzücü. Arsız bir resimle kullanıcılarınızı neşelendirin. Veya banka hesabınız ve yönlendirme numaralarınız.

Reiner Wendland, Zendesk için her şeyi kapsıyordu.

22. Hata Durumları

Hatalı giriş. Yanlış parola. Mevcut hesap Çok fazla şey seçildi. Özellikle büyükannem ve Noel için bir iPad'iniz varsa, sorunların çözülebileceği her türlü yol vardır. O bir hataydı.

Mike Stezycki gerçekten e-postanın gönderildiğini düşünmemi sağladı. Sonra hepsi buydu:

23. Sistem Bildirimleri

Sistem her zaman perdenin arkasında bir şeyler yapıyor ve bazen işlerin başarıyla bitip bitmediğini (veya bitmediğini) bilmek güzel. Bunu kesinlikle kullanıcıya bildirmelisiniz.

Bu, Google Gelen Kutusu'ndan. “Geri Al”, annenizden bir e-postayı “yanlışlıkla” sildiğinizde çok kullanışlıdır.

24. Boş Otomatik Tamamlama Bırakma

Otomatik tamamlama, sistemdeki nesneleri bulmanıza yardımcı olmak için harikadır, ancak bazen herhangi bir sonuç alınmaz. Bu durumda, sadece boş bir kutu istemezsiniz. Küçük bir mesaj göster veya bir tür harekete geçmelerine izin ver.

Anlaşılan Jurriaan van Drunen, irtibatlarında zaten “Sutyen” yoktu. Muhtemelen en iyisi için.

25. yükleme devlet

Tabii, insanlar muhtemelen sayfa yüklenirken telefonlarında Tindering olacak, ancak gerçekte onların seksi kaydırarak baktıklarında, muhtemelen hala eşyaların yüklenmekte olduğuna dair görsel bir gösterge olmalı.

En iyi pan çevirme formu değil, XPLAI. Denemeye devam. Ama bu yine de acı verici.

Malzeme Başlat

26. Friggin’in Uygulama Simgesi

Evet, belki de bunu unutmamanız en iyisidir.

İddiaya girerim Eddie Lobanovskiy tüm ikonlarını kahvaltı yiyecekleriyle değiştirdi. Lezzetli.

27. App Store Görüntüleri

Daniel Beere, uygulaması için uygulama mağaza resimlerini unutmadı. Çak bir beşlik, dostum.

28. Açık Grafik / Sosyal Görseller

Twitter'da bir linke tweet attığınızda, Facebook'ta bir mesaj yazdığınızda, Medium'da bir link yazarken, vb.

Kristy T resmen dikkatsizdir. SF bunu sana yapacak.

Orta görünümde nasıl göründüğü:

29. Web Sitesi Pazarlama Görüntüleri

Ayrıca, unutma, muhtemelen web sitesinin Çizgili gibi görünmesini sağlamak isteyeceklerdir, bu yüzden şunu aynen kopyalayın:

Ve eğer Redkix'te bir tasarımcıysanız, görüntünün koyu kırmızı üzerinde çalıştığından emin olmanız gerekir.

30. Satış Güverte Resimleri

Muhtemelen yukarıdakilerden birini yaparsan iyi olur. Ancak bu durumda, mükemmel satış ekibinizin üzerinde çalıştığı 6 rakamlı anlaşmanın markasını eşleştirmek için içeriği temizlemeniz gerekebilir.

Oh ve satışlar muhtemelen tüm makbuzlarınızı başka şeylerle örtecek, o yüzden hazırlanın.

31. Pitch Deck Görüntüleri

Bir Sales Deck görüntüsü gibi ama biraz daha vizyon sahibi. Yani… para biriktirmeye çalışıyorsun. Daha sonra nasıl mümkün olacağına karar vereceksiniz.

İşte ticari bir sır, her zaman perde tablanıza panolar koyun.  Bu bir şaka değil.

32. Ürün Avı Görüntüleri

Hey, profil sayfalarını da güncellediler!

Hala Orta 2.0'ı özlüyorum ama her  alıyorum   devam etmeme yardım ediyor .

33. Facebook / Twitter Reklam Görüntüleri

“Ama Facebook reklamları yayınlamıyoruz!” Ha, siz oluncaya kadar. Ve sonra kimse sana söylemez. Onları çoktan yap, güvendesin.

Casper Minder için WASN’T olmayan bir reklam bulmak için biraz kazı aldı. Hepiniz oyunu öldürdünüz Casper.

34. Sosyal Medya Profil Görüntüleri

Evet, 938 sosyal ağ için bir tane yapmalısın. Neyse ki bunu hızlandırmak için bir Eskiz aracı yaptık. Hoşgeldin, kiddos.

35. E-posta Başlığını Başlatın

Bir örnek yaparsanız üçlü puan. Güncel.

Bu arada, bu benim ajansımın bültenleri ve iş arkadaşlarım gerçekten çarpıcı içerikler yazıyor. Abone olsanız çok seviniriz!

İşte bazı yeni tercihler:

Profil Sayfaları

36. Bildirim Tercihleri

Uygulamalar bir şeyler olduğunda size haber verdiğinde ve hatta bir trompet sesi çaldığında daha soğuk olduğunda harika. Fakat 19. zamandan sonra, gerçekten trompetlerden bıktınız. Trompetlerin ne zaman çalacağı konusunda kullanıcının muhtemelen karar vermesine izin vermelisiniz.

Slack, bildirim ayarlarında yavaşlama yaparak 8 milyar dolarlık bir şirket olmadı !! Başarmak.

37. Fatura Sayfası

İnsanların size binlerce dolar ödedikleri ürünü harcamak için faturalarının kopyalarını almaları gerektiğini unutmayın. Bazı insanlar aptal bilişim departmanını kurumları için oluşturuyorlar ve bunu bulmanın ne kadar zor olduğunu kaldıramazlar. her. tek. ay. Acı değil.

Bunların ne anlama geldiğini bilmiyorum, ama buraya gelmek kolaydı!

38. “Hesabım Sil” Seçeneği

Tamam, biliyorum Bunu kimse yapmayacak. Ama hey, belki bir gün yine yeni bir hesap açabilirler! Tıpkı alışveriş merkezindeki bir büfeden geçen ve “Sonra geleceğim ve üç tane alacağım!” Diyen gibi.

Bunun olumlu olmasının yasal sebepleri var. Daha büyük bir takım lisansına girdiğim için hesapları sildim. Toz toplayan eski hesapları sildim ve yeni bir başlangıç ​​yapmak istedim. Her durumda, bunu iyi bir deneyim haline getirmek iyi müşteri hizmetidir.

Pssst, Sayın Başkan, hesabınızı buradan devre dışı bırakabilirsiniz.

39. Profil Fotoğraf Kırpma Aracı

Bu, çoğu uygulama için bir çöp tenekesi yangın kabusu senaryosudur ve olması gerekmez. Christian'ın profil resmini Beyoncé'ye değiştirdiği zamanki ekran görüntüsünü bana göndermesini istedim.

Bir fotoğrafı nasıl kırptığını göstermek için bu ekranı bile geçemedi. 10 yıldızdan 2'si. Üzerine bir yüzük koyamazdım.

40. “Hesabımı Yükselt” Seçeneği / Akışı

Birçok SaaS ürünü için bunun ne kadar zor olduğunu aklımdan alıyor. Sesini kes ve paramı al. Bu kolay olmamalı mı? Gibi… KOLAY ?!

Tampon daha sonra oldukça basit bir form yükseltmek için bir menü öğesi vardır. Bam. Paramı aldın. Gidecek yol Buffer.

Mad Akar

Sonunda, önceki tüm şeyleri bitirmiş olacaksınız ve evde özgür olduğunuzu düşüneceksiniz - o zaman tam anlamıyla topunuzda ne kadar gurur duyduğunuzu görmek için eve gitmeye başlayacaksınız.

Sonra fikrinin yarısında eve dönüp, Camelbak'ından kombucha'yı yudumlarken, gelişmenin henüz başlamadığını hatırlıyorsun! # $% @

Geliştirme başladığında, yalnızca bir ekranın alay edilmesinin gerçekten hikaye anlatmadığını anlamaya başlayacaksınız (çok havalı, hepimiz tembel olmaya çalışıyoruz). Geliştiricilerin, bir kullanıcı deneyiminin ekrandan ekrana nasıl aktığını gerçekten çözmeniz gerekir.

41. “Adresimi Değiştir” Akışı

Şehir merkezinde şık ve yeni bir daire aldığınızda ve KENDİ KENDİNİZDEN HER KREDİ KARTI üzerindeki adresinizi değiştirmek zorundasınız.

Dhaval S. Gandhi, Aloe Vera'nın doğru yere sevk edildiğinden emin olmak istiyor.

42. “Kredi Kartı Ekleme” Akışı

Bazı insanlar (ahem, ben) dosyada yüz kredi / bankamatik kartı gibi tutmak isterler ki hırsızların seçebileceği çok fazla hesabı vardır. Bu yüzden kart eklemeyi kolaylaştırın. Bu konuda söyleyeceklerimin hepsi bu kadar.

Bu çok gerçek görünüyor, Carlos Medina. İlgisiz, sadece yeni ayakkabılar aldım ve çok ucuza gelmedi!

43. “Toplu Ekleme” Akışı

Sisteme hızlı bir şekilde nesne eklemek bir şeydir, ancak sisteme hızlı bir şekilde BUNCH OF OBJECTS eklemek için tamamen farklı bir şeydir.

Lütfen efendim, biraz daha alabilir miyim?

44. “Özel Filtre Oluştur” Akışı

Sofistike filtrelemeye izin verirseniz, bu karmaşık filtreyi daha sonra kaydetmek için bir yetenek eklemek güzel olabilir. Bu şekilde tekrar tekrar milyonlarca kez tıklamak zorunda kalmazsınız.

Oykun Yılmaz, kullanıcının bu filtreyi kaydetmesine izin vererek bir adım daha ileri gidebilirdi. Yap, Oykun!

45. “Alışveriş sepetine ekle” akışı

İnsanların bu akışı unuttuğunu düşünmek biraz komik, ama biliyorsunuz… ben o insanlardan biriyim. Kapa çeneni.

Anlaşılan Alberto Conti'nin 4 sandalyeye ve 4 yan masaya ihtiyacı vardı. Büyük bir ev olmalı ...

46. ​​“Bunu Paylaş” Akışı

Paylaşma çevrimiçi olarak her yerde yayılmıştır, ancak bu sizin için zaten tasarlandığı anlamına gelmez. Bunun için biraz zaman harcamak için tüm sebepler.

Tomek Kwiatkowski gerçekten sosyalleşmeyi biliyor.

47. “Varolanlardan Yaratın” Akışı

Bu tek bir işlemle “Kopyala + Düzenle” gibi. Temel olarak kullanıcı mevcut bir nesneden başlayabilir ve gerektiğinde güncelleyebilir.

Kyle Johnston bir sürü senaryo yazıyor. Belki gizlice Christopher Nolan?

48. “Birini Davet Et” Akışı

Ürününüze biraz “virality” eklemenin davetiye ve paylaşımdan daha iyi bir yolu yoktur. Sana bakıyorum Dribbble. Kolay, hızlı ve eğlenceli olduğundan emin olun!

Ben Paula Pintaric ve Christine uçağa biniyor. Ya da bir proje üzerinde çalışıyorlar ve diğer insanların uçtuğunu izliyorlar. Bu daha da kötü.

49. “Kullanıcı İzinlerini Değiştir” Akışı

Greg'i tanıyor musun? Dokunduğu her şeyi nasıl mahvettiğini biliyor musun? Evet, Greg’in bazı ayrıcalıklarını iptal etmek isteyebilir, böylece İnternet’in bütününü silmez. Aptal Greg.

Öte yandan, Matt Shwery… Greg'den çok daha beceriksiz bir kafa yorucu.

50. “Sil ve Kurtar” Akışı

SÜPER önemli bir şeyi sildiğinizde ve hemen geri almanız gerektiğini biliyor musunuz? Yok hayır? Peki.

Eric Tsai hepimizin hatalar yaptığını biliyor.

BONUS # 51. Animasyonlar

Tam açıklama, ben aslında bu kendimi unuttum. Bak, animasyonları seviyorum ama satışlar dün bir prototip yapmak istediğinde bunları geliştirme lüksüne sahip olduğumuz için şanslıyım ve geliştirme açılış sayfamın 8. adımında tamamen özlediğim bir şeye işaret ediyor. Ve dürüst olmak gerekirse, eğer animasyonlara ulaşırsak, sadece Dribbble veya CodePen'i incelerim ve geliştirmeyi ve "Böyle yap!" Demekten hoşlandığım bir şey gönderirim. Ben miyim?

Değilim.

özet

Muhtemelen bu makale için unuttuğum herşeyin bir listesini öfkeyle yazıyorsunuz. Lütfen yorumlarda bana hatırlatmaktan çekinmeyin. Tasarımcıların MVP ürünlerini tasarlarken hatırlamaları gereken milyonlarca şey veya bir kurumsal yazılım platformu için büyük özellikler var. Umarım bu en azından bir sonraki projenizde size hatırlatmaya yardımcı olacak kullanışlı bir referans olabilir.

Her küçük şeyi hatırlamaya çalışmadığımda (yaptığı sihirdir), sizi daha iyi ve daha verimli bir tasarımcı yapmak için UX Elektrikli El Aletleri'ndeki Sketch tasarım araçları üzerinde çalışıyorum. Burada daha fazla öğrenebilirsiniz:

UX Elektrikli El Aletleri'nı Twitter'da Takip Edin
Twitter'da beni takip et