$30 off During Our Annual Pro Sale. View Details »

Usable Front-end

Usable Front-end

UX Kafe

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

Presentation Language: Turkish

Bilal Çınarlı

December 04, 2014
Tweet

More Decks by Bilal Çınarlı

Other Decks in Programming

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

  7. None
  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
  17. None
  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
  20. None
  21. None
  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>
  27. None
  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