ARAYÜZ (WEBSKİN) TASARIMINDA DİKKAT EDİLMESİ GEREKENLER...

Bir web uygulamasının başarılı alabilmesi için hangi teknikler kullanılıyor, nelere dikkat ediliyor. işte size en fazla dikkat edilen 10 teknik.

birçok uygulama bu günlerde web ortamına taşınıyor. yükleme gerektirmeyen ve saas (software-as-a-service) olarak tanımlanan bu sistemler daha çok işlevsellik üzerine yoğunlaşıyorlar. masaüstü uygulamalarının aksine web uygulamaları sade,

sezgisel ve kullanıcı dosyu arabirimi ile kullanıcısına az zamanda çok iş yaptırmayı hedefliyor.

bugüne kadar geliştirilen web uygulamaları hakkında pek de derinlemesine incelemeler göremiyoruz. ancak artık web uygulamalarına daha yakından bakmamızın zamanı geldi. şimdi dilerseniz geliştirilen web uygulamaları içerisinde en başarılı arayüz özelliklerine yakından bakalım.

1. Arayüz bileşenleri

Sadelik arayüz tasarımında oldukça önemlidir. arayüzde çok fazla seçenek sunmak çoğu zaman kullanıcıların aradıkları şeyi daha geç bulmalarından başka bir işe yaramaz. oysa tasarımda sadece gerekli bileşenleri kullanırsanız kullanıcının işini kolaylaştırır ve onlara zaman kazandırırsınız. arayüzü sadeleştirme, hele de uygulamanızın özelliklerinden ödün vermek istemiyorsanız, sanıdlığı kadar da kolay değildir.

 Arayüz sadeleştirmenin en kolay yollarından birisi gelişmiş özellikleri doğrudan sunmamaktır. örneğin sitenizdeki arama bölümünde gelişmiş arama bölümünü seçeneğe tabi tutabilirsiniz. böylece hem bu özelliği kullanmak isteyen kullanıcılar sadece birkaç tıkla bu bölüme erişebilirler, hem de bu özelliği hiç kullanmayacak olan birçok kullanıcınızın kafasını karıştırmamış olursunuz.

2. Duruma göre kontrol kullanımını belirleme

Uygulamanızdaki kontrolleri duruma göre belirlemek çok önemlidir. farklı durumlar farklı kontrollerin kullanılmasını gerektirebilir. örneğin eğer bir bilet alacaksanız, o halde tarihleri seçmek için bir drop-down menü kullanmak hiç de işlevsel olmayacaktır.

Bunun yerine kullanıcınıza takvim üzerinde istediği tarihi seçebileceği bir tasarım sunmanız daha yerinde bir karar olur.  diğer yandan bazı durumlarda şık bir arayüzle sunulan basit kontroller daha fazla işe yarar.

3. Tıklama butonunu devre dışı bırakma

Elbette bu durumu sadece gerekli durumlarda yapmanız gerekiyor:) bazı durumlarda, özellikle form alanları veya üyelik işlemlerinde, kullanıcı ilerleme butonuna iki defa tıklayabilir veya gerekli alan boşken tıklama yapmaya çalışabilir.

iki durumda da bu tıklamaları sizin engellemeniz gerekiyor. bunun en iyi yolu da tıklama butonunu bir kereden sonra veya alan boşken devre dışı bırakmak.

bu işi yapmak için hem sunucu tarafını hem de web arayüzünüzü düzenlemeniz gerekir. biz burada sunucu tarafına elbette girmeyeceğiz ancak web arayüzü için bir örnek kod verebiliriz:

<input type=”submit” value=”Submit” onclick=”this.disabled=true” />

siz yine de sunucu tarafının da doğru çalıştığından emin olun.

4. Gölge verilmiş pencereler

Sitenizde açılan bazı pop-up pencerelere gölge vermek sadece bu pencerelerin göze hoş görünmesini sağlamak için yapılmaz. bu gölgeler aynı zamanda kullanıcıyı diğer sayfadan soyutlar ve asıl pencereye odaklanılmasını sağlar. aynı zamanda bu tür gölgeli pencereler ziyaretçilerinize çekici gelecek ve açılan pencereye ilgiyi artıracaktır. işte örnekler:

5. Ne yapılması gerektiğini anlatan alanlar

Bir web uygulaması tasarlarken, örnek verilerin doğru çalışmasını kontrol etmenin yanı sıra bu verilerin işe yarar ve güzel görünüyor olduklarından da emin olun. kısacası boş alanlar hazırlayın.

kullanıcılar web uygulamanızı ilk kullanmaya başladıklarında birçok alana tıkladıklarında boş sayfalarla karşılaşacaklardır. işte bu noktada hem kullanıcınızın işini kolaylaştırmak hem de servisinizin özelliklerini anlatmak için büyük bir şanş yakalarsınız. bu şansı güzel tasarımlı ve işe yarar bilgilerden oluşan alanlar hazırlayarak değerlendirin. bu alanlar vasıtasıyla kullanıcınıza ne yapmaları gerektiğini az ve öz olarak anlatın.

Boş alanlar aynı zamanda kullanıcılarınızı yeni servislerinizi denemeleri için motive edebileceğiniz alanlardır. eğer kullanıcınızın sitenizi kullanması için ilk olarak form oluşturması gerekiyorsa o zaman bu işi ona basit ve çekici bir şekilde anlatın.

6. Butonların önemi

Sitenizdeki butonlar kullanıcılar iin çok önemlidir. bu araçları ne kadar işlevsel kullanırsanız o kadar puan kazanırsınız. o nedenle uygulamanızda kullandığınız linklerin buton gibi göründüklerinden emin olun. hatta bu butonlara tıklandığında, görsel olarak botuna basılmış işlenimi veren kodları css dosyanıza yerleştirin.

7. “üye girişi” sayfasında “üye ol” butonu

Bazı durumlarda web uygulamanızı kullanmak isteyenler üye olma alanını bulmakta zorlanabilirler. bu nedenle üye girişi sayfasında da mutlaka üye ol butonu bulundurun. bu iş yaparken görselliği ön plana çıkarıtn ve işi uzatmayın. araştırmalar sitelerin yüzde 18′inde bu iki bölümün ya linkler ile birbirine bağlı olduğunu ya da yanyana alanlardan oluştuklarını gösteriyor.

8. sezgisel menüler

bu konu önemli. özeti ise şu: kullanıcılarınız her sayfada aynı menülere ve kontrollere ihtiyaç duymayabilirler. o nedenle hangi sayfada hangi menülerin görüntüleneceğine iyi karar verin. microsoft office 2007 ile birlikte gelen üst menü bu duruma iyi bir örnek. üst tarafta bulunan bar, kullanıcı tepe menüleri değiştirdikçe değişiyor ve menülere özel alt menüler geliyor. o nedenle kullanıcılarınıza sunabildiğiniz bütün özellikleri değil, onların ihtiyaç duydukları özellikleri sunun.

9. Önemli linklerin vurgusunu artırmak

Her kontrol aynı öneme sahip olamaz. bazı menüler uygulama geliştiricisi ve kullanıcısı iöçin daha önemlidir. örneğin kullanıcı yeni bir hesap oluşturma alanına tıkladığında “create” ile “cancel” alanları aynı önemde değildir. o nedenle önemli alanların vurgusunu artırın, tıklanabilirlik alanını da büyük tutmaya özen gösterin.

10. Gömülü videolar

Bazı bilgileri yazı veya resimlerle sunmak en iyi yöntem olabilir ancak son yıllarda popülerleşen videoların önemini de göz ardı etmeyin. bazı durumlarda videoları kullanarak gerekli bilgileri vermek çok daha fazla işe yarayabilir.

Uygulamanızın bazı özellikleri video ile anlatmaktan daha iyisi yoktur örneğin. video işini yaparken ise bu videoların bazı durumlarda sayfaya gömülü olmalarına özen gösterin. kullanıcınız videoyu izlemek için tıkladığında başka sayfaya yönlenmesin, videoyu bulunduğu sayfada izleyebilsin. o nedenle embedded denilen sayfaya gömülü videolar önemli bir ayrıntıdır.