Usable Front-end

UX Kafe

From UX/UI design to Front-end development, missing or ignored requirements...

Presentation Language: Turkish

Transcript

1. Usable Front-end 4 Aralık / UX Kafe
2. Bilal Çınarlı Senior UX Developer / Front-end Architect @Turkcell
 @bcinarli bcinarli.com htmlmag.com
3. UX/UI Tasarımcı’nın Süreci
4. Kullanıcı - İhtiyaç Analizi
5. • UX/UI yapılan işi hem front-end aşamasında hem de back-end entegrasyon aşamasında kontrol etmeli • UX/UI genel alışkanlıklar dışında bir uygulama/etkileşim geliştireceğinde front-end ile prototipleme yapıp etkileşimi test etmeli
6. Arayüz Geliştirici’nin Süreci
8. • Tasarım’dan entegrasyona süreç içerisinde • UX/UI’ı yönlendirir • Back-end’i yönlendirir
9. Gerçek Veri ile Çalışmamak
10. • “İdeal içerik, lorem ipsum”
11. • “Abi boş hali nasıl olacak?”
12. • “Grafik çok şık durmuş”
13. • “Grafik için çok küçük bir değer çıktı” • “Bu ay yeni bir kayıt daha geldi”
14. Style Guide ya da Varyasyon Hazırlamamak
15. • Buton aksiyonları • Kullanılan font türleri ve boyutları • Liste, tablo stilleri Sayfa Elemanları
16. • İsimlendirme • Gruplama • Layer comps • Sketch objects Uygulamaların gözardı edilen özellikleri
18. Geliştirme Süreci
19. • Back-end kısıtlarının netleştirilmesi • Uygun arayüz mimarisinin seçilmesi • Uygun framework seçimi Kısıtların / Tercihlerin Belirlenmesi
22. Overwriteler
23. Mobil First? Desktop First?
24. UI Kitlerin dikkatsiz kullanımı
25. Kötü Kod
26. <div  class="btnRightWrapper">     <a  onclick=";;reValidatePage('');;;"  id="ctl00_theNavigationButtons_ctl02"           class="linkbutton"       href="javascript:__doPostBack('ctl00$theNavigationButtons$ctl02','')">       <div  class="kaydetBtn  aktif">         <div  class="kaydetLeft"></div>         <div  class="kaydetMid">Kaydet</div>         <div  class="kaydetRight"></div>       </div>     </a>   </div>
28. <a  href=“/save"    id=“submit"  class="button">Kaydet</a>   $("#submit").on('click',  function()){       reValidatePage();     });
29. Mobil Dünya’yı Gözardı etmek
30. • Tablet kullanımını dikkate almamak • Hover menülerde tap desteği • Text linklerde hit alanı • Radio/Checkbox/Select görünümü ve native halleri Mobil Erişim Heryerde
31. Pratik Yöntemler
32. Tap için hover menu    <nav  role=“navigation”>              <ul>                      <li><a  href=“#”>About</a></li>                      <li><a  href=“#”>Services</a>                              <ul>                                      <li><a  href=“#”>Digital</a></li>                                      <li><a  href=“#”>Print</a></li>                                      <li><a  href=“#”>Outdoor</a></li>                              </ul>                      </li>                      <li><a  href=“#”>Portfolio</a></li>                      <li><a  href=“#”>Contact</a></li>              </ul>      </nav>    <nav  role=“navigation”>              <ul>                      <li><a  href=“#”>About</a></li>                      <li><a  href=“#”  aria-­‐haspopup=“true”>Services</a>                              <ul>                                      <li><a  href=“#”>Digital</a></li>                                      <li><a  href=“#”>Print</a></li>                                      <li><a  href=“#”>Outdoor</a></li>                              </ul>                      </li>                      <li><a  href=“#”>Portfolio</a></li>                      <li><a  href=“#”>Contact</a></li>              </ul>      </nav>
33. Hit Alanını parmak için genişletme    .link  {              padding:  2px;      }
34. Erişilebilirlik
35. • Label’ların form elemanlarını focuslaması • Aria attribute kullanımı • Outline’ın kaldırılması • Mikroformatlar
36. Pratik Yöntemler
37. <label  for=“name">İsim</label>   <input  type=“text"  id=“name"  />   <label><input  type=“checkbox"  value=“yes"  />  Evet</label>   <label><input  type=“checkbox"  value=“no"  />  Hayır</label>  
38. FE sürecini iyileştirme
39. • Standart oluşturma • Testler • Eğitimler • Talep Oluşturma • Yaygınlaştırma Süreci Olgunlaştırma
40. Sözün Özü
41. • Bilgi eksikliği • Üşengeçlik • İletişim eksikliği • Sonra yaparız • İş acildi Problemlerin temel kaynağı
42. Teşekkürler Bilal Çınarlı @bcinarli