İYİ BİR ARAYÜZ OLUŞTURMA

Bu makalede iyi bir arayüz geliştirmek için dikkat edilmesi gereken noktaları yazdım. Microsoft ile ilgili kısımlar Microsoft’un dökümanlarından alınmıştır. MSDN’de arama yaparak bu konuda yüzlerce sayfalık dökümanlara ulaşabilirsiniz.

UYARI : Burda yazılanlar bence, bazı yerlerde Microsoft’ça dikkat edilmesi gereken hususlardır. Bunlara dikkat etmeniz iyi olur, ancak seçim size aittir.

– Gerçek Dünya

– Microsoft’dan Tavsiyeler

– Microsoft İyi Arayüz Kontrol Listesi

– Delphi Tarafında Yapılması Gerekenler

GERÇEK DÜNYA

* Programcılar genelde arayüz dizayn etmekten pek hoşlanmazlar. Ancak arayüz dizaynı kolay ve eğlenceli bir iştir. Yaptığınız işin neticesini anında ekranda görebilirsiniz.

* Çoğu programcı arayüz dizaynının grafik yetenek isteyen bir olay olduğunu, bundan dolayı arayüz dizaynı yapamayacağını düşünür. Halbuki olay çok basittir. İşin temeli basit bir takım kurallar belirleyip, bunları tüm programda uygulamaktır. Burada da bunu yapacağız.

* Kontrol edemedikleri problemler insanları sinirlendirir ve stres yapar. Bunlar küçük problemler olsa bile. Mesela klavyenizin boşluk tuşunun ara sıra çalışmadığını, 3-4 kez bastığınızda çalıştığını düşünün. Bu olay bir süre sonra sizi sinirlendirmeye, stres yapmaya başlayacaktır.

Kullanıcılarda bu şekildedir. Programın arayüzünü beğenmezlerse, programı kontrol edemeyecekleri hissine kapılırlar, programı suçlarlar. Ancak arayüzü beğenmişlerse, istedikleri gibi çalışıyor ise kendilerini mutlu hissederler ve programı överler. Bir arayüz üstadının da dediği gibi en güzel dizayn edilmiş arayüz, kullanıcının programın nasıl davranmasını istiyorsa öyle davranan programdır.

* Kullanıcılar dokümanları ve çıkan mesajları okumazlar(!) ve kullanıcıların çalışma tarzını değiştirmek son derece zordur.

* Peki bu kadar kullanıcı var, onların çalışma tarzını nasıl bileceğiz? Bunun en güzel yöntemi onlara sormak. Zaten her programcı aynı zamanda bir kullanıcı olduğundan, beğendiği hoşuna giden arayüzler vardır. Ayrıca programı kullanan veya çevrenizdeki daha az profesyonel insanlara açıkça sorarak kullanıcıların çalışma tarzları hakkında fikir edinebilirsiniz.

Burada en önemli noktalardan biri kullanıcılardan feedback (geridönüşüm) almaktır. Eğer programda can sıkıcı, stres yapıcı bir arayüz hatası var ise kullanıcı bundan şikayet edecek ve bu durumun çözülmesini isteyecektir. Kullanıcının program vasıtasıyla size ulaşabilmesi için gerekli düzenlemeler yapılmalıdır. Programın Yardım menüsünde ve Program Hakkında kısmında kullanıcının size ulaşabileceği iletişim araçları belirtilmelidir. Bunlardan ilk olarak e-maile ağırlık verilmelidir. E-mail haberleşmesi hem maliyet olarak daha ucuz, hem de içine ekran görüntüsü de eklenebileceğinden çok daha açıklayıcı olmaktadır.

* Programın arayüzünü test etmek için 5-6 kullanıcı kafi gelecektir. Sonrasında her kullanıcının benzer şeyler söylediğini göreceksiniz.

* Kullanıcıya seçenek sunmalısınız, ancak bazen kullanıcı bunlara dikkat etmez veya dikkat edecek durumda değildir. Bu durumlarda bir seçeneğiniz olmalı. Yani kullanıcıya bir seçenek sunacaksanız, bunun gerçekten gerekli olması lazımdır. Mümkün olduğu kadar program kullanımı sırasında kullanıcının seçim yapma olayını minimuma indirmelisiniz.

Bu tüm seçenekleri iptal edin manasına gelmez. Mesela her kullanıcı programın görünüşünü değiştirmeyi, masaüstüne farklı bir resim koymayı veya Winamp’ın skinlerini değiştirmeyi sever.  

* Bazen kullanıcı bir işin yapılmasını ister ancak nasıl yapılacağı hakkında hiçbir fikri yoktur [yabancı gelmedi değil mi ] Bu durumda genel kabuller veya gerçek yaşamdan uyarlamalar iyi olacaktır. Mesela zoom olayı yapmak istiyorsunuz, bu durumda ekrana bir mercek resmi koyarsanız, gerçek hayatta mercek bu işler için kullanıldığı için kullanıcı kolayca ne işe yaradığını kavrayacaktır.

* Eğer nesneleri iyi dizayn etmişseniz, bakıldığı zaman nasıl çalışacağı anlaşılıyor olması lazım.

* Program arayüzünü tasarlarken kullanıcıların alışkanlıklarını da göz önünde bulundurmak gerekir. Şu anda çoğu program benzer tarzda çalışmaktadır ve kullanıcı sizin programınızdan da aynı davranışları bekler. Mesela Windows’ta Ctrl+X, Ctrl+C ve Ctrl+V, kes – kopyala – yapıştır için kullanılır ve bu genel bir standarttır. Siz eğer bu işlemler için farklı tuşlar atarsanız, ciddi kullanım problemleriyle karşılaşabilirsiniz.

* Arayüz tasarlarken mümkün olduğu kadar kullanıcıların çokça kullandığı popüler programlara (Word, Excel vs.) benzer yapıları kullanmak daha iyi olacaktır. Özellikle Microsoft arayüz geliştirme çalışmaları için milyonlarca insandan feedback almakta, bu iş için milyonlarca $ harcamaktadır. Genelde kullanıcılar bu arayüze alışık oldukları için, sizin programınızdan da aynı davranışları bekleyeceklerdir. Ayrıca kullanıcı bu arayüze alışık olduğundan kolayca kullanmaya başlayabilecek, eğitim masrafları ve zamanı minimuma inecektir.

* Standart Windows bileşenlerini (EditBox) kullanmak yerine yenilerini oluşturmayı denemeyin. Bu hem bir sürü sıkıntıyı beraberinde getirir, hem de kullanıcılar alışık oldukları tarzdan farklı buldukları için kullanım problemleri çıkar.

* Arayüz dizayn ederken şu iki prensibi asla unutmayın

1. Kullanıcılar asla dokümanları okumazlar
2. Aslında kullanıcılar hiçbir şeyi okumazlar, okuyabilseler bile okumak istemezler.

Yani programları kullanıcının dokümanları okumadan kullanabileceği şekilde yapmak gereklidir!

Aslında kullanıcılar hiçbir şeyi okumazlar demiştik. Kullanıcılar ekrana gelen hata mesajlarını ve diğer bilgileri de okumazlar. Bunları okunma şansını artırmak için cümleleri kısa, net ve basit bir şekilde yapmalısınız. Ayrıca işlem yaparken kullanıcının bu dailoglara okumadan bastığının farkında olup ona göre davranmalısınız. Mesela bir kayıt silme işlemi sırasında varsayılan buton Evet ise kullanıcı yanlış bir işlem yapıyorsa, okumadan Enter tuşuna veya boşluk tuşuna bastığı için kayıt silinecektir. Bu durumda varsayılan butonun Hayır olması bu hatanın önüne geçecektir.

* Birçok kullanıcının halen bilgisayardan korktuğunu, çekindiğini unutmayın. Mesajları uzatmak yerine kısa ve öz yazmaya gayret edin. Mesela kullanıcıdan programdan çıkmadan önce bir onay almak istiyorsunuz. Eğer “Programımızı kullandığınız için teşekkür ederiz, Programdan çıkmak istediğinizden emin misiniz?” gibi bir ifade kullanmak yerine “Programdan çıkmak istiyor musunuz?” gibi daha kısa ve net bir şekilde istediğiniz onayı almış olursunuz. Önceki mesajdaki teşekkür ibaresi daha kibar gözükse bile gereksiz bir ibaredir.  

* Kullanıcılar fareyi çok iyi kullanamazlar. Bunun birçok nedeni olabilir : masaları çok dağınıktır, farelerinde bir problem vardır, notebook kullanıyorlardır vs. Bunun için kullanıcıya fare ile yapılan işlemlerin tamamını klavye ile yapma imkanı vermelisin. Ayrıca klavyeye alışan kullanıcılar, klavye ile fare arasında git-gel yapmadıkları için işlemleri çok daha hızlı yapabilmektedirler.

* Bazı şeyleri kullanıcının hatırlamasını beklemek yerine, bilgisayarın hatırlamasını sağlamalısınız. Mesela kullanıcı kaydettiği bir resmi açacak, kullanıcıya resmi ismi ile seçmek yerine, resimlerin küçük görüntüleri (thumbnail) ile seçtirirseniz, istediği resmi seçmesi çok daha kolay olacaktır.

* Kullanıcılar doküman okumazlar, fare kullanamazlar, her şeyi hatırlamazlar, o zaman bunlar aptal diye düşünebilirsiniz. Hayır aptal değillerdir, ancak herkes sizin kadar bir bilgisayar geçmişine ve tecrübesine sahip olmayabilir. Onun için programları aptalların bile kullanabileceği kadar kolay yapmalısınız. En ufak bir yararlı değişikliğin bile müşterileri ne kadar sevindirdiğine şaşıracaksınız.

* Programları yaparken activity-based (faaliyet tabanlı) tarzda yazmak en uygun çözümdür.

Mesela Tebrik kartı hazırlayıp gönderen bir program yazıyorsunuz. Boş bir kart açıp, buna yazı ve resim ekleyerek bir kart oluşturup, bunu göndertmek bir çözüm ancak kullanıcıya şöyle bir liste çıkarıp yaptırmak daha iyi olacaktır.

Nasıl bir kart istiyorsunuz?

– Doğum günü kartı

– Yıldönümü kartı

– Parti daveti kartı

– Boş bir kart ile başla

Bu tarz bir giriş yapılırsa kullanıcı daha kolay bulmaktadır programı.

Veya programda 40 kadar formül var ve bunları kullanıcıların girmesi gerekiyor. Kullanıcının bunları bildiğini varsayıp, elle girdirmek bir çözüm ancak kullanıcıya bir ekran açıp, formülleri listeden seçtirip, seçilen formüle göre parametreleri girmesini sağlamak faaliyet tabanlı ve daha kullanıcı dostu bir çözüm.

* İyi bir arayüz program için daha çok müşteri demek olduğu gibi, aynı zamanda mutlu kullanıcılar demektir.

MICROSOFT’DAN TAVSİYELER

İyi bir program

• Çekici görünmeli
• İyi organize edilmiş olmalı
• Kullanımı ve anlaşılması kolay olmalı
• En iyi uygulamalar, kullanıcının herhangi bir eğitime ve dokümana gerek duymadan, sezgisel olarak çalışabildiği uygulamalardır

Bunun için nelere dikkat etmeliyiz :

• Programda renklerde, fontlarda ve tüm arayüzde tutarlı olunması gerekir. Kullanıcı her formu açtığı zaman başka başka arayüzle karşılaşmamalı.
• Kullanıcını uygulama içinde istediğine ulaşması kolay olmalı.
• Uygulamanın tüm özelliklerine klavye ve fare ile ulaşılabilmelidir.
• Formda Tab Order (tab tuşuna bastıkça bir sonraki kontrole geçiş sırası) düzgün olarak ayarlanmalıdır. Bu kullanıcının klavye ile uygulamayı kullanmasını kolaylaştırır.
• Kullanıcıya mümkün olduğu kadar görsel ipuçları sunmak iyidir. Mesela işlem yapılırken fare imlecinin kum saati şeklini alması gibi.
• Kullanıcının girdiği veriyi hemen kontrol edip, bir yanlışlık var ise hemen düzeltmesini istemek gerekir.
• Kullanıcılar için özel menü ve/veya araç çubukları oluşturmuş iseniz, bunların gerektiği zaman gözükür olup, kullanıcını görmemesi gerektiği zaman göremediğinden emin olmalısınız. Mesela görmeye yetkisi yoksa.
• Hata olabilecek yerleri önceden sezmeye çalışıp buralarda hata kontrolü yapın. Hata mesajlarını açık ve kısa yazın.
• Kullanıcının programın kontrolünün kendisinde olduğunu hissetmesi iyidir. Bazı işleri otomatize edin ama bu işlemin başlamasını veya kontrolünü kullanıcıya bırakın.
• Kullanıcılar programdaki görünüşü değiştirmeyi severler. Kullanıcılara bu imkanı verin.
• Programı mümkün olduğu kadar interaktif yapın. Bunun içinde :
• İkincil formları mümkün olduğu kadar modeless açın. (Show ile)
• İşlemleri bölümlere ayırın. Mesela yazdırmak için tüm uygulamayı yüklemek gerekmeyebilir.
• Uzun ve çok zaman alan işlemleri arka planda yapıp, ön planda kullanıcının diğer işlemleri yapmasına izin verin.
• En iyi dizayn edilmiş uygulamalarda bile kullanıcılar hata yapabilir. Bir hata yaptıkları zaman bunu geri alabilmeleri lazımdır.
• Kullanıcıya mutlaka olan biten hakkında bilgi verin. Kullanıcılar kendilerine hiçbir yanıt vermeyen bir ekrana ancak birkaç saniye tahammül ederler. Fare imlecini kum saati haline getirmek, statuss barda mesaj göstermek veya bir progress bar’la işleyişin biten yüzdesi hakkında bilgi vermek gibi.
• Estetik. Görsel tasarım arayüzün dizaynının en önemli kısmıdır. Estetik açıdan güzel bir programı kullanmak kullanıcıları daha çok mutlu eder. Mesela Adres bilgisi girilecek ise, bu bilgileri gruplayıp, baş tarafına Adres ile alakalı bir resim koymak (mesela ev resmi) gibi görsellikler sunmak kullanıcının daha kolay anlamasını sağlar.

MICROSOFT İYİ ARAYÜZ KONTROL LİSTESİ

• Program kolay bir şekilde kurulmalıdır (install).
• Kurulum işlemi restart istememelidir.
• Kullanıcılar uygulamayı kullanmaya başlamadan önce bir açıklama yazısı (readme) okumak zorunda kalmamalıdır.
• Kullanıcının ürettiği dosyalar, My Documents klasöründe saklanmalıdır.
• Uygulamanız Program Files klasörü dışında klasör oluşturmamalıdır
• Uygulamanız hard diskin ana klasörüne (c:\, d:\…) herhangi bir dosya yazmamalıdır.
• Uygulama Start (Başlat) menüsüne yardım, readme ve uninstall kısayolları oluşturmamalıdır.
• Kullanıcının izni dışında masa üstüne uygulamanın kısayolu konulmamalıdır.
• Eğer uygulama Windows başlarken çalışacak bir uygulama ise herhangi bir açılış ekranı veya mesaj göstermemelidir.
• Kullanıcı Denetim masasındaki Görüntü seçeneği ile renkleri değiştirdiği zaman, program bu renklere uyum sağlayabilmelidir.
• Programın tüm fonksiyonlarına klavye ile ulaşılabilmelidir.
• Kullanıcı varsayılan font büyüklüğünü artırdığı zaman program buna uyum sağlayabilmelidir.
• Eğer olabilirse standart kısayol tuşları kullanılmalıdır. F1 – yardım, F2 – Edit gibi.
• Kullanıcı ekran çözünürlüğünü değiştirdiği zaman, uygulama uyum sağlayabilmelidir.

DELPHI TARAFINDA YAPILMASI GEREKENLERs

1. Ekranlar 800 x 600 çözünürlüğünde hazırlanmalıdır.
2. Forma konulacak bileşenlerin Align özellikleri ayarlanarak, yüksek çözünürlükte ekranda boş kısımların kalmaması sağlanmalıdır.
3. Eğer forma buton konulacak ise, forma Align özelliği alBottom olan bir Tpanel konup, butonlar bu panelin üzerine konulmalıdır. Butonlar sağ köşeye göre hizalanmalı ve Anchors özelliği akRight olarak ayarlanmalıdır. Bu ekranın büyüklüğü değişse bile butonların daima sağ tarafta kalmasını sağlar.
4. Programda standart Windows renkleri dışında renkler kullanılmamalı ve bittikten sonra birkaç değişik renk şeması ile deneyerek sırıtan renkler belirlenip temizlenmelidir.
5. Eğer form çok küçükse ve büyüklüğünün değişmesi gerekmiyor ise, BorderStyle özelliği bsSingle yapılmalı, BorderIcons kısmındaki biMinimize ve biMaximize False yapılmalıdır.
6. Her program için bir açılış (splash) ekranı olmalıdır.
7. Bazı durularda animasyon eklemek olayı daha görsel hale getirebilir. Mesela kopyalama ve bulma işlemlerinde kullanmak gibi. Ancak animasyonları çok sık kullanmak kullanıcıyı meşgul edebilir veya kızdırabilir. Sadece çok özel durumlarda animasyon kullanın.
8. Tab order sırası mutlaka düzgün olmalıdır.
9. Formdaki Fontlar Tahoma – 8 punto olmalı. 
10. Label ve Edit gibi bileşenlerin ParenFont özelliği True olarak kalmalı ve font bilgisini formdan almalılar
11. Genelde formda labellar ve yanlarında Editler olur. Bu durumda labelların Left özelliği aynı olmalı, yani aynı hizada olmalılar. Aynı şekilde Editlerin de Left özellikleri eşit olmalı.
12. Label’ların Alignment özelliği taLeftJustify olmalı ve caption mutlaka bir boşluk ve ardından iki nokta ile bitmelidir. Mesela Adı :
13. Label’ların ilk harfi büyük olmalıdır.
14. Kullanıcı bir ekranı kapattığı zaman büyüklüğünü ve pozisyonunu kaydedip, tekrar açtığı zaman aynı yerde ve boyutlarda açmak iyi olacaktır.
15. Program klavye ile tam yönetilebilir olmalıdır. Bunun için menü öğelerinde ve butonlarda & işareti kullanılarak bu komutlara klavye yardımı ile ulaşılmasını sağlamalısınız. Program bittikten sonra bilgisayardan fareyi söküp, tüm ekranlarda klavye ile gerekli işlemleri yapıp yapamadığınızı test etmelisiniz.
16. Formlar mümkün olduğu kadar Modeless gösterilmelidir (Show ile). Sadece gerekli durumlarda Modal gösterilmelidir (Showmodal ile). Modeless formlar kullanıcıya daha fazla hareket serbestliği verir, oysa kullanıcı modal açılan bir formu kapatmadan başka bir işlem yapamaz.
17. Eğer bazı değerlerin girilmesi zorunlu ise bunlar kaydedip formu kapatmadan önce kontrol edilmeli ve kullanıcıya açık bir şekilde mesaj verilmelidir. “Adı alanını doldurmalısınız!” gibi bir mesaj verip, SetFocus ile bu Edit’e konumlanılmalıdır.
18. Kullanıcının seçebileceği seçenekler sınırlı ise bunun dışındaki bilgileri girmesine olanak verilmemelidir. Bu tip durumlarda RadioGroup veya ComboBox gibi bir bileşen kullanarak sadece seçebileceği seçenekleri kullanıcıya sunmak gerekir.
19. Buna benzer olarak kullanıcı bazı alanlara belli tipte değerler girebilir. Mesela Miktar ve parasal alanlara karakter girememelidir.
20. Objelere varsayılan olaylar vermek faydalıdır. Örneğin Gridlere çift tıklandığı zaman Düzeltme ekranı gelmelidir veya bir nesneyi bir yerden sürükle-bırak yöntemi ile taşıdığınız zaman varsayılan bir olay atanmalıdır. 
21. Eğer sayfada çok fazla bileşen var ise TPageControl ile mantıklı bir gruplandırma yapılmalıdır.
22. Kullanıcı veride herhangi bir değişiklik yaptıktan sonra köşedeki çarpı ile formu kapatmak istediği zaman, değişiklikleri kaydetmek isteyip istemediği sorulmalıdır. Seçenekler Evet (kaydet), Hayır (kaydetme) ve İptal (kapatma işleminden vazgeç) şeklinde olmalıdır.