delphi ara yüz oluşturma

[Mc Zindan Ankara Style]

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.



*
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


Kullanıcılar asla dokümanları okumazlar
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 +++++ diye düşünebilirsiniz. Hayır +++++
değillerdir, ancak herkes sizin kadar bir bilgisayar geçmişine ve
tecrübesine sahip olmayabilir. Onun için programları +++++ları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.








Mesela
bu ekranda eklenen 4 resim, kullanıcının olayı anlamasını
kolaylaştırmakta ve görsel bir güzellik katmaktadır. Mesela iş, ev, cep
kısmının yanındaki Telefon resmi buraya telefon bilgilerinin girilmesi
gerektiğini göstermektedir.



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 GEREKENLER



Ekranlar 800 x 600 çözünürlüğünde hazırlanmalıdır.
Forma konulacak bileşenlerin Align özellikleri ayarlanarak, yüksek çözünürlükte ekranda boş kısımların kalmaması sağlanmalıdır.
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.
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.
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.
Her program için bir açılış (splash) ekranı olmalıdır.
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.
Tab order sırası mutlaka düzgün olmalıdır.
Formdaki Fontlar Tahoma – 8 punto olmalı.
Label ve Edit gibi bileşenlerin ParenFont özelliği True olarak kalmalı ve font bilgisini formdan almalılar
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ı.
Label’ların
Alignment özelliği taLeftJustify olmalı ve caption mutlaka bir boşluk
ve ardından iki nokta ile bitmelidir. Mesela Adı :
Label’ların ilk harfi büyük olmalıdır.
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.
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.
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.
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.
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.
Buna benzer olarak
kullanıcı bazı alanlara belli tipte değerler girebilir. Mesela Miktar
ve parasal alanlara karakter girememelidir.
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.
Eğer sayfada çok fazla bileşen var ise TPageControl ile mantıklı bir gruplandırma yapılmalıdır.
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.