1. Sağlam bir sitenin temeli
İlk adım, siteyi neden yaptığınızı belirlemek ve anlamaktır: satış, eğlence, bilgilendirme veya hizmet sunumu... Site, markayı izleyicilerle iletişim kurmak için bir araçtır. Nasıl olacağı ve hangi görevlerin çözüleceği, işinizin hedeflerine ve stratejinize göre değişir. Genellikle bir stratejist, pazarlamacı veya sanat direktöründen sorumludur, ideal olarak-hep birlikte, çünkü görevleri doğru bir şekilde tanımlamak ve formüle etmek önemlidir.Birgün Ajansa bir müşteri geldi ve şöyle dedi: “Ayakkabı ticareti yapmak için bir site istiyorum.” Ve şu soruları sorduk: sitenin misyonu, bir stratejisi olup olmadığı, markanın ve konumlandırmasının oluşturulup oluşturulmadığı, ürünlerin hangi kesime hitap edeceği ve ürünün tarzı… Ancak müşteriye kimse tam olarak cevap veremedi.. Çünkü ürünün kitlesini ve misyonunu kafasında belirleyememişti.Böyle bir durumda, işten ne istediğini ve sitenin neden gerekli olduğunu net bir şekilde anlayabilmeniz için müşteriyi “ödev” yapmaya göndermeniz gerekir. Belki de üç siteye ihtiyacı var: en çok satan ayakkabı modelleri için iki açılış sayfası ve her biri için ayrı bir tanıtım, ayrıca işletme ve diğer ürünler hakkında bilgi içeren ana site. İş sorunlarını çözdünüz ve web’den ne istediğinizi anladınız mı? Mükemmel! Şimdi gelişmeye gidebilirsiniz. Şimdi ne yapacağınıza dair bir plan.
– Sitenin zihin haritasını oluşturuyoruz
– Kullanıcı senaryolarını oluşturuyoruz (özellikle büyük bir proje ise): kullanıcı nasıl davranacak ve ne ile etkileşime girecek.
– Eylem çağrısı (CTA) tanımlıyoruz, eğer gerekliyse: «satın al», «sipariş ver», «istek bırak» ve benzeri düğmelerin nerede ve nasıl yerleştirileceği. Nereye gideceklerini düşünün-diğer sayfalara / bölümlere veya promosyon teklifine. Bir kişinin A noktasından B noktasına daha hızlı ulaşmasına yardımcı olmak için net ve anlaşılır CTA’LARI düzenleyin, paralel olarak C noktasından daha fazla ürün yakalayın.
– Bir mimari inşa ediyoruz-sitenin» iskeleti”: kullanıcı onunla nasıl etkileşime girecek, büyük ve küçük blokların bulunduğu yer vb. Bu, gelecekteki projeye tamamen bakmaya ve nereye ve neden gittiğini anlamaya yardımcı olur.
– Kullanıcının yolunu kontrol edin ve basitleştirin: kullanıcı ne yapmalı ve sizin için gerekli eylemi yapmak için kaç adım (satın alma, bilgilendirme, iletişim)
Sonuç olarak, gelecekteki sitenin tematik bir tasarım prototipine sahip olacaksınız.
2. Bilgi kullanılabilirliği
Kullanıcının tüm adımlarını ve eylemlerini anladığınızda, sitede mantıklı ve kolay gezinme yapın. Hedefe giden yolu başka nasıl kısaltabileceğinizi düşünün. Herhangi bir tasarımın amacı, kullanıcının aradığı şeyi bulmasına yardımcı olmak ve follow me tarzında, onu istenen düğmeye doğru götürmektir. Siteyi neden yaptığınız önemli değil, ziyaretçinin tüm önemli bilgileri bir arada bulmasını sağlamaktır.Ajans, ayakkabı satacak olan siteyi yaptı ve tasarım konsepti üzerinde çalışmaya başladı, hatta gelecekteki düzen için bazı detaylar koydu. Ama sonra müşteri parlak bir fikir geldi: daha önce hiç tartışılmayan birkaç ürün daha ekleyin. Bunlar beş ayakkabı modeline eklendi;Yetişkinler için 60 daha fazla seçenek, yaşlılar için birkaç rahat bot ve çocuklar için Off-White botlar.
Ama böyle bir durumdan bile bir çıkış yolu var. Müşterinin marka, yaş, cinsiyet ve her şeye göre seçim yapmasını ve sıralamasını ve filtrelemesini kolaylaştıracak birkaç alt kategori ekleyelim. Üst menüde (başlık), arama için bir satır ekleyeceğiz ve alt kısımda (altbilgi) — teslimat ve iade, kişiler, SSS, satın alma Koşulları ve sosyal ağlara bağlantılar hakkında bilgi. Bu herhangi bir e-ticaret için klasik bir settir.
3. Öncelikli mobil cihazlar
Navigasyon, yetkilendirme, menüler, resimler-hepsi geçen yüzyılın web sitelerinde. Sitenin zorunlu unsurları o zamandan beri değişmedi, ancak şimdi akıllı telefonlar ve tabletler için uyarlanmaları gerekiyor. GfK araştırmasına göre, Ruslar arasında mobil internet kullanıcılarının payı %61, sadece onları kullananlar ise %35.Müşteri, mobil versiyonun gerekli olmadığını söyledi mi? Kullanıcı siteyi bir akıllı telefondan açtığında ne kadar kaybedeceğini ve gerekli düğmeyi bulamadığını, küçük bir ekranda büyük bir makinaya alışmadığını, bu rezalete baktığını ve rakiplerine gittiğini söyle.
Şimdi masaüstü sürümü, daha önce olduğu gibi, tam tersi değil, mobil bir eklentidir. Buna ek olarak, küçük bir akıllı telefon ekranını büyük bir masaüstüne dağıtmak çok daha kolaydır. Bu yaklaşım, mobil cihazlarda çarpık bir şekilde çalışacak bileşenleri hemen kaldırmaya yardımcı olur.
4. Erişilebilirlik
Erişilebilirlik, iyi bir tasarımın kriterlerinden biridir. En iyi siteler, tasarımcılar veya geliştiriciler için değil, kullanıcılar için yapılır. Site, dünyanın en akıllı cihazlarında değil, tüm tarayıcılarda ve cihazlarda mükemmel bir şekilde çalışmalıdır.Yaşlıların ve engelli kişilerin sitenin izleyicilerine girmeleri durumunda fırsatlarını (veya eksikliklerini) dikkate almak hala güzel. İdeal bir dünyada, siteler görme engelli bir versiyona veya ses kontrol senaryosuna sahiptir.
5. Tasarım harikası-wow!
Görsel kısım, yaratıcı, fantastik, ilginç tasarım ve kullanıcı rahatlığı arasında bir denge bulmaktır. Tasarım, markanın tone of voice yanı sıra fotoğraf ve video içeriğini de hesaba katmalı, ancak kullanıcının dikkatini aşırı dağıtmamalıdır. Yaratıcılık, iş hedeflerine ulaşmak için sadece bir yardımcıdır.Ayakkabı satış sitesini kısaltmaya devam ediyoruz. Arayüzü mümkün olduğunca basit hale getiriyoruz, böylece dikkatleri ürünlerden uzaklaştırmamak ve insanları parlak renklerle rahatsız etmemek amacımız. Ancak off-White botları özeldir, bu yüzden onlara bir tanıtım sayfası yapmaya ve ayrı bir trafik girmeye karar verdik. Dikkat çekmek ve insanların ilgisini çekmek için, bir 3D inceleme, bir Ar uydurma ve bir renk seçimi ile bir tasarımcı ekledi. «WOW» ortaya çıktı, ancak sitenin ana versiyonu aynı kaldı.
Görünüm birkaç yılda bir güncellenmelidir. Büyük şirketler genellikle tasarımı dener ve sitenizi unutulmuş web projeleri mezarlığına gömmemek için bu eğilimleri takip etmeniz gerekir. Dün, herkes minimalizme yakalandı, ancak bugün degradeler kullanıyor ve 3D nesneler kullanıyorlar. Ancak elemanların ve mimarinin düzenlenmesi aynı bırakılabilir, çünkü yıllar geçtikçe kullanıcılar bunlara alışmışlardır.
6. Bilgi eksikliği
Kullanıcı gerekli bilgileri bulamazsa, siteden ayrılacak ve diğer adamlardan bir şeyler satın alacaktır. Bir site geliştirdiğinizde, sadece güzel değil, aynı zamanda bilgilendirici de olduğundan emin olun: faydalı bağlantılar ve açıklamalar ekleyin. İnsanlar, beğenmedikleri veya uymadıkları takdirde malları mağazaya iade etme hakkına sahip olduklarını bilirler. Ve çevrimiçi mağazada, bir şey satın alma riski daha da yüksek değildir. Bu nedenle, insanlara eziyet etmeyin ve tüm heyecan verici sorulara ayrı bir sayfada normal bir cevap verin.7. Karmaşık kullanıcı yolları
Filtreler, referans kitapları, ürün tasarımcıları ve hatta bir kullanıcının bireysel bir şey seçmesine yardımcı olacak testler-harika pazarlama teknikleri, ancak sitenin temeli olmamalıdır. Görevimizin müşteriye yardım etmek olduğunu hatırlıyorsunuz, değil mi?Çevrimiçi mağazalarda satın almayı kolaylaştırmak için birçok site ön yetkilendirmeyi kaldırmıştır. Bir telefon numarası veya posta belirtmek, yaşamla ilgili sorularla, ilk evcil hayvanın takma adıyla veya ikinci kuzenin teyzesinin kızlık soyadı ile büyük bir anketi doldurmaktan çok daha kolaydır.
8. Düşük site hızı
- Kullanıcının sayfayı yüklemesi için iki ila üç saniyeniz var. Bundan sonra başarısızlık oranı hızla artıyor. Çoğu zaman, site kötü optimizasyon, animasyon bolluğu ve sıkıştırılmamış görüntüler ve videolar ile yüklenir. Mobil sürümü ağır unsurlardan hız lehine atın ve gerekirse masaüstü sürümünde yapın.
- Sitede fotoğraf ve video içeriğinin boyutlarını en üst düzeye çıkarın.
- En iyi duruma getirilmiş formatları kullanın (örneğin, GIF animasyonu yerine PNG sıralamasını toplayın).
- En azından Google’ın PageSpeed Insights aracılığıyla çalışan bir ürünü test edin ve test edin.
9. Stil, içerik değil
Bazı şirketler dekorasyon, 3D animasyon ve karmaşık tasarım teknikleri uğruna kullanım kolaylığını feda ederler, çünkü tüm tipler modaya uygun olmak isterler ve modaya uygun olmak istemezler. Ancak, böyle bir lüks herkes için değildir. Bu, bir festival çalışması veya bir reklam kampanyasına dikkat çekmek için uygundur. Ancak bu durumda her zaman normal bir site olmalıdır. Ve tasarımcı, wow efektleri lehine kolay navigasyonu ne zaman feda edebileceğinizi ve ne zaman yapamayacağınızı anlamalıdır.Gucci’nin ana sitesi, tanıdık navigasyona sahip bir e-ticaret klasiğidir. Ancak yeni koleksiyonlar veya işbirlikleri altında şirket, resmi web sitesinde veya satıcılardan satın almaya dikkat çekmek için bir vay etkisi yaratmak için ayrı görüntü siteleri yapar.
10. Canlandırmanın kuvveti
Bu, vurgu yapmak ve kullanıcıyı gerçek yola yönlendirmek için iyi bir araçtır. Ancak onlarla çok ileri giderseniz, bir kişi gergin olabilir, hiçbir şey anlamıyor ve ihtiyacınız olan hedefe ulaşmadan ayrılıyor. Oyun konsollarında epilepsi hakkında bir uyarı yazılması hiçbir şey için değildir: bazı görüntü siteleri, çok renkli animasyonların yanıp sönmesi ve atlanması nedeniyle en azından baş ağrısına da neden olabilir.11. Eski kullanıcıların siteyle olan etkileşimi
Bu çözülemeyen bi problem haline gelmiştir… Tüm bilgiler bu sitelerde kaydolduğu için Instagram veya Tumblr’a hak vermek gerek. Düzenlenmeyen sitelerde ,kullanıcılara bir ton bilgi dökülür. Sonuç: dikkat dağılmıştır ve kişi hedefine ulaşamaz. İstisna olarak promosyon ve resim sitelerini örnek verebiliriz.12. Denge
Kompozisyonun temelleri, ritim, renk, düzen, tipografi ile doğru çalışma ve sitenin ihtiyaç ve hedeflerinin anlaşılması, tasarımın yanı sıra sitenin (UX) bir “iskeleti” oluşturulmasına yardımcı olacaktır. Etkileri ve animasyonlar kullanıcıya zarar vermeden olmalı. Web tasarımı bize grafikten (ve asırlık sanat tarihinin sonuncusundan) geldi, ancak kendi nüansları ve tuhaflıklarıyla. Bununla birlikte, hiç kimse kompozisyon ve grafik ritmi yasalarını iptal etmedi ve renklerin etkileşimi ve tipografi ile çalışmanın anlaşılması değişmedi. Bu şirkete animasyonlar, mekansal düşünme, psikoloji, sosyoloji, pazarlama gibi çalışmaları eklendi. İş sorunlarını çözmek, yeni ürünler oluşturmak ve en önemlisi işinizde gelişmek için bu temel bilgileri bilmeniz gerekir.Her Zaman Hatırlamanız Gerekenler
- İstemcinin web geliştirme hakkında kısa bir bilgi vermesini sağlayın (nasıl yazılır, burada okunur) veya birlikte yapın. Bu, herkesin ürün veya hizmetleri hakkında bilgi yapılandırmasına yardımcı olur. Ürün, marka, faaliyet özellikleri hakkında mümkün olduğunca fazla bilgi edinmeli ve trafiğin siteye nasıl, ne zaman ve hangi kanallardan geçeceğini de anlamalısınız.
- Kendinizi müşterinin ürününe bırakın, niş ve isteklerini inceleyin. “Sadece yap” demeyin. Dolayısıyla, portföyde iyi bir durum almayacaksınız veya işletmeye yardımcı olmayacaksınız.
- Deneyim ve uygulamaya dayalı müşteri sorunlarına çözümlerinizi sunun: henüz tüm müşteriler ürünleri için neyin daha iyi olacağını anlamıyorlar. Belki de bir ürün için Tilda’ya inmek büyük bir çevrimiçi mağazadan daha iyi olacaktır.
- Kararınızın neden müşterinin “menünün beş seviyesini yapalım ve yanıp sönmesine izin verelim ve ayrıca hızlı iletişim için sohbet edelim” fikrinden daha iyi olduğunu açıklayan argümanları kullanın. Web’in kanıtlanmış teorilerine (örneğin, Steve Krug’un arayüzlerinde üst düzey bir uzmanla 20 yıllık deneyim), köklü mekaniğe ve sitedeki tanıdık kullanıcı davranışı modellerine güvenin. Revize etmeyi taahhüt ederseniz, her zaman sitenin metriklerini ve istatistiklerini düşünün.