Mental Model İle Uyuşmayan Arayüzler

Mental ModelMental model kısaca kullanıcının kafasındaki bir işin nasıl yapılacağı düşüncesidir. Mesela bif foruma girdiğinizde mesaj yazmak için üye olmanız gerektiğini bilirsiniz. Alışveriş sitesinde sepete eklemeyi, sonra adres bilgilerini verip ödemeyi yapmayı beklersiniz. Bunlar kullanıcının mental modelidir. Yani “bu nasıl çalışıyor?” sorusunun cevabıdır.

Kullanıcı arayüzü tasarlarken en çok dikkat edilmesi gereken şeydir. Burada grafik tasarımdan bahsetmiyorum. Bir işlevi tasarlarken kullanıcıların bunu nasıl algılayacaklarını da düşünmelisiniz.

Geçenlerde android telefonuma bir e-dergi indirdim. Adigo programı vardı döküman görüntüleyici, neyse açtım. Sola çektim, sola çektim ama hareket yok. Elimi rastgle salladım acaba dondu falan diye, bir baktım sayfa değişti. Sonra sayfa değiştirme için kolay algılanabilen şekilde yavaşça çektim ama olmadı, sayfa değişmedi. Meğerse ekranın sağına tıklayınca sayfa ileri, soluna tıklayınca geri gidiyormuş. Ama o an benim kafamdaki o değildi. iPad’den alıştığım şekilde yapmaya çalışıyordum.

En sonunda doğru yolu fark ettim. O da daha önceki bir programdan deneyimim sayesinde oldu. Burada yanlış olan ne? İlla benim bildiğim gibi mi yapsalardı? Tabi ki hayır. Ama program ilk kurulduktan sonra bana sayfa geçiş ipuçlarını gösterebilir. Kaydırdığımda da uyarı verebilir. En önemlisi kaydırma efektini de ekleyebilirdi. Online kataloglar falan da aynı çevirme efekti ile oluşturulur. iBooks keza sayfa çevirme efekti sunar.

Online AlışverişKullanıcı bu şekilde daha iyi kullanır diye diretirseniz yönteminiz mevcut alışkanlıklardan daha iyi ve öğrenilebilir olmalıdır. Öğrenebilir demek, öğretme ihtiyacı doğurmaz. Sezgisel yollarla, yani eski tecrübeleri ile sizin arayüzünüze adapte olabilir. Sonuçta koskoca ofis programını öğreniyor insanlar. Gerçek hayatta, özellikle rekabetin git gide arttığı bir durumda insanlar vakitlerini harcamazlar.  Kullanıcı işini bitirip siteden çıkmak ister, sizin arayüzünüzü öğrenmeyi değil.

Fazlasını Oku

Son Kullanıcı Gerçekte Neler Yaşıyor

Bu soruyu hep merak etmişizdir, anlamaya çalışmışızdır. Tahminlerimiz olmuştur, izlediğimiz insanlardan belli tecrübeler edinmişizdir. Ama kullanıcı gerçekte ne yaşıyor? Bundan 2 yıl önce yazdığım e-ticaret yazılımı vardı. Bunu kullanarak bir site yapıyoruz. Ürünlerin de bizim tarafımızdan girileceğini duyunca çok gerilmiştim ama sonucunda buna sevindim, çünkü bana çok şey öğretti.

Yazılımda sınırsız alt kategori eklenebiliyor. Bir kategorinin içine girip alt kategorileri ekliyorsunuz, sonra onların alt kategorilerini vs… Ben her kategori listelemesinde yeni bir http isteği yapmışım. Ürün ekleme bağlantısına tıkladığınızda karşınıza bu kategori sayfası çıkıyor. İstediğiniz kadar alt kategorilere gidip ürün ekleyebiliyorsunuz. İster en üst kategoriye eklersiniz, ister son kategoriye. İkisine de izin veriyor sistem. Bizim 3. seviye alt kategorilere eklememiz gerekiyordu. 1000 civarı da ürün vardı fotoğrafları ile birlikte.

Her seferinde ilgili kategoriye gitmek için 3 defa tıklamam ve sayfanın gelmesini beklemem gerekiyordu. Her defasında bunu yapıyordum, bağlantımız da kota yüzünden düşmüş ve hızlı değil. Bu işkenceye dönüştü. O anda bir son kullanıcıydım. Programlama ile müdahale edecek zamanımız da yoktu.

Bir sistemi kullanılabilir yapmak için kullanıcıların ne yapabileceklerini iyi kestirmek gerekiyor. Eğer kullanıcı tek seviyeli bir kategori ağacına sahipse bu sorun öne çıkmıyor. Ben sadece ürünleri ekledim. Peki silmesi, düzenlemesi ne durumda? Onlar da bu kadar kullanışsız mı? Bilmiyorum.

Ama kötü tasarlanmış arayüzler kullanıcılara yapılmış çok kaba bir hakarettir.

Fazlasını Oku

Neden Arayüz Tasarımları veya Elemanları Paylaşıyorum

Bu sorunun cevabı kısa ve net; tasarımcı nazı çekmemek için. Bu iş arkadaşım 1 ayda bir sayfa çizilmez. Sırf bunların büyülerini bozmak için tasarım elemanları topluyorum ve güzelce kullanıyorum. En azından maliyet ve zamandan tasarruf ediyorum.

“Programcılar için arayüz tasarımı” diye bir kitap da var. İngilizceniz varsa süper. Tavsiye ederim.

Bir de gidin 2 css öğrenin. Boyama kitabı gibi tasarımlar yapmayın, o tasarımlar css’ye dökülecek sonuçta.
http://www.amazon.com/User-Interface-Design-Programmers-Spolsky/dp/1893115941

Fazlasını Oku

Hiç Kullanmadığınız Bir Şeyi Tasarlamak

Arayüz tasarımı yapıyorsanız bunu birileri kullanacak demektir. Her kullanıcı farklı deneyimlerle arayüzünüzü kullanacak. Kimisi office programında usta, kimisi programcı, kimisi bakkal, kasap olacak.

Bir arayüz tasarladıktan sonra kesinlikle onu kendimiz de kullanmayı denemeliyiz. Tabi makul olanı kullanıcı testleri yapmaktır ama her bütçede proje için bu mümkün olmuyor. Ama benim tavsiyem abinizi, ablanızı, kuzeninizi, arkadaşınızı arayüzler kullanırken izleyin. Ne kadar farklı davrandıklarını göreceksinizdir. Hiç beklenmedik ve şaşılacak hareketler yapabiliyorlar, ben şahit oldum.

Aşağıdaki grafik bir psikiyatri merkezinden alınma. Randevu alınmak için gerekli numaraları göstermeye çalışıyor. Toplamda 3 adet numara var. Bu numaraları tek tek rakamlar düşecek şekilde animasyonla düşürüyor ve kısa bir süre sonra diğer numarayı düşürmeye başlıyor.

Ben buradaki numarayı telefonda tuşlamaya çalışırken 2 defa animasyonun başa gelmesini bekledim. Çünkü numaralar tek tek düşüyor siz yazarken (özellikle dokunmatik klavye ile) diğerleri düşüyor ve kayboluyor. Bunu bir defa kullanmayı deneseydi herhalde hatayı önceden görebilecekti. İşte yine siteye hareket katılması için yapılan rezilliklerden biri.

Web sitelerindeki metinletin, grafiklerin neden böyle uçuşup saçıldığını hiç anlayamadım. Bunun sebebi durağan sayfalardan animasyon destekli teknolojilere geçildiğinde bir görmemişlik yaşandı. Sırf yapılabiliyor diye insanlar animasyon yapıyorlar üstelik bu kullanımı daha da zorlaştırıyor bazen, hatta düşük konfigürasyonlu bilgisayarlarda sorun çıkarabiliyor.  Bunları 4 sene önce de konuşuyorduk ama hala bunu aşamayanlar var.

Ben sizin kullanabildiğiniz arayüzler yapın demiyorum. Siz zaten çok komplike arayüzleri kullanabilirsiniz. Ama en azından bir deneyin, siz biraz da olsa sorun yaşıyorsanız son kullanıcı neler yapmaz.

Fazlasını Oku

Zaman Zaman

Tasarım olgusunun ne kadar “trend” bir şey olduğunun kanıtı. Tasarım ile ilgili bir yayın, kitap genelde döneminin tasarım trendlerini yansıtır. Bu örnekteki bir web tasarım eğitim programı. Günümüzün tasarım trendlerinden ne kadar farklı değil mi?

Bunu zamanında biz okuyorduk. Belki de arkadaşımın dediği gibi “tasarımını çıktı alıp yastığımın altına koyardım”. O zamanlar belki de çok havalıydı. Yeni yetişen tasarımcılara “vay anasını” dedirtiyordu.

Kullanıcının ihtiyaçlarından çok kendi tasarım zevklerini yerine getiren tasarımcılar, bugün tasarladığınız şeyler belki 10 sene sonra size de çöp gibi gözükecek. Ama kullanılabilir, amaca uygun bir arayüz her zaman işe yarar.

Kullanılabilir bir arayüz tasarımının modası geçmez mi? Elbette geçer, dün bilgisayar kullanıyorduk, bugün tablet, akıllı telefon. Dokunmatin deneyimi kullanılabilirlik adına çok şeyi değiştirdi. Ama sadece uygulamada değiştirdi. Temel felsefe yine aynı.

Mantık şu; eğer güzel gözüken ama kullanışsız bir sayfa tasarlarsanız, bugün de kullanılabilir değildir, yarın da kullanılabilir olmayacaktır. Ama bugün kullanılabilir bir arayüz tasarımı en azından bugün kullanılabilir olacaktır.

Fazlasını Oku

Natural User Interfaces

“Doğal kullanıcı arayüzü” olarak çevrilebilir. Genel anlamda kullanıcı arayüzlerinin gerçek hayatta beklenen şekilde tasarlanması ve davranmasıdır. Realism, kullanıcı arayüzlerinin gerçek hayattaki karşılıkları şeklinde olmasını önerir. Yani bir DJ yazılımı arayüzü, DJ konsolu gibi tasarlanabilir, bu da kullanıcıya çok tanıdık gelir ve arayüze çok hızlı adapte olur.

Doğal kullanıcı arayüzünden beklenen ise; arayüzün gerçek hayattaki gibi tasarlanması ve aynı zamanda gerçek hayattaki gibi tepki vermesidir. Klasik kullanıcı arayüzleri gerçek nesnelerden ziyade temsili imajlar içerir. Mesela gerçek hayatta bir link’e tıklayamayız veya resmi farklı kaydedemeyiz. İlk kullanıcı arayüzleri komut istemcileri idi. Komutların ve yazım şekillerinin ezberlenmesi gerekiyordu. Klasik kullanıcı arayüzleri ise komutlara karşılık gelen imajlar, nesneler ile işlevleri yerine getirir.

Direct Manipulating, kullanıcı arayüzlerinin gerçek hayattaki karşılıklarına benzer şekilde davranması, tepki vermesidir. Bir butona bastığınızda görünümünün değişmesi veya ses çıkarması örnek verilebilir. Kullanıcı arayüzleri gerçek hayattakine yakın hızda tepki vermelidir.

Fazlasını Oku

Arayüzde Realizm

Kullanıcılar web sitemize geldiklerinde “sıfır” deneyim ile gelmiyorlar. Bilgisayar dışındaki hayatlarında butonlara basıyor, sifonu çekiyor, kitap okuyor, müzik sisteminin sesini açıyor vs..

Kullanıcıların daha önce edindikleri deneyimleri tasarımda kullanmak çok yararlı olabilir. Eğer bir müzik dinleme sayfası hazırlıyorsanız medya oynatıcılara benzer bir arayüz oluşturabilirsiniz. Kullanıcının mental modeli üç aşağı beş yukarı bellidir. “Müzik dinlemek”. Peki bu görevi nasıl yerine getirecek? Sık kullanılan bir medya oynatıcının arayüzüne benzer bir arayüz tasarlarsak, bilgisayarında müzik dinleyen herkesin mental modeline uygun bir arayüz sağlamış oluruz.

Tabi şöyle bir durum da var; eğer gerçek hayattan gelen arayüz elemanları kullanıyorsanız, bu elemanlarla etkileşim gerçek hayattakine benzer olmalıdır. Eğer öyle olmazsa bırakın kullanıcının mental modeline uymayı, daha da kötü bir deneyim sunarız. Ayrıca gerçek nesnelerin bazı kısıtları vardır. Mesela bir ajandaya yarım gün doluyum yazınca, size 4 boş saatiniz var yazamaz. Ama online bir ajandada bu fırsat vardır. Ve bunun gibi bir çok fırsat. Böyle durumlarda ajandanın gerçek hali yerine modifiye edilmişini kullanmak daha mantıklı olacaktır.

Peki herhangi bir arayüz tasarlarken gerçek hayattaki unsurlara mı dikkat etmeliyiz, yoksa kendi özgün arayüzlerimize mi? Örneğin bir select box elemanını sevelim ya da sevmeyelim. Bilgisayar kullanabilen çoğu kişi bu kontrolü kullanmayı bilir.

Gerçek hayattan ikonlar kullanıyorsak bu ikonlar çok gerçekçi olmamalıdır. Örneğin 16×16 bir kalem ikonu düzenleme anlamına gelse de. 50×50 gerçek kalem resmi farklı bir çağrışım yapabilir.

Fazlasını Oku

Arayüzde Tutarlılık

Tutarlılık genel anlamda kullanıcıların beklediği şekilde arayüzler tasarlamaktır. Eğer kullanıcılar butona tıkladığında bir şey oluyorsa, her zaman böyle olacağını düşünürler. Butonun bir işlevi yerine getirdiği düşünülür. Eğer kullanıcıya sürüklemesi için bit buton verirseniz bu gerçekten kafa karıştırıcı olur.

Arayüzleri tutarlı yapmak için; sık kullanılan ürünlerin arayüzlerini örnek alın ve arayüzlerinizin de kendi aralarında tutarlılığı olsun. Eğer standardın dışına çıkacaksanız tamamen çıkın. Sürüklenecek bir elementi buton yapmayın, bunun yerine uygun bir imaj koyun. Bu kullanıcının buton davranışı beklemesini engeller.

Fazlasını Oku

Kullanılabilirlik : Modlar

Kullanıcı arayüzleri bazen çok karmaşık olabilir. Eğer sunmak istediğiniz işlevler fazlaysa bu kaçınılmazdır. Bu tür durumlarda modları kullanılırız. Bilgisayar sistemlerinin de kendine has modları vardır. Mesela caps lock tuşu ve num lock tuşu gibi.

Kullanıcı veri girerken caps lock açıksa ve kullanıcının bundan haberi yoksa hatalı şifre girmiş olacaktır. Bir uygulama ya da pencere modu açık olmalıdır. Kullanıcı hangi mod ile çalıştığını bilmelidir.

Diyelim müşterileri listeleyen bir sayfanız var ve burada her müşteri için aktiflik pasiflik butonu var. Aktiflik butonu yeşil ok butonu, pasiflik ise kırmızı dur butonu. Bir müşteriye baktınız, yeşil ok butonu var. Bu buton müşterinin mevcut durumunu mu gösteriyor yoksa tıklandığında gereçekleştireceği işlevi mi?

Modlar doğru kullanıldığında arayüzün karmaşıklığını giderir. Fakat kullanırken çok dikkatli olunmalıdır.

Fazlasını Oku

Teknosa Tasarım Değiştirmiş

Teknosa İnternet sayfasının tasarımını değiştirmiş. Eskisinden daha güzel kabul ediyorum. Çok da inceleme fırsatım olmadı açıkçası. Sadece güncel mp3 çalar fiyatlarına bakayım dedim.

Sony markasını seçtim, 40 tane ürün olduğunu söyledi. Sayfa başı 10 adet ürün gösteriliyor. İlk sayfayı aşağı kadar inceledim ve sayfalama numaralarını aradım. Bakınca gördüm ki üst kısımdaymış. Ben ürünleri gezip 2. sayfaya geçeceğim zaman tekrar yukarı scroll yapmam gerekiyor.

Aynı sayfalama butonları aşağı konsa daha iyi olamaz mıydı?

Şarkı teknosaya gelsin.
Şebnem Ferah – Daha iyi olamaz mıydı?

Fazlasını Oku

Tasarımı Bu Olsun

Üzerinde çalıştığım iş üzerinde 2 defa tasarım değiştirdik. Sebebi verdiği örneğe sadık kalmayışımmış. İyi de bizim yaptığımız site yazılı, sesli, görsel, vidyo içeriklerinin sahnelendiği bir sayfa. Oysa müşterinin bize verdiği örnek site video paylaşım sitesi. Yani bana tırnak makası verip domates kesmemi istiyor.

Benim patronum tasarımımı güzel bulmuştu. Sonra adama direnmedik ve yeniden başladım işe. Bu sefer örneğin tamamen aynısını kodladım. Sonra da adama gösterip, “bunu video paylaşım sitesi havasından çıkarmalıyız” dedim, kabul etti.

Grafik tasarımı konusunda iyi değilim. Ona daha güzel bir şey tasarlayamam. Kötü tasarım yapsam da kullanılabilirlik ve teknik detaylara önem veririm. Ama bana emlak sitesini gösterip haber sitesi yapmamı istemesin lütfen.

Bundan sonra böyle bir durumla karşılaşırsam soracağım soru şu olacak; “neden bu tasarım?” Ne yanıt verebilir? Ben de yanıt veremem. Site neden gri? Bilmiyorum, kırmızı ağırlıklı da olabilirdi.

İşte bu yüzden tasarım sadece destekleyici bir unsur olmalıdır. Yola tasarımdan çıkılmamalıdır. Site projelendirilir, işlevler, içerik, renkler vs.. belirlenir. Ondan sonra grafik tasarımcı şirket kurallarına göre tasarımı yapar.

Tekrar söyleyeyim; “Kullanıcı arayüzleri, grafik tasarımcılara bırakılacak kadar önemsiz değildir.

Fazlasını Oku

Nasıl İndireceğim?

Şimdi olay şu; midi klavyede gam çalışması için gamları içeren dosya arıyorum. Site beni bu indirme sayfasına yönlendirdi. Aşağıda biraz göz gezdirin indirme bağlantısını arayın. Tabi ki bir süre sonra bulacaksınızdır. Fakat bu bir bulmaca değil. Ben bir şey yapmak için siteye geldim ve yapıp gideceğim. “Don’t Make meThink” kitabı bunu özetliyor tam olarak.

Aşağıda da belli ettim indirme yerini. Çok fazla vakit ayırmayanlar için

Bu kadar anlaşılmaz yapmalarının nedeni genellikle becerisizlik olabilir ama hatırı sayılır bir kitle de bu yöntemi reklamlara tıklatmak için yapıyor. İnsanlar bulamayınca sağa sola tıklamaya başlıyorlar haliyle. Ne kadar çöp işler yapıyorsunuz!

Ekleme : linke tıkladım. Karşılaştığım mesaj “AkorMerkezi.com üyelerine özel olan bir sayfaya erişmeye çalıştınız. Eğer üye iseniz giriş yapmak için tıklayın.”. O yolu bulsam bile tamamen ücretsiz,çoğu yerde bulunabilen bir dosyayı indiremiyorum. Bu siteye bir daha uğrar mıyım? Hiç sanmıyorum.

Fazlasını Oku