Geliştiriciler için Tasarım İş Akışı Eğitimi: Zamanında Daha İyi UI/UX Sunun

Editörün Notu: Lubos Volkov, kariyeri boyunca çok sayıda geliştiriciyle uzaktan çalışmış deneyimli bir tasarımcıdır. Toptal'da ürün tasarımcısı olarak Lubos, mühendislik, topluluk ve içerik dahil olmak üzere çeşitli departmanlardan ekip üyeleriyle günlük olarak etkileşime girer. İletişim becerileri başarısına katkıda bulunan yetenekli bir tasarımcı. Bu eğitimde Lubos, son teslim tarihine kadar veya daha önce teslim edilen kaliteli ürünlere yol açan tasarımcı-geliştirici UI ve UX iş akışlarını optimize etme deneyimlerini ve yollarını paylaşıyor.

Harika bir tasarımcı veya tasarım ekibiyle çalışmak, herhangi bir ekip için paha biçilmez bir varlık olabilir. Açık iletişim kanalları ve serbest akışlı işbirliği ile tasarımcı, yapım sürecini hızlandırmak ve soruları ve kafa karışıklığını mümkün olduğunca sınırlamak için ihtiyacınız olan her şeyi size vermelidir.

UX geliştiricisi olarak siz, oluşturduğunuz ürünün kullanıcı arayüzünün kalitesinden ve kullanıcı deneyiminden ödün vermeden zamanında teslim edilmesini sağlamak için ne yapabilirsiniz?

Cevabım: Tasarımcılarınızı ilk günden itibaren dahil edin ve tüm UI/UX geliştirme süreci boyunca onları dahil edin. Geliştiriciler ve tasarımcılar arasında net iletişim hatları ve tutarlı mesajlar oluşturduğunuzdan emin olun.

İhtiyacınız Olan Her Şeye Sahip misiniz?

Herhangi bir kullanıcı arayüzünün uygulanması sırasında olabilecek en kötü şey, __tasarımcı ve geliştirici arasındaki iletişim eksikliğidir __(aynı kişi olmadıkça). Bazı tasarımcılar, PSD gönderildikten sonra işlerinin bittiğini düşünüyor. Ama bu çok yanlış! PSD'lerin tesliminin ötesine geçen, her zaman açık bir iletişim iş akışı oluşturmalısınız.

Çoğu durumda, tasarımcıların gerçek UI/UX tasarım uygulamasını görmeleri zaman alacaktır. Şaşırtıcı bir şekilde, yapı genellikle ilk gönderimden tamamen farklıdır. (Bu bir kereden fazla başıma geldi. Kaynak dosyaları eksiksiz açıklamalar ve etkileşim prototipleri ile gönderdim, ancak projeyi nihayet gördüğümde, aylar sonra, farklı bir düzen, farklı renkler ve yerinde etkileşim yoktu.)

Bu tasarım iş akışı, kendi taraflarında çok fazla “ekstra” çalışma gerektirdiğinden, bazı tasarımcılar bunun için benden nefret edebilir. Bununla birlikte, eksiksiz varlıkları ve bilgileri organize bir şekilde oluşturmak ve iletmek, proje ve bir bütün olarak ekip için daha iyidir.

Bir geliştiricinin ihtiyaç duyduğu her şeye sahip olması, süreci hızlandıracaktır. Temiz bir PSD yeterli değildir.

İşi etkili ve verimli bir şekilde yapmak için neye ihtiyacınız var?

Bir geliştiricinin, bir UI/UX tasarımını uygulamaya geçirmesi için tasarımcıdan beklemesi gereken varlıklar şunlardır:

• Kaynak dosyası - Tasarımcı, uygulamanın her öğesini tek bir dosyaya yerleştirmelidir. Bu dosya, düğmeler, onay kutuları, başlık stilleri, yazı tipleri, renkler vb. içermelidir. Temel olarak, bu dosyadaki bilgilere dayanarak, geliştirici herhangi bir arayüzü sıfırdan yeniden oluşturabilmelidir. Bir geliştiricinin herhangi bir öğeyi tek bir PSD'den dışa aktarması, bunun için birden çok dosya aramaktan çok daha kolaydır.

• Varlıklar - Kaynak dosyalara artık dokunulmaması gerektiğinden, geliştiricilerin gerekli tüm varlıkları aldığından emin olun.

• Etkileşim prototipleri - "Statik ekranlar" günleri çok geride kaldı. UX tasarım iş akışını ve uygulamasını sorunsuz hale getirmek için akıllı etkileşimler ve animasyonlar kullanmak artık yaygın bir uygulamadır. Ancak, bir geliştiriciye “bu soldan kayar” diyemezsiniz. Tasarımcı, bu etkileşimin gerçek prototipini oluşturmalıdır. Prototip hız, hız vb. bilgileri içermelidir ve tasarımcının bu değerlerin her birini belirtmesi beklenir.

• Adlandırma kuralı - İşleri düzenli tutmak için bir dosya adlandırma yapısı isteyin. İkinizin de dosyalarda gezinmesini kolaylaştıracak. (Kimse bir arka plan klasöründe gizli şeyler olmasını sevmez.)

• HDPI Kaynakları - Ekranların muazzam yoğunluğu ile “zor zamanlar” yaşıyoruz. Tasarımcının görüntüleri gerekli tüm çözünürlüklerde sunacağından emin olun, böylece uygulamanız her yerde gevrek görünecektir. Not: mümkün olduğu kadar çok vektör kullanın; sana çok yardımcı olacak (svg).

Uygulama sırasında eksik bir şey bulursanız korkmayın; tasarımcıya ping atın ve isteyin. Asla atlamayın ve asla eksik etmeyin! Siz aynı ekibin üyelerisiniz ve işiniz mümkün olan en iyi ürünü sunmak. Bir tasarımcı başarısız olursa, siz de başarısız olursunuz.

Devam Eden Çalışma

UI/UX geliştirme sürecinde tasarımcılarınızdan yararlanın. Onları sadece "pikselleri itmelerini" bekleyerek kenarda tutmayın. Bir tasarımcı, uygulama başlamadan önce olası yenilikleri görür. Bundan yararlanmak için onları döngüde tutun. Devam eden işi görmeleri ve test etmeleri için onlara erişim sağlayın. Kimsenin yarım kalmış projeleri paylaşmaktan hoşlanmadığının farkındayım. Ancak, bir yapının ortasında değişiklik yapmak, sonunda yapmaktan çok daha kolaydır. Bunu yapmak size zaman kazandırabilir ve gereksiz işleri önleyebilir. Tasarımcıya projeyi test etme şansı verdiğinizde, ondan bir sorun ve çözüm listesi hazırlamasını ve iyileştirmeler önermesini isteyin.

Bir geliştiricinin, bir uygulamanın görünümünü değiştirecek bir fikri olduğunda ne yapmalı? Bunu tasarımcıyla tartışın ve bir geliştiricinin tasarımcıya danışmadan tasarımı değiştirmesine asla izin vermeyin. Bu tasarım iş akışı, yapının yolunda kalmasını sağlayacaktır. Harika bir tasarımcının ekrandaki her öğe için bir nedeni vardır. Neden orada olduğunu anlamadan tek bir parçayı çıkarmak, ürünün kullanıcı deneyimini mahvedebilir.

UI/UX Tasarım Proje Yönetimi

Tasarımcılar, geliştiricilerin bir tasarımı bir günde, hatta bir saatte hayata geçirebileceğini düşünüyor. Ancak, harika tasarım gibi, harika geliştirme de zaman ve çaba gerektirir. Yapının ilerlemesini görmesine izin vererek endişeli tasarımcınızı uzak tutun. Her revizyonun dikkate alındığından emin olmak için harici proje yönetimi yazılımı kullanmak, bir e-posta görüşmesinde veya bir Skype oturumunda tartışılan önemli bilgileri kaçırmadığınızdan emin olmanın harika bir yoludur. Ve dürüst olalım: bazen değişiklikler ve faaliyetler gerçekleşene kadar iletilmez.

Hangi çözümü kullanırsanız kullanın, tüm ekibin benimseyeceği ve tutarlı bir şekilde kullanacağı bir iş akışı süreci seçtiğinizden emin olun. Ekibimizde Basecamp'ı zorlamaya çalıştım çünkü kullandığım şey buydu, ancak ön uç geliştiricilerimiz sınırlı özelliklere sahip olduğunu düşündü. Hataları, ilerlemeyi vb. izlemek için JIRA, GitHub ve hatta Evernote gibi başka proje yönetimi yazılımlarını zaten kullanıyorlardı. Proje takibi ve yönetiminin olabildiğince basit tutulması gerektiğini anladım, bu yüzden UI tasarım iş akışımı JIRA'ya taşıdım. İş akışımı ve ilerlememi anladıklarından emin olmak istedim, ancak tasarımın yönetilmesi gereken başka bir şey olduğunu düşünmelerini istemedim.

Bir proje yönetim aracı için birkaç öneri:

• Basecamp - Tasarım ve geliştirmeyle ilgili görevlerin ilerlemesini izler ve görevleri kolayca dışa aktarmanıza olanak tanır. Ayrıca basit bir mobil istemciye sahiptir.
• JIRA - Farklı alanlar için kolayca özel panolar kurabileceğiniz tamamen özelleştirilebilir bir platform. Örneğin, back-end, front-end, tasarım vb. aktiviteleri takip etmek için panolar düzenleyin. Mobil istemcinin biraz zayıf olduğunu düşünüyorum ama daha büyük ekipler için harika bir çözüm ve hata takip özelliği içeriyor.
• E-posta - Bu, bir görüşme ayarlamak veya resim göndermek için harikadır. Ancak geri bildirim için e-posta kullanıyorsanız lütfen dikkatli olun . Eşyalar kolayca kaybolabilir.

Trello ve diğer proje yönetimi yazılımlarını da deneyebilirsiniz, ancak sektörümüzde en yaygın olarak kullanılanlar Basecamp ve JIRA'dır. Yine, en önemli şey, herkesin tutarlı bir şekilde kullanabileceği bir proje yönetim sistemi bulmaktır, aksi halde bu bir tartışma konusudur.

UX Tasarım ve Geliştirme Bir Araya Geliyor

Tasarımcı ve geliştirici güçlü bir kombinasyondur. UI ve UX üzerinde mümkün olduğunca sık beyin fırtınası yaptığınızdan emin olun. Geliştiriciler, bir tasarımcının fikirleri tasarlamasına yardımcı olmaya istekli olmalı, bir tasarımcı ise kullanılan teknoloji hakkında en azından temel bir bilgiye sahip olmalıdır.

Tasarım iş akışını birlikte belirleyin. Tasarımcılarınızın yarattıklarını körü körüne uygulamayın. Proaktif olun ve iki farklı bakış açınızdan yararlanarak güzel görünen ve harika bir kullanıcı deneyimine sahip bir şey yaratın. Tasarımcılar alışılmışın dışında düşünür ve çılgın animasyonlar, fikirler, pikseller ve düğmeler görürken geliştiriciler teknolojiyi, tümsekleri ve sınırları görür.

Tecrübelerime göre, her tasarımcı pikseller ve ilginç konseptler için deli oluyor. Ancak bazen bir tasarımcı, bir fikri olduğu bir noktaya gelir, ancak geliştirici geri döner ve “Uygulandığında bu iyi çalışmayacak. Performans tüketimi sorunları olacak”. Son zamanlarda, arka planı bulanık olan kalıcı bir pencere uygulamak istiyordum, ancak bu bulanıklık ağır yükleme sürelerine neden oldu. Bu sorunu çözmek için geliştirici, daha hızlı yüklenen ve görüntü kalitesini koruyan normal, tam renkli bir kaplama kullanmayı önerdi. Tasarımcılar dikkat: Tasarım için kullanıcı deneyiminden ödün vermeyin.

Geribildirim döngüsü

Tasarımcıdan gelen geri bildirim çok önemlidir ve bunun mümkün olduğunca sık olması gerekir. Muhtemelen yapacağınız en çok zaman (ve enerji) tüketen şeydir. Ancak, mükemmel sonuçlar elde edebilmek için onu benimsemeniz gerekir. Geri bildiriminizi nasıl mükemmel hale getireceğinize dair birkaç UX ve UI tasarım iş akışı ipucunu burada bulabilirsiniz.

• Görsel olun - Geri bildirimin mümkün olduğunca spesifik olması gerekir. Bunu doğru yapmanın en iyi yolu, basit bir ekran görüntüsü almak ve düzeltmek istediğiniz bir sorunu vurgulamaktır. Mevcut bir uygulamanın nasıl görünmesi gerektiği ile ilgili bir fotoğrafınız olsaydı daha da iyi olurdu. Görsel iletişim soruların %50'sini ortadan kaldıracaktır.

• Açıklayıcı olun - Geri bildirim doğru olmalıdır. Sadece “bu düğmeyi yukarı taşı” diyemezsiniz. Tasarımcı, bir düğmenin kaç piksel hareket etmesi gerektiğini, hangi dolgunun kullanılması gerektiğini vb. belirtmelidir. Her zaman sorunun bir açıklamasını ve buna uygun çözümü ekleyin. Çok zaman alacak ama buna değer.

• Sabırlı olun - Tasarımcı ve geliştiricilerin aynı odağı paylaşmadığını unutmayın. Geliştiriciler bir tasarımcının fikrini tam olarak anlamazlarsa, bu durum kafa karışıklığına ve kötü kararlara yol açabilir. Her durumda, her iki tarafın da sabırlı olması ve diğer ekip üyelerine yardım etmeye istekli olması gerekir. Bazen gerçekten zor olabilir, ancak her tasarımcı ve geliştiricinin öğrenmesi gereken yumuşak bir beceridir.

Bunları uygun bir tasarım iş akışına dönüştürmek için bunların bir araya getirilmesi gerektiği oldukça açık. Ancak, geri bildirimi iletmenize gerçekte hangi araç yardımcı olabilir?

• E-posta - Bunun geri bildirimi iletmek için hala en yaygın platform olduğunu söylemekten çekinmiyorum. Birkaç basit kuralı takip edecekseniz, onu kullanmak tamamen iyidir.
  • İlk olarak, geri bildiriminiz için tek bir e-posta dizisi kullanın. Her ince ayarı farklı bir konuya sahip yeni bir e-postaya koymayın.
  • İkinci olarak, düzeltmelerin listesini oluşturun. Oturup fark ettiğiniz her ince ayar veya düzeltmeyi düşünmeye çalışın.
  • Ve son olarak, bir kerede büyük bir liste göndermeyin. Daha küçük bireysel listelere ayırmaya çalışın ve parça parça ilerleyin.

• Skype (Hangouts) - Ses, geri bildirim için gerçekten güçlü bir araçtır. Soruları hemen sorabilir ve cevaplayabilirsiniz. Ancak, görüşmeden sonra not aldığınızdan ve takip mesajı (e-posta) gönderdiğinizden emin olun.

• İşbirliği araçları - Dürüst olmak gerekirse, işbirliği araçlarının büyük bir hayranı değilim. Ancak, büyük bir faydaları var. Geri bildirimi yerinde tutmanıza yardımcı olurlar. Soru sormak ve cevaplamak hızlıdır ve sonsuza kadar orada kalır.

İşte harika araçlardan bazıları:

Geri bildirim ek açıklaması:

• https://redpen.io/
• http://collabshot.com/
• http://www.designdrop.io/

Işbirliği araçları:

• http://www.invisionapp.com/
• https://basecamp.com/

Çözüm

Tasarım ve geliştirme süreci boyunca iletişim hatlarını açık tutan bir sistem ve UI/UX tasarım iş akışı oluşturun. Bu, harika fikirleri uygulamanıza, olası sorunları tahmin etmenize ve önemli sorunları öncelik sırasına koymanıza olanak tanır.

Geliştirici ve tasarımcı, ekip olarak çalışmaya istekli oldukları sürece birlikte harika şeyler yaratabilirler. Birbirinizden öğrenin ve bunun gibi öğreticiler tasarlayın!