MobilWeb Tasarım

Mobil Web Sitesi Tasarımı 7 Önemli Kural

Mobil Web Sitesi Tasarımı Nedir? Mobil Web Sitesi Tasarımında 7 Kural Nedir? Mobil Web Tasarımı Nedir? Mobil Uyumlu Siteleri Nasıl Oluşturuyoruz? Hiyerarşi Nasıl Olacak? Sayfa Düzeni Nasıl Olmalıdır? Mobil Web Sayfalarında Optimizasyonu Nasıl Yapıyoruz? Mobil ve Masaüstü Arasındaki Görünüm Tutarlılığını Nasıl Ayarlıyoruz? Bu Konulara Yanıt Bulduk …
Gittikçe daha fazla kişinin telefonlarında arama yapması nedeniyle insanların bugün internette gezinme şekli büyük ölçüde değişti. Aslında, dünya çapında tahmini 3,8 milyar akıllı telefon kullanıcısı var, bu da web sitenizi mobil kullanım için optimize etmenin çok daha önemli olduğu anlamına geliyor. Ancak soru şu ki, nasıl düzgün şekilde optimize ediyoruz? Müşterilerimize tasarladığımız web sitelerini hangi uygulamaları tamamlayarak mobil uyumlu hale getiriyoruz. Takip ettiğimiz 7 kuralımız nedir ? Bunlardan bahsedeceğiz.

Ziyaretçilerinize mükemmel bir mobil tasarım sunmak istiyorsanız bu rehberde tam olarak neler yaptığımızı anlattık. Mobil web tasarım araçları konsepti hakkında bilgi edinin ve web sitenizi kullanıcılarınız için nasıl optimize ettiğimizi anlayın istiyoruz.

mobil-web-sitesi-tasarimi

mobil-web-sitesi-tasarimi

Mobil web tasarımı nedir?

Mobil web tasarımı, mobil kullanıcılar için web deneyimini optimize etme sürecidir. Bu süreç şunları oluşturmayı içerir:

Mobil öncelikli tasarım.

Geleneksel olarak, web siteleri masaüstü kullanıcıları için optimize edilmiştir. Bu, ekibin bir mobil platformla başladığı ve içeriği mümkün olan en küçük ekran için optimize ettiği, ardından tablet veya masaüstü gibi daha büyük bir ekran boyutuna geçtiği anlamına gelir.

Duyarlı tasarım.

Duyarlı düzen, kullanıcının cihazının boyutuna göre değişen bir düzen türüdür. Genel olarak, kullanıcının ekran alanı ne kadar fazlaysa, belirli bir anda o kadar fazla içerik görür.

Arama motoru dostu tasarım.

Ziyaretçiler web sitenizi arama sonuçlarında bulamazlarsa, web sitenizdeki en çekici içerik veya özellikler bile işe yaramaz. Google, web sitenizin mobil cihazlar için optimize edilip edilmediğini ve dolayısıyla daha kullanıcı dostu olup olmadığını kontrol etmenizi sağlayan Mobil Uyumluluk Testi adlı bir araç sunar.

Mobil web sitelerini nasıl oluşturuyoruz?

Tipik olarak, bir mobil web sitesi oluşturma süreci, kullanıcı ve pazar araştırması ile başlar. Ürün ekibimiz, hedef kitle (ihtiyaçları ve istekleri) hakkında bilgi toplar, analiz eder ve bir çözüm oluşturmak için kullanır.

Bir mobil kullanıcı arayüzü oluşturma süreci, bizim web tasarım mutfağımızda tipik olarak düşük kaliteli ve yüksek kaliteli prototipler oluşturmayı içeren prototip oluşturma ile başlar.

İlk olarak, bir ürün ekibi, tek tek sayfalardaki bilgilerin organizasyonunu göstermek için aslına uygun bir prototip oluşturur. Bundan sonra, tasarımı gerçek kullanıcılarla doğrulamak için gerçek içerik ve görüntüler ekleyerek düşük kaliteli prototipleri yüksek kaliteli olanlara dönüştürürler.

Bir ekip doğrulanmış bir yüksek kaliteli prototipe sahip olur olmaz, Bootstrap , Angular , React gibi web çerçevelerini veya Squarespace , Wix veya Elementor gibi site oluşturucuları kullanarak onu tam teşekküllü bir web sitesine dönüştürürler .

Bir mobil siteyi iyi yapan nedir: 7 temel ilke

İyi bir kullanıcı deneyimi, web sitelerinin ayrılmaz parçasıdır ve web siteleri tasarlanırken bu bir istisna olamayacak kadar önemlidir.  Bu bölümde, mükemmel bir mobil tasarım oluştururken en önemli 7 ilkemizi öğreneceksiniz.

1. Sağlam bir bilgi hiyerarşisi oluşturuyoruz.

Mobil kullanıcılar çok hedef odaklıdır. Bir web sitesini ziyaret ettiklerinde, ihtiyaç duydukları şeyi olabildiğince çabuk bulmayı umarlar. İnsanlar web sayfalarını nadiren kelime kelime okurlar, bunun yerine sayfayı tararlar. Bu nedenle iyi taranabilir, mobil web sitesi tasarımının önemli bir özelliğidir. Ziyaretçilerin sitenizde aradıkları bilgileri hızlı bir şekilde bulmaları kolay olmalıdır. Dolayısıyla kısa ve öz içerik, bilgi, görsel hiyerarşisi oluşturuyoruz. Tüm mobil uyumlu tasarımlarımız bu kurala tabidir.

Web sitenizi tasarlarken yaptığımız farklı birkaç şey:

Görüntülemek istediğimiz bilgiler konusunda seçiciyiz. Yalnızca kullanıcıların aradığı bilgiyi kolay bulmaları için ihtiyaç duyduğu bilgileri sağlıyoruz.

Önemli bilgileri ve önemli harekete geçirici mesaj düğmelerini önde ve ortada tutarız. İdeal olarak, kullanıcılar aradıklarını tam ana sayfanıza geldiklerinde bulurlar.

Gezinmeyi içerikten görsel olarak ayırıyoruz. Web sitesi gezinme tasarımı, kullanıcıların menüyü bulmasına yardımcı oluyor.

İçeriği ve gezinme seçeneklerini görsel olarak ayırmak için boşluklar kullanıyoruz.

Örnek olarak CNN mobil web sitesini ele alalım. CNN’nin mobil sitesine girdiğinizde ilk fark edeceğiniz şey öne çıkan haberlerin olduğu bir bölüm. Bu bilgiler “ekranın üst kısmında” (web sayfasının aşağı kaydırmadan görebileceğiniz kısmı) görüntülenir. Böylece kullanıcıların en son güncellemeleri bulmak için aşağı kaydırmalarına gerek kalmaz.

Ancak belirli bir kategoriyle ilgileniyorsanız (örneğin, Spor), sayfanın sağ üst köşesindeki menü simgesine tıklayabilir ve kategorilerin listesini görebilirsiniz. Menünün nispeten kısa olması gerekli tüm bilgileri sağlaması gerektiğini düşünüyoruz.

mobil-web-sitesi-tasarimi-hiyerarsi-politikamiz
mobil-web-sitesi-tasarimi-hiyerarsi-politikamiz

2. Basit sayfa düzenleri kullanıyoruz

Kullanıcının dikkati değerli bir kaynaktır. Buna göre tahsis edilmelidir. Mobil düzenler tasarlarken basitliğe öncelik veriyoruz. Çünkü basit düzenler küçük ekranlarda daha iyi çalışır.

Bu hedefe nasıl ulaşıyoruz:

Tek sütunlu düzenlere bağlı kalırız.  Masaüstü bilgisayarlar için web tasarımını optimize ettiğimizde, bilgiyi yapılandırmak için genellikle çok sütunlu bir web tasarım kılavuzu kullanırız. Ancak mobil söz konusu olduğunda, tek sütunlu bir düzene bağlı kalmak çok daha iyidir. Çünkü birden çok sütun daha fazla karmaşaya neden olabilir ve kullanıcıların bilgileri anlamasını zorlaştırabilir. Bu yüzden daha çok tek sütunlu düzene bağlı kalırız.

Yatay kaydırma kullanmayız. Yatay kaydırmalar yalnızca zayıf UX oluşturmakla kalmaz (çünkü sezgisel değildir), aynı zamanda Google Mobil Uyumluluk Testinde de başarısız olur.

Düzeni dağıtırız. Mobil kullanıcılar, kafa karıştırıcı olabileceğinden ve ihtiyaç duyduklarını bulmayı zorlaştırabileceğinden, aynı anda çok fazla bilgi ile boğulmamalıdır. Temiz düzenler oluşturmak için minimalist yaklaşımı izleriz; kısa ve öz bir kopya kullanırız. Kullanıcılarınızın temiz ve son derece çözüm odaklı bir mobil deneyimin keyfini çıkarabilmeleri için tamamen dekoratif öğelerden kurtuluruz.  Kullandığımız her metin veya görselin ziyaretçilerinize değer katması gerektiğini biliriz.

mobil-web-sitesi-tasarimi-basit-sayfa-duzeni
mobil-web-sitesi-tasarimi-basit-sayfa-duzeni

3. Metni okunabilir hale getirir ve kolay dokunma sağlarız.

Okunabilirlik veya bir okuyucunun yazılı bir metni anlama kolaylığı, web sayfası tasarımının temel bir özelliğidir.  Çünkü iletilen bilgilerin çoğu metin veya kopya yoluyladır.

İyi bir okunabilirlik sağlarken göz önünde bulundurduğumuz özellikler şunlardır:

  • Yazı tipi:  İyi ölçeklenen ve her ekran boyutunda harika görünen bir yazı tipi seçeriz. Helvetica ve Roboto harika seçeneklerdir.
  • Yazı tipi boyutu: 16 piksel, mobil yazı tipi boyutu için iyi bir varsayılandır.
  • Renk kontrastı :  Metni okuyucular için erişilebilir kılmak amacıyla WCAG 2.0 düzeyi AA uyumluluğunu sağlarız.

Küçük dokunma hedefleri, mobil kullanıcılar için başka bir sorundur.  Mobil cihazlarda, kullanıcılar ekrandaki öğelere parmaklarıyla dokunur. Ancak daha küçük dokunma hedefleri, kullanıcıların yanlış nesnelere çarpma olasılığını artırabilir. Büyük parmak dostu düğmeler, web sitenizle etkileşimi son kullanıcılar için daha rahat hale getirecektir. Dokunmatik ekranlı nesneler için önerdiğimiz ve uyguladığımız hedef boyutu 7-10 mm’dir.

mobil-web-sitesi-tasarimi-metin-okunabilirlik-ve-tiklama-dokunma-duzeni

mobil-web-sitesi-tasarimi-metin-okunabilirlik-ve-tiklama-dokunma-duzeni

4. Mobil Uyumlu Formlar, Randevu, İlan Verme Sayfaları

Formları doldurmak, web deneyiminin heyecan verici bir kısmı değildir. Ancak verimli formlar tasarlamak, ziyaretçilerinizin veri girmek için çok fazla zaman harcamak zorunda kalmaması için çok önemlidir.

Formları tasarlarken göz önünde bulundurduğumuz birkaç nokta:

  • Asgari bilgileri isteriz. Yalnızca temel bilgileri isteyerek, formları doldururken kullanıcı çabasını en aza indiririz. Gönderim veya fatura adresleri gibi alanlar için otomatik doldurma sunarız.
  • Kullanıcıların adreslerini GEO konumlarına göre otomatik olarak doldurmalarını sağlarız.
  • Kullanıcı girişini gerçek zamanlı olarak doğrulamak için satır içi doğrulamayı kullanırız. Kullanıcılar, “Gönder” düğmesine dokunduklarında değil, yazdıkları anda bilgileri yanlış eklediklerini göreceklerdir.
mobil-web-sitesi-tasarimi-kullanici-deneyimi
mobil-web-sitesi-tasarimi-kullanici-deneyimi

5. Mobil Web Tasarımı Sayfa Hızı Optimizasyon Yöntemlerimiz

Kullanıcılar etkileşim tasarımında hızı önemser. Sitenin içeriği yüklemesi ne kadar uzun sürerse, kullanıcıların siteyi terk etme şansı o kadar yüksek olur. Bu nedenle, performansı ölçerek yükleme süresini artıran tüm nesneleri ortadan kaldırırız.  Yüksek çözünürlüklü resimler, videolar ve süslü animasyonların tümü sayfa yükleme süresini etkileyebilir. Bu yüzden bu animasyonları mobil web sitelerinde kullanmadığımızı açıkça belirtmek isteriz.

mobil-web-sitesi-tasarimi-sayfa-hizi-optimizasyon
mobil-web-sitesi-tasarimi-sayfa-hizi-optimizasyon

 

6. Mobil ve masaüstü arasında görsel ve işlevsel tutarlılığı nasıl ayarlıyoruz?

Birçok dijital ürün hem mobil uygulama hem de web sitesi olarak mevcuttur. Ürününüz her ikisinde de çalışıyorsa, uygulamanın mobil kullanıcı arayüzünü ve web sitesini tutarlı hale getirmeniz gerekir. İdeal olarak, mobil web deneyimi, kullanıcıların uygulama ve web sitesi arasında özgürce geçiş yapmalarına izin vereceğinden, mobil uygulamanızdan ayırt edilemez olmalıdır.

Böyle bir ürüne iyi bir örnek Google Haritalar‘dır.

mobil-web-sitesi-tasarimi-gorsel-tutarlilik
mobil-web-sitesi-tasarimi-gorsel-tutarlilik

 

7. Kullanıcıların yolculuklarını başka bir cihazda bitirmesi olasılığı

Ziyaretçilerin bir görevi mobilde başlatıp masaüstünde bitirmesi çok yaygındır. Bir örnek, bir kullanıcının e-ticaret mağazasından bir ürün satın aldığını varsayalım. Ziyaretçiler mobil cihazlarda gezinmeyi sever, ancak iş formları doldurmaya geldiğinde daha kullanışlı olduğu için masaüstüne geçmek isterler. Ziyaretçilerin bağlantıları e-postayla gönderebilmeleri için “Paylaş” özellikleri sunarız.

Tasarımlarımızı her zaman kullanıcılarımızın hareketlerini takip ederek doğrularız. 

mobil-web-sitesi-tasarimi
mobil-web-sitesi-tasarimi

 

Size de yukarıda bahsedilen ilkeler harika bir mobil web tasarımı oluşturduğumuzu düşündürdü mü? Aynı fikirdeyiz. Harika mobil web tasarımı siteleri tasarlıyoruz. Tasarımlarımızı gerçek kullanıcılarla doğruluyoruz. En iyi araştırılmış tasarım bile, nihayetinde bazı öngörülemeyen kusurlar içerir. Test etme, tasarım sürecimizdeki kusurları erkenden bulmamıza, düzeltmemize ve sonunda mükemmel bir kullanıcı deneyimi elde etmenize yardımcı oluyor.

Şimdi bizimle iletişime geçerek mükemmel bir mobil web sitesi tasarımı konusunda sohbet etmek ister misiniz ?  Ozman yeşil butona tıklayıp bize ulaşabilirsiniz. 

Dilek Esmer Baday

"Türk Web Bilişim" Kurucusuyum. 1988 yılında Ankara' da doğdum. 2007 yılında ilk reklam ajansımı açtım. Geniş bir kitle tarafından "seo danışmanı" olarak bilinirim. "İmkansızı mümkün kılmaya inanıyorum, çünkü pes etmek hiç eğlenceli değil." diyerek kendi alanımda zor projelere imza attım. Web Site Tasarımı, Seo Uzmanlığı, Reklam, Medya Yönetimi, E-Ticaret, Marka Yönetimi ve Kurumsal Kimlik alanlarında kendimi sürekli geliştirdim. Markanızın bilinirliğini artıran yöntemler uygular, garantili sonuçlar üretirim. İyi bir içerik üretcisi olduğum söylenir. Web sitelerinizi teslim etmek isteyeceğiniz sayılı uzmanlardan biri olarak bilinirim.

İlgili Makaleler

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Başa dön tuşu