İçerik
- 01. Site haritası ve kullanıcı akışı
- 02. Müşteri edinme hunisi
- 03. İçerik geliştirme
- 04. Tel Kafesler
- 05. Tasarım
- Eylem Planı
Saat 1: 30'u gösteriyor ve sen sadece yatağa gitmek istiyorsun. Evden çalışıyorsunuz, bilgisayarınızın başında oturuyorsunuz, şekiller çiziyorsunuz, filtreler düzenliyorsunuz ve tipografi ile deney yapıyorsunuz ama tasarım bir araya gelmiyor. Bir kutuyu sağa taşırsınız. Geri çekiyorsun. Güzel ve kullanıcı dostu web siteleri oluşturma konusunda bir kariyer oluşturdunuz, öyleyse tasarım neden her zaman zor oluyor?
Kariyerlerimizde hepimiz olmasa bile çoğumuzun birçok kez karşılaşmış olduğu bir sorundur. Biz buna yaratıcı blok diyoruz. Ve sorun burada yatıyor. Çünkü insanların kullanımı kolay bulacağı web siteleri - insanları dönüşmeye teşvik eden web siteleri - yapmak yaratıcılıkla ilgili değildir. Planlamayla ilgili. Ve Araştırma. Ve son kullanıcıyı tasarımın önüne koyar.
Sürecin önemini gerçekten anlamaya başlamadan önce birkaç yıl boyunca bir web tasarımcısı ve ön uç geliştiriciydim. İster serbest, ister büyük bir ajans için veya arada bir yerde çalışıyor olsunlar, web tasarımcılarının aynı genel olay sırasını defalarca izlediklerini izledim. Bir tür başlangıç toplantısı yapıyorlar ve sonra bilgisayarlarına dönüp site tasarımlarını yapıyorlar.
Bu yaklaşımın popülaritesine rağmen, hiçbir zaman gerçekten işe yaramıyor. Görsel olarak ilgi çekici bir şey yaratmayı başarsanız bile, kullanıcılarla bağlantı kurma ve onları dönüştürme fırsatlarını kaçırdığınızın yüzde 100 garantisi vardır. Bir web sitesinde çalışırken kararları bilgilendirmek için gerçek süreçler uygulayarak, üstün ürünler yaratabilir, kullanıcı deneyimini yükseltebilir ve dönüşümleri artırabilirsiniz. Yaratıcı deha zihninizden güzel bir web tasarımı çağırmak için bir dahaki sefere kafanızı duvara vurduğunuzda, burada özetlenen beş önemli adımı izlemeyi deneyin.
01. Site haritası ve kullanıcı akışı
Başlangıç toplantınızı yaptınız. Sektör araştırması yaptınız, rakip analizi yaptınız ve kullanıcı kişilikleri geliştirdiniz. Başlamaya hazırsınız, ancak her zaman önce müşterilere sormanız gereken iki önemli soru vardır.
İlk olarak, onlardan web sitesi için bire üç önceliklerini belirlemelerini isteyin. Bu size onlar için neyin önemli olduğuna dair iyi bir fikir verir. Öncelikler açısından düşünmeye başlamalarını gerektirir, bu da gelişmeye ve odaklanmaya yardımcı olur. Ayrıca, bu önceliklerin ne anlama geldiğine ve bunları ayarlamanın mantıklı olup olmadığına dair tartışmaya da kapı açar.
Sormanız gereken ikinci şey şudur: Başarılı bir web sitesi size nasıl görünür? Kullanıcı akışını ve dönüşüm hedeflerini planlamaya başladığınızda bu soru son derece önemlidir. Bu bilgilere sahip olduğunuzda, web sitesi için bir plan oluşturmaya başlayabilirsiniz: site haritası.
Web sitesi için bir plan
Site haritası, bir web sitesine dahil edilecek içeriğin ve nasıl düzenleneceğinin ilk görselleştirilmesidir. Kullanıcı odaklı, içerik merkezli bir ürüne doğru ilk adımdır. İncelenecek iki bakış açısı var. Öncelikle çalıştığınız şirketin hedeflerine bakın. Neyi başarmaya çalışıyorlar? Ardından, müşterilerinin ne aradığını belirleyin. Nihayetinde başarı anlamına gelecek olan bu iki bakış açısının evliliğidir.
Hem son kullanıcının hem de şirketin hedeflerine uyum sağlamak için mevcut olması gereken bilgi türleri hakkında düşünmeye başlayın. Kullanıcı hedeflerini ilk sıraya koyun - şirketlere, kullanıcıları için en iyi olanın işleri için de en iyisi olduğunu hatırlatmak asla zarar vermez.
Örneğin, ABC Şirketi yeni bir teknoloji icat ettiyse, kullanıcının sorunuyla ilgili bilgilere, ABC Şirketinin geçmişi ve misyon beyanıyla liderlik etmekten daha öncelik vermek daha mantıklıdır. Muhtemelen iletişim bilgilerini ve sektöre özel bir blogu kullanıcılara kaynak olarak eklemek isteyeceksiniz. Birdenbire, bir site haritasının başlangıcına sahip olursunuz.
Bilgiler arasında gezinmek
Web sitesindeki genel bilgi hiyerarşisi hakkındaki soruları yanıtlamaya başladığınızda, kullanıcıların bu bilgiler arasında nasıl gezinebileceklerini de tahmin etmeye başlayacaksınız. Bu sizin kullanıcı akışınızdır.
Bir projenin başlangıcında teorik bir kullanıcı akışı oluşturarak, ideal kullanıcı deneyimini oluşturmak için bilgi bölümlerinin nasıl etkileşime girdiğini görmeye başlayabilirsiniz. Kullanıcılarınız kimler? Bilgi hiyerarşisi çeşitli kullanım durumları için mantıklı mı? Kullanıcılar, kendileriyle ilgili içeriği bulmak için doğal olarak web sitesinde dolaşabilecekler mi?
Boş bir sayfanın üst kısmında, kullanıcı karakterlerinizi tanımlayın. Her birinin altında, sitede nasıl hareket edebileceklerini düşünmeye başlayın. Neyi arıyor olabileceklerini ve bir bilgi bölümünün onları siteden diğerine nasıl yönlendirebileceğini düşünün.
02. Müşteri edinme hunisi
Bu noktada, bir kullanıcının web sitesinde izleyeceği yolculuk hakkında çoktan teori oluşturmaya başladınız ve muhtemelen bunun onları dönüşüme nasıl yönlendireceğini düşünmeye başladınız. Bu, müşteri edinme huninizdir.
Birinci adımda oluşturduğunuz kullanıcı akış şemasını kullanarak, kullanıcıları site üzerinden bir dönüşüm noktasına nasıl yönlendirebileceğinizi düşünün. Bir müşteri edinme hunisi oluşturmak için kendinizi kullanıcının yerine koyun. Geniş bir kitle yerine belirli kişileri kullanın ve huninizi belirli bir kişiye hedefleyin. Hedefleri neler? Bu hedeflere ulaşmalarına nasıl yardımcı olabilirsiniz?
Bir ayakkabı mağazası için bir web sitesi oluşturduğumuzu hayal edin. Bir kullanıcı, bir çift ayakkabı satın almak amacıyla web sitemize gelirse, amacımız bunu yapmalarını mümkün olduğunca kolaylaştırmaktır. Çevrimiçi bir ayakkabı mağazası, kullanıcıları alışveriş sürecinden ödeme aşamasına hızlı ve verimli bir şekilde yönlendirmelidir.
Kullanıcıları alakalı içerikle meşgul etmek için bir plan oluşturun, onlardan ikna edici bir harekete geçirici mesajla dönüşüm yapmalarını isteyin, dönüşüm sürecini kolaylaştırın ve düzenli olarak takip edin. Kullanıcıya rehberlik etmek için odak oluşturun. Müşteri edinme hunisini geliştirmek, bir web sitesini güzel bir resimden ziyade bir iş aracı yapan şeydir. Sonuç getirmeyen tasarım iyi bir tasarım değildir.
- 28 seçkin CSS örneği
03. İçerik geliştirme
İçerik, web sitesinin kalbidir. İnsanlarla bu şekilde bağlantı kurarsınız. Nasıl satarsınız. Tasarımı dayandırdığınız şey budur. İçeriği olmayan bir site tasarlamak, herhangi bir yapboz parçası olmadan bir yapboz bulmacayı bir araya getirmeye çalışmak gibidir; yakındaki rastgele nesneleri (bir çatal, bir ampul, belki bir kahve fincanı) alıyor ve bunları birbirine uydurmaya çalışıyorsunuz.
Tasarımın müşteri için eğlenceli kısım olduğunu anlayın. İçerik işin zor kısmı. Büyük ölçüde bu nedenle, aynı zamanda bir projeyi ayakta tutabilecek bir numaralı şeydir. Tasarımlara başlamadan önce web sitesi içeriğinin eksiksiz bir versiyonunun geliştirilmesi gereken nedenler bunlardır.
Peki nasıl içerik üretiyoruz? Başlamanın mükemmel yolu, site haritanıza tekrar bakmaktır. Bu, kullanıcılara sunmak istediğiniz içerik türlerini tanımladığınız yerdir. Boş bir kopya belge oluşturmak için burada özetlediğiniz sayfaları veya bölümleri kullanın. Her bölüm için sayfa başlığını, içeriğin amacını, hedeflemek istediğiniz anahtar kelimeleri, başlıkları ve gövde metnini ekleyin. Orada yaşamayı beklediğiniz içerik türlerini ve kolay okunabilirlik ve zihinsel sindirim için nasıl parçalanmasını beklediğinizi ekleyin.
Web sitesi içeriği için ideal okuma seviyesinin oldukça düşük olduğunu unutmayın. Ana sayfa içeriği 6. sınıf okuma seviyesini (11-12 yaş civarında) geçmemeli ve alt sayfa içeriği 8. sınıf seviyesinde (13-14 yaş) gezinmelidir. Milyon dolarlık kelimeler burada puan kazandırmaz, kullanıcı kaybederler. Kopyanızı Flesch-Kincaid okunabilirlik formülü ile test ederek kullanıcıların hızlı bir şekilde anlamasının kolay olacağından emin olabilirsiniz.
Basitleştirin ve modernize edin
Metninizin okunmasını kolaylaştırmanın bir başka harika yolu, kolayca sindirilebilir içeriktir. İçeriğinizi bölmek için daha küçük paragraflar kullanmak ve simgeler ve resimler eklemek, web sitenizi sonsuz derecede daha okunaklı hale getirir. Kullanıcılardan alamayacağınız dikkat taahhüdü gerektiren büyük metinler sunmak yerine, içeriği basitleştirin ve gözden geçirmeyi kolaylaştırın.
Yazmayı bitirdikten sonra, en iyi netlik için gerekli olmayan her bir kelimeyi veya kelime öbeğini kesin ve kesin. Bu işlemi tamamladıktan sonra geri dönün ve tekrar yapın - daha fazlasını kaldırabilirsiniz. The Little Prince'in (herkesin okuması gereken bir çocuk kitabı) yazarı olan parlak Antoine de Saint Exupery, "Görünüşe göre mükemmelliğe eklenecek başka bir şey olmadığında değil, kaldırılacak başka bir şey olmadığında ulaşılıyor."
Web sitesi içeriği oluşturmak için son ve en önemli ipucu şudur: Metin yazarı değilseniz, bir tane kiralayın. Her gün yaptıkları bu. Sizden daha iyi ve daha hızlı yapabilirler. Arama motorları için optimize edilmiş, ilgi çekici ve dilbilgisi açısından doğru bir kopya oluşturabilirler.
04. Tel Kafesler
Artık içerik tamamlandı, düzen hakkında düşünmeye başlama zamanı. Site haritasının, içeriği bilgilendiren sitenin genel mimarisi için bir plan olduğu durumlarda; wireframe'ler bu içeriğin mimarisini temsil eder.
Tel kafes herhangi bir renk, yazı tipi seçimi veya tasarım öğesi içermemelidir. Kullanıcı için anlamlı bir şekilde sunulmasını sağlamak için içeriği yapısal bir bakış açısından düzenlemek için bir araçtır. Tel çerçeveler artık sayfa mizanpajlarının piksel açısından mükemmel şekilde oluşturulmasıyla ilgili değil. Bu noktaya kadar oluşturduğunuz plana daha ayrıntılı bir yaklaşım getirmekle ilgili. Bu adımda, bilginin nasıl organize edilmesi gerektiğini keşfediyor ve hiyerarşiyi görsel bir bakış açısından sağlamlaştırıyorsunuz.
İçerik hangi sırayla sunulmalıdır? Hiyerarşi mobil cihazlarda nasıl olacak? Masaüstü? Arada mı yoksa üstünde mi? Duyarlı web tasarımı, sürecimizin her adımıyla birlikte tel çerçevelerin daha az somut ve biraz daha esnek olmasını gerektirdi.
Hiyerarşi oluşturma
Tel çerçevelerinizi nasıl oluşturacağınız tamamen size bağlıdır. Piyasada çok sayıda harika tel çerçeve ve prototip oluşturma aracı var, ancak basit bir kalem ve kağıt da aynı şekilde çalışabilir. Tel çerçevelemenin amacı, önceki adımlarda aldığımız kararları içeriğin sunumu için bir sıra oluşturmak üzere kullanmaktır.
Önceden oluşturduğunuz içeriğe bakarsanız, sezgisel bir süreç olmalıdır. İçeriğinizin doğasında olan net bir hiyerarşi var mı? Başlıklara, paragraflara, belirtme çizgilerine ve kenar çubuklarına bakın. Hangi tür bilgilerin görünmesi gerektiğini ve odaklanmanın nereye düşmesi gerektiğini değerlendirin. Şunu sorun: Bu bilginin ana noktası nedir?
Tel çerçevelemeyi atlamak kolaydır. Genellikle müşteri için pek bir şey ifade etmezler ve gereksiz bir çaba gibi görünebilirler - özellikle her adımı çok özenle tamamladıktan sonra. Tasarım öğelerini oluştururken tel kafesin amacına ulaşamıyor musunuz? Kısacası hayır. Tel kafesler, içerikten tasarıma köprüdür. Bir web sitesinin genel başarısı için süreçteki her adım kadar önemlidirler.
05. Tasarım
Şimdi eğlenceli kısım. Üzerinde çalıştığınız ve müşterinizin beklediği kısım. Ve hazırsın. Sadece estetik tercihlere değil, bilinçli kararlara dayanan bir saldırı planıyla donanmış tasarım aşamasına giriyorsunuz. Maksimum etki için öğelerin nereye yerleştirilmesi gerektiğini biliyorsunuz. Artık bir dönüştürme makinesi tasarlamaya hazırsınız!
Peki duyarlı web için nasıl tasarlıyorsunuz? Her tasarımcının farklı bir iş akışı vardır ve size uygun olanı bulmanız gerekir. Yine de, etkili ve yönetim kurulunda benimsenmesi kolay birkaç metodoloji ve araç vardır.
Duyarlı metodolojiler
Web siteniz mobil olarak çalışacaksa, öncelikle mobil tasarım yapmalısınız. Bu, basitçe bir mobil düzen ve oradan inşa etmek anlamına gelir. Bunu yapmak, öğeleri tasarlandıkları ekran boyutunun çok daha küçük bir boyutundaki bir ekrana yığmaya çalışmaktan çok daha kolaydır.
Ayrıca bir desen kitaplığı kullanmalısınız. Bu, arayüzünüzde yer alan bir tasarım desenleri koleksiyonudur. Kitaplığınız ve tasarımlarınız arasında ileri geri hareket edebilirsiniz; tasarımınıza yeni bir öğe eklediğinizde, onu desen kitaplığınıza eklersiniz ve bunun tersi de geçerlidir. Bu yaklaşımla, herhangi bir değişkene bakılmaksızın, düğme bir düğmedir; hem kod olarak hem de göründüğü şekilde.
Bu, şirketin algılanan profesyonellik düzeyinde dikkate değer bir fark yaratacak ayrıntıda bir tutarlılık oluşturacaktır. Tutarlılık güven oluşturur ve kullanılabilirliği artırır. Öğeleri kolayca ayarlayabildiğimiz ve stilleri güncelleyebildiğimiz için bir verimlilik avantajı da var.
Eylem Planı
Bu kılavuzu izleyerek, tamamen oluşturulmuş bir eylem planıyla birbiri ardına ulaşırsınız. Her adım, kendisinden önce gelen adımlarla bilgilendirilir. Tüm süreç, en yararlı ve alakalı içeriği mümkün olan en iyi şekilde sunmaya odaklanmıştır.
Süreç sırasında veya site açıldıktan sonra planınızın bölümlerini tekrar gözden geçirmeniz gerektiğini fark edebilirsiniz. Dwight D Eisenhower şunları söyledi: "Savaşa hazırlanırken, her zaman planların işe yaramaz olduğunu, ancak planlamanın vazgeçilmez olduğunu gördüm." Sürecin önemini tam olarak özetleyen şey bu duygudur - başarılı bir sonuç için planlıyorsunuz. Tahmin etmiyorsun. Üzerinde çalışan bir web sitesi oluşturabileceğiniz bir temel oluşturdunuz.
Bu makale ilk olarak şurada yayınlandı: net dergi sayı 286. Buradan satın alın.
