24 Nisan 2014 Perşembe

Sketch App!

Sketch son zamanlarda oldukça popüler olan bir tasarım aracı. Şu an için sadece Mac OS işletim sisteminde var. Bu yazıda da bulduğum yararlı kaynakları paylaşmak istiyorum.



Uygulama çok hızlı çünkü arkasında python ve javascript çalışıyor. Her şey vektör! Yapılan işi web-tablet-mobil uyarlaması çok rahat ve hızlı.mJS ile yazılmış çok kullanışlı eklentiler mevcut ve günden güne artıyor.


Sketch’i anlamak! 

  • sketchcasts Portekiz’li thinkorange firmasının bir projesi Şu dört arkadaş videolar ile anlatıyor. Basit bir daire, üçgen çizmekle başladılar az önce altıncı bölümü izledim bir web sitesi için yapılan tasarımı tablet ve mobile uyarlamayı anlattılar. İlk üç bölüm ücretsiz idi fakat devamını izlemek için aylık 8$ gibi cüzzi bir ücret talep ediyorlar. Gayet faydalı konular anlatıyor, bu ücrete değer.
  • http://sketch-hero.com/ (henüz denemedim belki sonra.)
Kaynak dosyaların paylaşıldığı siteler:
Sketch ile yapılmış mobil, web, ikon vs. işlerin kaynak dosyaları aşağıda linklerde fazlasıyla mevcut.


Sketch için geliştirilmiş eklentiler

Symbols for Sketch eklentisi çok şahane bir olay. İzleyin anlayacaksınız







wayfinder a da bir bakmakta fayda var. Keza "Using Sketch 3 Like a Boss” demişler : )
http://wayfinder.co/pathways/535120a2129d0b11003e3659/using-sketch-3-like-a-boss

Sketch’de android için arayüz tasarlayıp uygulmaya dönüştürmek
http://quick.as/wzx8cb2m 

Peki ya frontendci .sketch’den anlar mı?
Şöyle ki tasarımda kullanılan görselleri, ikonları vs. kolayca dışarı aktarmak mümkün. Üstelik .svg, .png vs. formatlarda. 
E her şey vektör demiştik. Retina için x, 2x şeklinde export da mümkün. Bunun yanı sıra bir de sayfanın genelini vermek tabiki de faydalı olacaktır.
Daha önceki frontend tecrübelerimden düşünüyorum bu şekilde çalışmak hiç de fena olmaz.

1 Nisan 2014 Salı

Cihazlar için değil kullanıcılar için tasarlayın!


UX Mobile Immersion etkinliği 2013'den beri User Interface Engineering tarafından düzenleniyor. Bu yıl da 7-9 Nisan tarihleri arasında Denver, Colorado'da.

Bu yazıyı yazma sebebim ise ufak bir ayrıntı, etkinliğin mottosu! "Design for the User, Not the Device

Etkinliğin en güzel tarafı sunumlardan ziyade workshoplar. Bazı workshop konuları şunlar:

  • Responsive Web Design
  • Conducting Usability Research for Mobile Apps
  • Adapting Your Content for Mobile
Bu yıl ne yazık ki etkinliğe gidemiyorum. Fakat önümüzdeki yılı sabırsızlıkla bekliyorum.
Daha fazla detay için böyle buyrun.
Geçen yıl yaptıkları etkinlikle ilgili de şahane bir video hazırlamışlar, mutlaka izleyiniz.


Kullanılabilir Takvimler (Tatil, Uçak Bileti)

İnternetten uçak bileti veya tatil alırken en öncelikli işlerimizden biri tarih belirlemek. 

Genel kullanım aşağıdaki gibi. "kullanıcı gidiş inputuna tıklıyor takvim açılıyor tarihi seçiyor takvim kapanıyor dönüş inputuna tıklıyor ve aynı süreci yaşıyor". Bu yaklaşım kullanılabilir değil! Kullanıcı hızlı ve kolayca tarih seçemiyor.




Birleşik Takvim

Şöyle ki "kullanıcı bir inputa tıkladı takvim açıldı gidiş tarihini seçti takvim hala açık dönüş tarihi seçti ve kapandı"





Yukarıdaki takvim örneği kayak.com'dan. 

Böylesi basit ve kullanışlı geliştirmeler ile kullanıcılara daha iyi deneyimler yaşatmak mümkün.



1 Mayıs 2013 Çarşamba

Adwords vs. Kullanılabilirlik Testi


Bu yazının başlığını aşağıdaki gibi açmakta fayda var öncelikle;

"Adwords e harcanan para vs. Kullanılabilirlik testine harcanan para" 

    Sitelere trafik sağlamak için google reklamları önemli. Bir o kadar önemli olan bir diğer etken ise kullanılabilirlik. Şöyle ki gelen kullanıcının sitedeki davranışlarını incelemek ve buna göre arayüz de geliştirmeler yapmak kullanılabilirlik testleri sayesinde oluyor. 
     Aşağıdaki incelemede de ortalama bir reklam maliyeti ve ona denk bütçe ile yapılabilecek bir kullanılabilirlik testinin karşılaştırmasını yaptım.

Öncelikle google adwords tarafına bir göz atalım;

Adwords reklamları sayesinde sitelere daha fazla kullanıcı geliyor. E-ticaret, ürün karşılaştırma siteleri, otel ve uçak bileti satın alma servisleri bir çok web sitesinde en sağlam giderlerden biridir Google Adwords

Google adwords trafik tahmincisini kullanarak "kitaplık" anahtar kelimesi için aşağıdaki tıklama sayısı / maliyet oranını gösteren bir grafik elde ettim.



Grafiğe göre 42,80 tıklama ve 3729 gösterimin ortalama maliyeti 200,50 TL

Adwords de maliyetler böyleyken işin bir de kullanılabilirlik tarafına bakalım;
     
     Kullanılabilirlik testleri gelen trafiğin paraya dönüşmeyen kısmının neden dönüşmediğini sorusuna cevap olacak. Tüm bu süreçleri yakından bir kullanılabilirlik test ile görmek 200 TL (5 Kullanıcı x 40 TL) bütçeli ile bir test ile gayet mümkün.

     Bu iki karşılaştırmadan çıkardığım sonuç ise; "Google Adwords' e para harcanıyor iken kullanılabilirlik için ne yapılıyor ?" Kullanıcılar bir şekilde reklamlar sayesinde siteye ulaşıyor. Peki ya sonra? 


3 Ocak 2013 Perşembe

Mobil Sitelerin Kullanılabilirliği İçin İpuçları

Mobil siteler, akıllı telefonlar ve tablet ile vazgeçilmezimiz oldu. Neredeyse birçok websitesinin mobil versiyonu mevcut. Daha kullanılabilir mobil websiteleri için şunları söyleyebiliriz

  • Responsive bir tasarım olmalı


iPhone 4' ün ekran genişliği 3.5" iken Samsung Galaxy Note II 5.5" ekran genişliğine sahip. Tablet deneyimleri ise çok daha farklı olacaktır. İşte bu yüzden tasarımınız ekrana göre genişleyip daralabilmeli.

  • Vazgeçilmezimiz olan "Popup Formlar" 


Popup banner yada duyurular mobil deneyim için oldukça can sıkıcı şeyler. Eğer zaten responsive bir tasarıma sahip değilseniz kocaman bir çözünürlükte kullanıcı birkaç kez zoom yapıp popup ın sağ üst köşesindeki kapat butonu ile popup ı kapatmaya çalışacaktır. (Umarım orada kapat butonu vardır :) Ki ben bu zamana çok az kez kapatabildim bu formu. Muhtemelen popup a ait bir link oluyor o linke tıklayıp başka sayfa yönlendim. Birde popup form demişken...


  • Sayfalanmış içerikler

Sahip olduğunuz içeriği tek bir sayfada sunmak 3g hızını baz aldığımızda çok da sağlıklı olmayacaktır. Metinlerin yüklenme süresi ne kadar hızlı olsada görseller ile süslenmiş içeriklerin yüklenmesi fazla zaman alacaktır. Bu yüzden sayfalama (pagination) kullanmanız size mobilde daha hızlı erişim sağlar.

  • Orjinal görünüm

Sitenizin web versiyonuna gidebilmesi için link ekleyin. Mobil siteye bütün içeriğinizi sığdıramayacaksınız. Bu yüzden web versiyonuna gidebilmesi için bir link eklemenizde fayda var.

  • Metin ve görsel kullanımı

Kullanıcının sitenize girme amacı telefon numaranızı almak olabilir. Eğer siz metin olarak ihityaç duyulan kısımları yazmak yerine görsel koymayı tercih ettiyseniz adresinizi yada telefon numaranızı kopyalamak isteyen bir kullanıcı bunu yapamayacaktır. Bu da özünde basit bir kullanılabilirlik sıkıntısı gibi dursa da oldukça önemli. 

Zira smartphonelar beraberinde tembel beyinler getirdi bize. İki numarayı akılda tutamaz olduk : )

8 Ekim 2012 Pazartesi

Overlay' a tıklandığında kapanmayan popuplar

Popup formlar karşısında kullanıcı davranışı eğer ilgisine çekmeyen bir içeriğe sahipse genelde arkaplandaki gri alanı tıklayıp formu kapatarak işine devam etmekten yana. (Yazıyı yazmadan önce çevremdeki 5 kişini 4 ü overlay a tıklayacağını söyledi)

powerfm.com.tr i açtığınızda facebook like, twitter follow butonlarının olduğu bir  popup çıkıyor. Ve bu popup ı kapatmak için arkadaki gri kısma(overlay) tıklamanız fayda etmiyor. Çünkü burada kapatma işlevine sahip tek şey popup formun sağ üstü köşesindeki çarpı butonu.

Kırmızı alan popup çerçevesi.
Kırmızı ve en dıştaki mavi çizgi arasında kalan overlay.
(Not: Yazıyı birkaç gün önce yazmıştım şimdi yeniden baktığımda güncellemişler ve overlay e tıkladığınızda da kapanıyor. :) )


play.google.com da google da aynı şeyi yapıyor. Herhangi bir uygulamayı yükle dediğnizde popup form geliyor Overlaye tıkladığınızda popup form yine kapanmıyor. Sol altta iptal linkinden kapatabiliyorsunuz. Ama tabi burada içerik diğerine göre önemli yanlışlıkla kapatarak listede yeniden uygulamayı aramak can sıkıcı olabilir.




5 Ekim 2012 Cuma

Little Big Details

Little big details yani "Biraz büyük ayrıntılar",

Kullanılabilirlik sorunlar genelde ufak şeyler oluyor. Label e tıklandığında check olmayan checkboxlar, küçük ekran çözünürlükleri için düşünülemyen formlar, ikonlara çok fazla anlam yüklemek ve kullanıcıların bunu anlamaması vs..



http://littlebigdetails.com bu gibi kullanılabilirlik sorunları ve farkında olmadığımız daha kullanılabilir ayrıntılar ele alıyor. Basit ekran görüntüleri ile bize sunuyor.

Benimde android playstore için yaptığım birkaç gönderiyi yayınlamalarını bekliyorum : )