Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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. • 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
  2. • İsimlendirme • Gruplama • Layer comps • Sketch objects

    Uygulamaların gözardı edilen özellikleri
  3. • 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
  4. <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>
  5. • 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
  6. 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>
  7. Hit Alanını parmak için genişletme    .link  {    

             padding:  2px;      }
  8. <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>  
  9. • Standart oluşturma • Testler • Eğitimler • Talep Oluşturma

    • Yaygınlaştırma Süreci Olgunlaştırma
  10. • Bilgi eksikliği • Üşengeçlik • İletişim eksikliği • Sonra

    yaparız • İş acildi Problemlerin temel kaynağı