Mobil Web Tasarımı Daha İyi Kullanılabilirlik için 10 İpucu

Mobil web taramasının bir sonraki ana İnternet platformuna dönüşmesi bekleniyor. Artık teknoloji sayesinde elinize uyan mobil cihazları kullanan hemen hemen her yerden internette gezinmek artık çok kolay. Mobil web tasarımında iyi kullanılabilirlik uygulamalarında yetersiz kalmak, çeşitli popüler mobil web sitelerinde gezinmenizi zorlaştırır. Mobil cihazlar için tasarım yapmak, standart web sitesinden daha basit ve işin yapılması için daha fazla işe dayalı olması gerekir, çünkü kullanıcılar belirli ve acil bir şey arar.

Başlıca içerikleriniz için kullanılabilir alanın en az miktarını nasıl kullanacağınızı dikkate almalı ve mobil kullanıcılar için ilgi çekici kalmalısınız. Sitenizi yavaşlatacağından büyük resimlerden ve flash animasyonlardan kaçının. Mobil web siteleri için işlevselliğin stilden daha önemli olduğunu unutmayın. Web siteniz kodlanmışsa ve uygun şekilde tasarlanmamışsa, bir telefonda daha iyi, diğerinde daha kötü veya daha kötü olarak görünebilir, hiç görüntülenmeyebilir. Tüm mobil cihazlarla uyumlu olup olmadığını test edin, doğrulayın ve kontrol edin.

Yalnızca masaüstü veya dizüstü bilgisayarlarda değil, aynı zamanda mobil cihazlarda da erişilebilen web sitesi oluşturmanıza yardımcı olmak için, mobil web sürümünün doğrudan bağlantısıyla birlikte örnek resimlerle birlikte mobil web tasarımında göz önünde bulundurulması gerekenler şunlardır.

1. Ekran çözünürlüğüne karar verin

Mobil dünya, farklı ekran boyutlarından çözünürlüklere ve çeşitli şekillere kadar çok çeşitli tasarım düşüncelerine sahiptir. Yeterli ekran genişliği ve izleyici boyutu arasında bir denge kurmayı hedefleyin. Mevcut mobil cihazların özelliklerini öğrenin ve en iyi kararınızı kullanın. Mobil geliştiriciler için zor olan, farklı platformlar için sayfaları yeniden oluşturmak zorunda kalmadan, çeşitli ekran boyutlarında uygun şekilde görüntülemenin bir yoludur.

İşte Uxbooth.com tarafından yayımlanan makaleleri ile Şubat 2011 itibariyle mobil cihazlarda popüler olan web çözünürlüklerinin bir listesi., Mobil Web Tasarımında Dikkat Edilmesi Gereken Noktalar (Bölüm 2): Boyutlar, David Leggett tarafından. Yazar, düzen tasarımı için ekran boyutları ve çözümleri hakkında birkaç nokta açıklıyor.

2. Web sayfalarını küçük porsiyonlara ayırın

Metnin uzun bölümlerini okumak zor olabilir, bu yüzden bunları birkaç sayfaya yerleştirmek kaydırmayı bir yöne sınırlar. Düşük öncelikli içerikten kurtulun. Kaydırılan tek bir metin sütununa yapıştırın, böylece yatay kaydırma olmaz.

Aşağıdaki örnek için, CBS News mobil web sitesi sürümü sadece ana haber bölümünü gösterir ve haber makalelerini küçük parçalara böler. Treehugger en yeni makaleleri ve en son tweet'lerini tam web sitesinin bazı özellikleri ile birlikte sunarken. Her iki sitede de kullanıcının makalenin kalanını görüntülemek için bir metin bağlantısını tıklatması.

CBS Haberleri

Çevreci

3. Tasarımı basitleştirin

Sadelik kullanılabilirliğe eşittir. Site içerisinde herhangi bir zorluk çekmeden hareket etmelerini sağlayın. Tabloların, çerçevelerin ve diğer formatların dahil edilmesinden kaçının. Dolgu kullanıyorsanız, normal bir web sayfası için kullandığınızdan çok daha düşük bir mutlak minimumda tutmayı unutmayın. Masaüstü bilgisayarlara kıyasla, mobil web sitelerindeki bağlantıları ne kadar çok tıklarsanız, yükleme süresi nedeniyle o kadar beklersiniz. Bununla, web sitenizi içerik ve navigasyon arasındaki dengeyle aşağıya indirmeniz ve basitleştirmeniz gerekir..

Örneğimize göre, Best Buy'ın mobil sürüm web sitesi yalnızca içerik için hiyerarşi seviyesini azaltan en temel ürün kategorilerini listeler. YouTube mobil giriş sayfası yalnızca dört en yeni spot videosunu gösterirken.

En iyi satın alım

Youtube

4. Tam web sitesini görüntülemek için Seçenek

Mobil ziyaretçilerinize, kullanıcının yalnızca sitenin masaüstü sürümünün erişebildiği diğer içerikleri ve özellikleri bulması ve görüntülemesi için web sitenize geri dönmesi için bir bağlantı sağlayın. İzleyicileriniz kesinlikle çok fazla dikey kaydırma yapacaklardır, bu yüzden 'Başa Dön' bağlantıları ile onlara yardım eterek sayfanın üst kısmına geçebilmelerini sağlayın..

Örnek olarak, Ars Technica'nın başlık üzerinde yer alan standart web sitesine bağlantı butonu vardır. Shangri-La’nın alt kısımda yer alan tam web sitesi bağlantısı olsa da.

Ars Technica

Shangri La

5. Gezinme yerleşimi

Kitlenizi tanıyın ve ne aradıklarının farkında olun. Sitenizde nasıl gezinmek istediklerini öğrenin. Hedeflenen mobil kullanıcılarınız değişen içeriği hızlı bir şekilde görmek istiyorsa, gezinme menünüzü içeriğin altına yerleştirin. Sayfa içeriğini görüntülemenin önüne geçmek için önce içerik ve başlığın görünür olması gerekir. Hemen belirli bir kategoride gezinmek isteyen kullanıcılar için gezinmeyi sayfanın en üstüne yerleştirin. Aşağıda mobil web tasarımında kullanılan çeşitli gezinme yerleşimi örnekleri verilmiştir..

D & G

devlet adamı

Günlük Burç Yorumu

6. Metin bağlantılarını kullanın

Ana web sitenizde kısa menzilli uçuş menüleri, rollover'lar veya diğer lüks araçlar kullanılabilir, ancak bir mobil tarayıcı muhtemelen kullanmayacaktır. Dinamik sayfa öğelerinin ve grafik bağlantıların kaynakları kullandığını unutmayın, bu nedenle iyi etiketlenmiş metin bağlantılarını tercih edin.

Ayrı Bir Liste

Reddit

7. Seçilen link arasında bir ayrım yapın

İmleci aşağı hareket ettirmek sayfayı kaydırır ve bağlantıları bir kerede vurgular. Bu nedenle, kullanıcıya hangi öğenin odakta olduğunu açıkça tavsiye etmek önemlidir. Bu, bağlantıların ve düğmelerin yazı tipini ve arka plan rengini değiştirerek veya tıklanabilir alanı 44 piksel x 44 piksel arasında büyütmek için basitçe bağlantılar çevresine bir miktar dolgu ekleyerek yapılabilir. Geek Squad ve Diesel tıklanabilir metinler için büyük fontlardan yararlandı.

İnek takımı

Dizel

8. Denge bağlantıları

Her sayfa indirme işlemi, sonuncusu yetersiz beslenen zaman ve sistem kaynaklarını tüketir; bu nedenle, site ziyaretçisini, aranan bilgilere erişmek için çok sayıda sayfayı taramaya zorlamamaya çalışın. Her sayfadaki bağlantı sayısı ile sitenin derinliği arasında bir denge kurun.

Flickr

heyecan

9. Kullanıcı metin girişini azaltın

Web sitelerinin mobil versiyonlarında metin girmek zordur. Kolayca ihtiyaç duyduklarını seçebilmeleri için radyo düğmeleriyle veya listeyle değiştirin. Cep telefonlarının, geleneksel klavye ve fareye erişimi olmadığını unutmayın. URL ne kadar kısa olursa o kadar iyidir, çünkü uzun URL'leri girmeniz monoton bir durumdur..

Aşağıdaki örneğimizde Fedex, kontrol listesini ve açılan menüleri kullandı. Tumblr, açılır menüyü kullanarak dilinizi seçmenize izin verirken.

Fedex

Tumblr

10. Hiçbir pop veya yenileme yok

Mobil tarayıcılar normalde pop-up’ları desteklemez. Olsalardı, içine girmeleri için çok dar bir alana sahiplerdi. Tahmin edilemeyen sonuçları önlemek için bunları kullanmaktan uzak durun. Ayrıca, cihazın sınırlı hafızasını doldurmamak için sayfaların periyodik olarak yenilenmesini sağlayın. Kullanıcının içeriği yenilemesine izin ver.

Kısaca

Yaratıcı olun ve mobil web tasarımınızı yeni bir şekilde uygulayın. İçeriğinizi yeterince çekici ve kullanılabilir hale getirin. Kullanıcılarınıza ne istediklerini, ne zaman istediklerini verin. Kullanıcılar, yalnızca mobil web'de aradıklarını bulmak için siteye daha derine dalmak istemez.

Size gerçekten ilham veren tercih edilen mobil siteleriniz var mı? Mobil web tasarım ipuçlarından bazılarını paylaşabilir misiniz? Bilmemize izin ver!

Daha fazla okuma

1. Duyarlı Web Tasarımı (Alistapart.com)
2. Sitenizi Mobil Dostu Yapın (Thinkvitamin.com)
3. W3C mobileOK Denetleyicisi (W3.org)
4. iPhone Simülatörü