Web Site Tasarım

Bir web sitesinin başarısını veya başarısızlığını görsel tasarım değil, kullanılabilirlik ve yardımcı program belirler. Sayfanın ziyaretçisi, fareyi tıklayan ve bu nedenle her şeye karar veren tek kişi olduğundan, kullanıcı merkezli tasarım, başarılı ve kâr odaklı web tasarımı için standart bir yaklaşım olarak yerleşmiştir. Sonuçta, kullanıcılar bir özelliği kullanamıyorsa, mevcut olmayabilir.

​

Bir web sitesinin başarısını veya başarısızlığını görsel tasarım değil, kullanılabilirlik ve yardımcı program belirler . Sayfanın ziyaretçisi, fareyi tıklayan ve bu nedenle her şeye karar veren tek kişi olduğundan, kullanıcı merkezli tasarım, başarılı ve kâr odaklı web tasarımı için standart bir yaklaşım haline geldi. Sonuçta, kullanıcılar bir özelliği kullanamıyorsa, mevcut olmayabilir.

Tasarım uygulama ayrıntılarını (örneğin, arama kutusunun nereye yerleştirilmesi gerektiği gibi) birkaç makalede zaten yapıldığı için tartışmayacağız ; bunun yerine etkili web tasarımı için ana ilkelere, buluşsal yöntemlere ve yaklaşımlara odaklanıyoruz - doğru kullanıldığında daha karmaşık tasarım kararlarına yol açabilecek ve sunulan bilgileri algılama sürecini basitleştirebilecek yaklaşımlar.

​

İyi Web Sitesi Tasarımı İlkeleri Ve Etkili Web Tasarım Yönergeleri  #

İlkeleri doğru bir şekilde kullanmak için öncelikle kullanıcıların web siteleriyle nasıl etkileşime girdiğini, nasıl düşündüklerini ve kullanıcıların temel davranış kalıplarının neler olduğunu anlamamız gerekir.

​

Kullanıcılar Nasıl Düşünür? #

Temel olarak, kullanıcıların Web'deki alışkanlıkları, bir mağazadaki müşterilerin alışkanlıklarından çok farklı değildir. Ziyaretçiler her yeni sayfaya bakar, metnin bir kısmını tarar ve ilgilerini çeken veya aradıkları şeye belli belirsiz benzeyen ilk bağlantıya tıklar. Aslında, sayfanın bakmadıkları bile büyük bölümleri var.

Çoğu kullanıcı ilginç (veya yararlı) ve tıklanabilir bir şey arar; Bazı umut verici adaylar bulunur bulunmaz, kullanıcılar tıklar. Yeni sayfa kullanıcıların beklentilerini karşılamıyorsa Geri butonuna tıklanır ve arama işlemine devam edilir.

• Kullanıcılar kaliteyi ve güvenilirliği takdir eder. Bir sayfa kullanıcılara yüksek kaliteli içerik sağlıyorsa, içeriği reklamlarla ve sitenin tasarımıyla tehlikeye atmaya isteklidirler. Yüksek kaliteli içeriğe sahip iyi tasarlanmamış web sitelerinin yıllar içinde çok fazla trafik kazanmasının nedeni budur. İçerik, onu destekleyen tasarımdan daha önemlidir.

• Kullanıcılar okumazlar, tararlar. Bir web sayfasını analiz eden kullanıcılar, sayfanın içeriğinde kendilerine rehberlik edecek bazı sabit noktalar veya bağlantı noktaları ararlar.

  Kullanıcılar okumazlar, tararlar. Cümlelerin ortasında "sıcak" alanların nasıl aniden ortaya çıktığına dikkat edin. Bu, tarama işlemi için tipiktir.

• Web kullanıcıları sabırsızdır ve anında tatmin olmak için ısrar ederler. Çok basit bir ilke: Bir web sitesi kullanıcıların beklentilerini karşılayamıyorsa, tasarımcı işini düzgün yapamamış ve şirket zarar etmiş demektir. Bilişsel yük ne kadar yüksekse ve gezinme ne kadar az sezgisel olursa, kullanıcılar web sitesini terk etmeye ve alternatifler aramaya o kadar istekli olur. 

• Kullanıcılar optimal seçimler yapmazlar. Kullanıcılar aradıkları bilgiyi bulmanın en hızlı yolunu aramazlar. Ayrıca web sayfasını doğrusal bir şekilde taramazlar, sırayla bir site bölümünden diğerine geçerler. Bunun yerine kullanıcılar memnun; ilk makul seçeneği seçerler. Hedefe götürebilecek gibi görünen bir bağlantı bulduklarında, hemen tıklanma ihtimalleri çok yüksektir. Optimizasyon zordur ve uzun zaman alır. Tatmin etmek daha verimlidir.

• Kullanıcılar sezgilerini takip eder. Çoğu durumda kullanıcılar, bir tasarımcının sağladığı bilgileri okumak yerine kafa karıştırır. Steve Krug'a göre bunun temel nedeni kullanıcıların umursamaması. “İşe yarayan bir şey bulursak, ona bağlı kalırız. Kullanabildiğimiz sürece, işlerin nasıl çalıştığını anlamamız bizim için önemli değil. Kitleniz reklam panosu tasarlıyormuş gibi davranacaksa, harika reklam panoları tasarlayın.”

• Kullanıcılar kontrol sahibi olmak ister. Kullanıcılar, tarayıcılarını kontrol edebilmek ve site genelinde tutarlı veri sunumuna güvenmek ister. Örneğin, beklenmedik bir şekilde yeni pencerelerin açılmasını istemiyorlar ve daha önce bulundukları siteye bir “Geri” düğmesiyle geri dönebilmek istiyorlar: bu nedenle bağlantıları yeni tarayıcı pencerelerinde asla açmamak iyi bir uygulamadır .

1. Kullanıcıları Düşündürmeyin  #

Krug'un birinci kullanılabilirlik yasasına göre, web sayfası açık ve kendini açıklayıcı olmalıdır . Bir site oluşturduğunuzda, işiniz soru işaretlerinden kurtulmaktır - kullanıcıların bilinçli olarak vermesi gereken kararlar, artıları, eksileri ve alternatifleri göz önünde bulundurarak.

Navigasyon ve site mimarisi sezgisel değilse, soru işaretlerinin sayısı artar ve kullanıcıların sistemin nasıl çalıştığını ve A noktasından B noktasına nasıl gidileceğini anlamalarını zorlaştırır. Net bir yapı, orta düzeyde görsel ipuçları ve kolayca tanınabilir bağlantılar, kullanıcıların amaçlarına giden yolu bulmalarına yardımcı olabilir.

 

Bir örneğe bakalım. Beyondis.co.uk, "kanalların ötesinde, ürünlerin ötesinde, dağıtımın ötesinde" olduğunu iddia ediyor. Bu ne anlama geliyor ? Kullanıcılar web sitelerini “F” kalıbına göre keşfetme eğiliminde olduklarından, bu üç ifade, yüklendikten sonra kullanıcıların sayfada göreceği ilk öğeler olacaktır.

Tasarımın kendisi basit ve sezgisel olsa da, sayfanın ne hakkında olduğunu anlamak için kullanıcının cevabı araması gerekir. İşte gereksiz soru işareti budur. Soru işareti sayısının 0'a yakın olmasını sağlamak tasarımcının görevidir. Görsel açıklama sağ tarafa yerleştirilmiştir. Sadece her iki bloğun değiştirilmesi kullanılabilirliği artıracaktır.

 

ExpressionEngine, Beyondis ile aynı yapıyı kullanır, ancak gereksiz soru işaretlerinden kaçınır. Ayrıca, kullanıcılara hizmeti deneme ve ücretsiz sürümü indirme seçenekleri sunulduğundan slogan işlevsel hale gelir.

Bilişsel yükü azaltarak, ziyaretçilerin sistemin arkasındaki fikri kavramasını kolaylaştırırsınız. Bunu başardığınızda, sistemin neden yararlı olduğunu ve kullanıcıların bundan nasıl yararlanabileceğini anlatabilirsiniz. İnsanlar yollarını bulamazlarsa web sitenizi kullanmazlar.

​

2. Kullanıcıların Sabrını Boşa Harcamayın  #

Ziyaretçilerinize bir hizmet veya araç sunacağınız her projede, kullanıcı gereksinimlerinizi minimumda tutmaya çalışın. Kullanıcıların bir hizmeti test etmek için ne kadar az işlem yapması gerekiyorsa, rastgele bir ziyaretçinin gerçekten denemesi o kadar olasıdır. İlk kez gelen ziyaretçiler , gelecekte asla kullanamayacakları bir hesap için uzun web formları doldurmak yerine hizmetle oynamaya isteklidir. Kullanıcıların özel verileri paylaşmaya zorlamadan siteyi keşfetmesine ve hizmetlerinizi keşfetmesine izin verin. Kullanıcıları, özelliği test etmek için bir e-posta adresi girmeye zorlamak mantıklı değildir.

37Signals ekibinin geliştiricisi Ryan Singer'ın belirttiği gibi, kullanıcılar, özelliğin çalıştığını gördükten sonra istendiğinde muhtemelen bir e-posta adresi vermeye istekli olacaklardı , bu yüzden ne alacakları hakkında bir fikirleri vardı. karşılığında.

 

Stikkit, ziyaretçiden neredeyse hiçbir şey gerektirmeyen, göze batmayan ve rahatlatıcı, kullanıcı dostu bir hizmet için mükemmel bir örnektir. Kullanıcılarınızın web sitenizde hissetmesini istediğiniz şey de budur.

 

Görünüşe göre, Mite daha fazlasını gerektiriyor. Ancak kayıt 30 saniyeden daha kısa bir sürede yapılabilir - form yatay yönde olduğundan, kullanıcının sayfayı kaydırmasına bile gerek yoktur.

İdeal olarak tüm engelleri kaldırın , önce abonelik veya kayıt gerektirmez. Tek başına bir kullanıcı kaydı, gelen trafiği azaltmak için kullanıcı gezinmesine engel olmaya yeterlidir.

​

3. Kullanıcıların Dikkatini Odaklamayı Yönetin  #

Web siteleri hem statik hem de dinamik içerik sağladığından, kullanıcı arayüzünün bazı yönleri diğerlerinden daha fazla dikkat çeker. Açıkçası, resimler metinden daha dikkat çekicidir - tıpkı kalın olarak işaretlenen cümlelerin düz metinden daha çekici olması gibi.

İnsan gözü oldukça doğrusal olmayan bir cihazdır ve web kullanıcıları kenarları, desenleri ve hareketleri anında tanıyabilir . Bu nedenle video tabanlı reklamlar son derece sinir bozucu ve dikkat dağıtıcıdır, ancak pazarlama açısından, kullanıcıların dikkatini çekme işini mükemmel bir şekilde yerine getirirler.

 

Humanized, odak ilkesini mükemmel bir şekilde kullanır. Kullanıcılar tarafından doğrudan görülebilen tek unsur, çekici ve çekici, ancak yine de sakin ve tamamen bilgilendirici olan “ücretsiz” kelimesidir. İnce ipuçları, kullanıcılara "ücretsiz" ürün hakkında daha fazlasını nasıl bulabilecekleri konusunda yeterli bilgi sağlar.

Orta düzeyde görsel öğeler kullanarak kullanıcıların dikkatini sitenin belirli alanlarına odaklamak, ziyaretçilerinizin gerçekte nasıl yapılması gerektiğini düşünmeden A noktasından B noktasına gitmelerine yardımcı olabilir. Ziyaretçilerin sahip oldukları soru işaretleri ne kadar azsa , oryantasyon duygusu o kadar iyi ve sitenin temsil ettiği şirkete karşı o kadar fazla güven geliştirebilirler. Başka bir deyişle: perde arkasında ne kadar az düşünmeye ihtiyaç duyulursa, ilk etapta kullanılabilirliğin amacı olan kullanıcı deneyimi o kadar iyi olur.

​

4. Özelliğin Ortaya Çıkması İçin Çalışın  #

Modern web tasarımları genellikle görsel olarak çekici 1-2-3-yapılmış adımlar, görsel efektlere sahip büyük butonlar vb. ile kullanıcıları yönlendirme yaklaşımları nedeniyle eleştiriliyor. Ancak tasarım açısından bu unsurlar aslında kötü bir şey değil. Aksine, bu tür yönergeler , ziyaretçileri site içeriğinde çok basit ve kullanıcı dostu bir şekilde yönlendirdikleri için son derece etkilidir .

 

Dibusoft, görsel çekiciliği net site yapısıyla birleştirir. Site, ilk bakışta görülebilen 9 ana gezinme seçeneğine sahiptir. Yine de renk seçimi çok açık olabilir.

Kullanıcının hangi işlevlerin mevcut olduğunu açıkça görmesine izin vermek, başarılı kullanıcı arayüzü tasarımının temel ilkesidir. Bunun nasıl başarıldığı gerçekten önemli değil. Önemli olan içeriğin iyi anlaşılması ve ziyaretçilerin sistemle etkileşimde kendilerini rahat hissetmeleridir.

​

5. Etkili Yazıyı Kullanın  #

Web, baskıdan farklı olduğu için, yazma stilini kullanıcıların tercihlerine ve tarama alışkanlıklarına göre ayarlamak gerekir. Tanıtım yazısı okunmayacaktır. Kalın veya italik olarak işaretlenmiş resim ve anahtar kelimeler içermeyen uzun metin blokları atlanacaktır. Abartılı dil göz ardı edilecektir.

Iş konuşmak. Şirin veya akıllı adlardan, pazarlama kaynaklı adlardan, şirkete özel adlardan ve tanıdık olmayan teknik adlardan kaçının. Örneğin, bir hizmeti tanımlarsanız ve kullanıcıların bir hesap oluşturmasını istiyorsanız, “kaydolmak”, “şimdi başlamak”tan daha iyidir. bu da “hizmetlerimizi keşfetmekten” daha iyidir.

 

Eleven2.com doğrudan konuya giriyor. Sevimli sözler yok, abartılı ifadeler yok. Bunun yerine bir fiyat: tam da ziyaretçilerin aradığı şey.

Etkili yazma için en uygun çözüm,

• kısa ve özlü ifadeler kullanın (mümkün olduğunca çabuk konuya gelin),

• taranabilir düzen kullanın (içeriği kategorilere ayırın, çoklu başlık seviyeleri kullanın, tek tip metin bloklarının akışını bozan görsel öğeler ve madde işaretli listeler kullanın),

• sade ve nesnel bir dil kullanın (bir promosyonun reklam gibi görünmesi gerekmez; kullanıcılarınıza hizmetinizi kullanmaları veya web sitenizde kalmaları için makul ve nesnel bir neden verin)

6. Sadelik İçin Çalışın  #

“Basit tut” ilkesi (KIS), site tasarımının birincil hedefi olmalıdır. Kullanıcılar, tasarımın keyfini çıkarmak için nadiren bir siteye girerler; ayrıca çoğu durumda tasarıma rağmen bilgiyi ararlar. Karmaşıklık yerine basitlik için çabalayın.

Ziyaretçilerin bakış açısından, en iyi site tasarımı, ziyaretçilerin kullandığı sorgu veya aradıkları içerikle tam olarak eşleşen herhangi bir reklam veya başka içerik blokları içermeyen saf bir metindir. Bu, web sayfalarının kullanıcı dostu bir baskı sürümünün iyi bir kullanıcı deneyimi için gerekli olmasının nedenlerinden biridir.

 

Finch, siteyle ilgili bilgileri net bir şekilde sunar ve ziyaretçilere gereksiz içerikle fazla doldurmadan seçenekler sunar.

​

7. Beyaz Alandan Korkmayın  #

Aslında beyaz boşluğun önemini abartmak gerçekten zor. Ziyaretçiler için bilişsel yükün azaltılmasına yardımcı olmakla kalmaz, aynı zamanda ekranda sunulan bilgilerin algılanmasını da mümkün kılar. Yeni bir ziyaretçi bir tasarım düzenine yaklaştığında, yapmaya çalıştığı ilk şey sayfayı taramak ve içerik alanını sindirilebilir bilgi parçalarına bölmektir.

Karmaşık yapıların okunması, taranması, analiz edilmesi ve üzerinde çalışılması daha zordur. İki tasarım segmentini görünür bir çizgiyle veya biraz boşlukla ayırma seçeneğiniz varsa, genellikle boşluk çözümünü kullanmak daha iyidir. Hiyerarşik yapılar karmaşıklığı azaltır (Simon Yasası): Kullanıcılara görsel bir hiyerarşi duygusu sağlamayı ne kadar iyi başarırsanız, içeriğinizin algılanması o kadar kolay olur.

 

Beyaz boşluk iyidir. Cameron.io, beyaz alanı birincil tasarım öğesi olarak kullanır. Sonuç, içeriğe hak ettiği hakim konumu veren iyi taranabilir bir düzendir.

​

8. “Görünür Bir Dil” İle Etkili İletişim Kurun  #

Aaron Marcus, etkili görsel iletişim konusundaki makalelerinde, "görünür dil" olarak adlandırılan - kullanıcıların ekranda gördüğü içerik - kullanımına ilişkin üç temel ilkeyi belirtiyor.

• Organize et : kullanıcıya açık ve tutarlı bir kavramsal yapı sağlar. Tutarlılık, ekran düzeni, ilişkiler ve gezilebilirlik, organizasyonun önemli kavramlarıdır. Aynı sözleşmeler ve kurallar tüm unsurlara uygulanmalıdır.

• Tasarruf edin: en az miktarda ipucu ve görsel öğeyle en fazlasını yapın. Dikkate alınması gereken dört ana nokta: basitlik, açıklık, ayırt edicilik ve vurgu. Sadelik , yalnızca iletişim için en önemli unsurları içerir. Açıklık : Tüm bileşenler, anlamları belirsiz olmayacak şekilde tasarlanmalıdır. Ayırt edicilik : Gerekli unsurların önemli özellikleri ayırt edilebilir olmalıdır. Vurgu : en önemli unsurlar kolayca algılanmalıdır.

• İletişim : sunumu kullanıcının yetenekleriyle eşleştirin. Kullanıcı arayüzü, başarılı bir şekilde iletişim kurmak için okunabilirlik, okunabilirlik, tipografi, sembolizm, çoklu görünümler ve renk veya doku dengesini sağlamalıdır. Maks . En fazla 3 punto büyüklüğünde 3 yazı tipi - metin satırı başına en fazla 18 kelime veya 50-80 karakter.

9. Kongreler Dostlarımızdır  #

Site öğelerinin geleneksel tasarımı sıkıcı bir web sitesiyle sonuçlanmaz. Aslında, sözleşmeler öğrenme eğrisini, işlerin nasıl yürüdüğünü anlama ihtiyacını azalttığı için çok faydalıdır . Örneğin, tüm web sitelerinin RSS beslemelerinin farklı görsel sunumuna sahip olması bir kullanılabilirlik kabusu olurdu. Bu, verileri (klasörleri) nasıl düzenlediğimize veya alışveriş yaptığımıza (ürünleri yerleştirmeye) ilişkin temel ilkelere alışma eğiliminde olduğumuz normal hayatımızdan çok da farklı değil.

Konvansiyonlarla, kullanıcıların güvenini, güvenini, güvenilirliğini kazanabilir ve güvenilirliğinizi kanıtlayabilirsiniz. Kullanıcıların beklentilerini takip edin - bir site gezintisinden, metin yapısından, arama yerleşiminden vb. ne beklediklerini anlayın.

Kullanılabilirlik oturumlarından tipik bir örnek, sayfayı Japoncaya çevirmek (web kullanıcılarınızın Japonca bilmediğini varsayarak, örneğin Babelfish ile) ve kullanılabilirlik testçilerinize farklı dildeki sayfada bir şey bulma görevi vermektir. Kurallar iyi uygulanırsa, kullanıcılar tek kelimesini anlamasalar bile çok spesifik olmayan bir hedefe ulaşabileceklerdir.

Steve Krug, yalnızca gerçekten daha iyi bir fikriniz olduğunu bildiğinizde yenilik yapmanın daha iyi olduğunu, ancak olmadığında sözleşmelerin avantajlarından yararlanmanın daha iyi olduğunu öne sürüyor.

​

10. Erken Test Edin, Sık Test Edin  #

Bu sözde TETO ilkesi, her web tasarım projesine uygulanmalıdır, çünkü kullanılabilirlik testleri genellikle belirli bir düzen ile ilgili önemli sorunlara ve sorunlara ilişkin önemli bilgiler sağlar.

Test çok geç değil, çok az değil ve yanlış nedenlerle değil. İkinci durumda, çoğu tasarım kararının yerel olduğunu anlamak gerekir; bu, belirli bir bakış açısıyla (gereksinimler, paydaşlar, bütçe vb. göz önünde bulundurularak) analiz etmeniz gerektiğinden, bazı düzenlerin diğerinden daha iyi olup olmadığını evrensel olarak yanıtlayamayacağınız anlamına gelir.

Akılda tutulması gereken bazı önemli noktalar:

• Steve Krug'a göre, bir kullanıcıyı test etmek hiçbirini test etmemekten %100 daha iyidir ve bir kullanıcıyı projenin başında test etmek, 50'yi sona doğru test etmekten daha iyidir. Boehm'in birinci yasasına göre, hatalar en çok gereksinimler ve tasarım faaliyetleri sırasında görülür ve daha sonra kaldırıldıklarında daha pahalı hale gelirler.

• test yinelemeli bir süreçtir . Bu, bir şey tasarladığınız, test ettiğiniz, düzelttiğiniz ve ardından tekrar test ettiğiniz anlamına gelir. Kullanıcılar diğer problemler tarafından pratik olarak engellendiği için ilk turda bulunamayan problemler olabilir.

• kullanılabilirlik testleri her zaman faydalı sonuçlar verir . Ya sahip olduğunuz sorunlara işaret edileceksiniz ya da her iki durumda da projeniz için faydalı bir fikir olan büyük tasarım kusurlarının bulunmadığına işaret edileceksiniz.

• Weinberg yasasına göre, bir geliştirici kodunu test etmeye uygun değildir . Bu tasarımcılar için de geçerli. Bir sitede birkaç hafta çalıştıktan sonra, artık onu yeni bir perspektiften gözlemleyemezsiniz. Nasıl kurulduğunu biliyorsunuz ve bu nedenle tam olarak nasıl çalıştığını biliyorsunuz - bağımsız testçilerin ve sitenizin ziyaretçilerinin sahip olamayacağı bilgeliğe sahipsiniz.