Mobil Web Tasarımından Dersler
Mobil geliştirme tüm öfke ve interaktif sanayi sayısız tablet ve akıllı telefonlar pazara geldikçe büyük kargaşa içinde.
Mobil uygulama geliştirme dikkat çekici olurken, mobil web biraz sessizce sürünür. Ancak mobil web, her geçen gün daha fazla geliştiricinin mobil cihazlar için optimize edilmiş arayüzler geliştirmesiyle ilerleme kaydetmektedir.
Mobil web ile ilgili en önemli şey, temel olarak geleneksel web tasarımı ve geliştirilmesinde kullanılan araçların hepsi ile inşa edilmiş olmasıdır.
Bu, uygulama geliştirmekten çok daha ulaşılabilir hale getirir. Ayrıca, birçok kullanıcı, tam bir uygulama gerektirmeden, bir şirketin web sitesini ziyaret etmek isteyecektir.
Mobil cihazlar için optimize edilmiş web siteleri, masaüstüne göre tasarlanmayacak kadar farklı ve benzer. Bazı faktörler çok daha önemli bir rol üstlenir. Örneğin, ekran boyutu varyasyonları, kullanıcı dikkat alanları ve kullanılabilirlik sorunları her zamankinden daha kritiktir.
Bu aynı sorunlar masaüstünde hiç mevcut değil, bazen gözden kaçırmak daha kolay. Burada, mobil web'de gerçekleşen optimizasyondan öğrenmek için bazı derslere bakacağız. Dersler, nasıl tasarlandığımızı ve geleneksel web tasarımı ve web sitesi mimarisi hakkında nasıl düşündüğümüzü doğrudan bilgilendirebilir.
Mobil web sitelerinde basitleştirilmiş gezinme
Mobil web sitelerine girerken ortaya çıkan ilk şeylerden biri, navigasyonun aşırı basitleştirilmesidir. Gezinme, mobil bir web sitesinde yalnızca çok belirgin ve merkezi bir hale gelmekle kalmaz, aynı zamanda, yalnızca en kritik öğelere odaklanmak için büyük ölçüde kısaltılır.
En üst düzey gezinmenin, çoğu mobil web sitesinde iki ila dört öğeye kadar nasıl kaynatılabileceğini şaşırtıcı buluyorum. Elbette, bir mobil web sitesindeki içeriğin hedef kitle için en uygun şekilde optimize edildiğini biliyorum. Örneğin, Gerçek Tabernacle Kilisesi Ana navigasyonunda altı seçenek var, sadece bir tanesi navigasyon için mobil versiyon ; ve bunu yapan (“İletişim”), tüm ana sayfanın odak noktasıdır.
Mobil sürümde bulunmayan içerik, elbette, hala tamamen alakalı. Mobil arayüz, kiliseyi bulmaya çalışan veya hizmet saatlerini kontrol etmeye çalışan kişileri yakalamaya ya da onlarla iletişime geçmeye yöneliktir. Bunlar, gezici sörfçünün en olası hedefleri. Bir web sitesinde tam bir web sitesine isabet edenler, bu şeyleri ziyaret etmek istedikleri bir yer olup olmadığını görmek için kiliseyi araştırmak istedikleri için bu şeyleri isteyebilirler.
Öyleyse, öğrenecek ders nedir? Bu iki arayüz tamamen farklı kitleleri hedeflemiyor ve tamamen farklı amaçlara sahip değil mi? Belki de, mobil arayüzün aşırı odak noktasından çok şey öğrenebiliriz. Yapabileceğiniz eylemler hakkında her şeyin nasıl olduğuna dikkat edin? Kilise, kontrol etmek için kutu gibi görünen tüm gezinti öğelerini ortadan kaldırdı.
Bir ilginç öğe, tam web sitesinde "Hakkında" gezinme seçeneğidir. Mobil web sitesi, hareket halindeyken insanlar için optimize edilebilir, ancak kiliseyi ve inançlarını okumakla ilgilenmeyeceklerini düşünmek için bir neden yoktur. Birisi size geçerken kiliseden bahsetmiş olabilir, size telefonunuzu bakmanızı ister.
Yani, bu elemanın navigasyon seçeneği değiştirilmelidir. Ya bunun yerine, “Bizim hakkımızda bilmelisiniz” gibi bir şey iletirse? Biraz uzun olsa da, daha yararlı bir tutum yansıtır. Genel bir “Hakkında” kovası, kimsenin okumadığı tüm bilgileri elinde tutan bir yer gibi hissediyor. “Bir ziyaretçinin kilisemize rehberlik etmesi” çok daha yararlı ve hedeflenmiş hissediyor.
Mobil arayüzün sadeliği ve odak noktası, her şeyin web sitesinde bir slot kazanmak için bir amacı olması gerektiğini göstermektedir. Aynı şey tam web sitesi için de geçerliyse, her şeyi açık bir işleve sahip olduğundan emin olmak için görünürde önemli içeriklerle doldurmaya ve daha eğilimli olmaya daha az eğilimliyiz.
Bu, çok görev odaklı bir zihniyet yansıtır. Her seçenek, kullanıcının aktif bir adım atmasına meydan okur. Her pasif seçeneğin tasfiye edilmiş ve mobil web sitesinde eyleme dönüştürülebilir öğelere indirgenmiş halidir. Bu bizi bir sonraki derse götürüyor: son derece göreve yönelik.
Mobil web siteleri, görev odaklı
Görev odaklı bir zihniyetle, tüm siteyi tekrar gözden geçirelim. Ana sayfa güzel tasarlanmış olsa da, harekete geçirici mesaj çok daha az belirgindir. İçerik, ilgilenmeye karar vermenizi bekleyen bilgi bitleriyle doludur.
Örneğin, gelen bir olayı vurgulayan büyük başlık, beni bir çeşit eyleme çağıramaz; çok pasif. Görev odaklı bir zihniyetle, “Daha fazla oku” harekete geçme çağrısı üzerinde büyük ölçüde iyileşebiliriz. Bu, harekete geçirmeyi çok daha belirgin hale getirmek kadar basit olabilir; Örneğin, zıt turuncu renkli büyük bir düğme. Ayrıca, arama “Daha fazla bilgi edinin ve kayıt olun” olarak değiştirilebilir.
Başka bir örnek, hoşgeldin mesajıdır. Burada iletilen niyet ve mesaj için teşekkür ederim. Mesaj, gerçek kişilerin web sitesinin arkasında olduğunu ve sayfanın kişisel hissettirilmesini sağladığını gösteriyor. Ama yine, bunu bir göreve yönelik bir zihniyetle inceleyelim. Böyle bir giriş için mükemmel bir takip, ziyaretçilere bir sonraki adımı atmaya teşvik eden net bir harekete geçirici mesaj olacaktır. Sonuçta, bunu okuyacak tek kişi yeni gelenler. Mevcut üyeler bunu etkinlik takvimi gibi şeylere atlar. Bu nedenle, "Bize zor bir soru sorun" veya "Ziyaret ettiğinizde neler bekleyebileceğiniz" gibi kullanıcılar için bir dönüşüm noktası sunuyoruz.
Aksine, “Özel konuk” kutusu harika. Önemli konuları ele alıyor ve insanları daha derine inmeye itiyor. Sadece sayfanın daha belirgin bir unsuru olup olmadığını merak ediyorum. Yine, üyeler gitmeleri gereken yere gidecekler; Bu yüzden web sitesine ve kiliseye yeni olanlara odaklanmak fırsatı en üst düzeye çıkarmak için çok yol alacaktı.
Bu siteyi gerçekten yendiğimi biliyorum, ama sevmiyorum ya da onun işlevini yerine getirmediğini düşünüyorum. Amacım sadece düşünmemize ve bir web sitesinin neye benzemesi gerektiği ile ilgili önyargılı düşüncelerimize meydan okumaktır. Aslında bu kiliseyi güzel ve işlevsel bir web sitesine sahip olmak için mobil bir uzantıya sahip olmakla övüyorum!
Mobil web siteleri içeriklerini önemli ölçüde küçültüyor
Gezinmeyi ayrıştırmakla ilgili bir başka ders ise, mobil web sitelerinin içeriklerini sürekli olarak küçültmeleridir. Web sitesinin temel işlevlerine ve amacına indirgenen seçenek sayısı değil, aynı zamanda kopya da büyük ölçüde azaldı.
Bazı durumlarda, kopyanın çoğu tamamen ortadan kaldırılır! Bu sorun, mobil içerik tam olarak iyi işlev görmüyorsa, bu içeriğin tamamı web sitesinde gerekli midir? Divi Aruba bunun iyi bir örneğidir. Fotoğrafın üzerine serilen çekici pazarlama konuşması, ana sayfa için olmazsa olmaz bir öğe gibi görünse de, mikro mobil web sitesi .
Mobil versiyonda, logo aynı görüntünün üstüne yerleştirilir ve yine de aynı mesajı verir: eğer böyle bir yere gitmek isterseniz, okumaya devam edin. İnsanları istenen eyleme sürüklemek için neden bu önemli noktayı kullanmıyorsunuz? Elbette tasarımcılar, ziyaretçileri müşterilere dönüştürmek için en kritik unsurun ne olduğunu biliyorlar. Bu bilgileri işe koy ve buradaki insanları, yumuşacık pazarlama konuşması yerine harekete geçiren önemli bir harekete geçir.
Bütün güzel şeyler, sans kabartması
Bu bizi bir sonraki derse götürüyor: havayı kaybetmek. Bir sonraki örnek bunun olumlu bir kanıtıdır. Seyahat Tex Teksas eyaleti için bir seyahat bilgi sitesidir. Akılda net bir amacı ve izleyicileri vardır. Neyse ki, tasarımcılar kabarık olmayan zihniyete tamamen sarıldılar.
Sadece mini mobil web sitesi Tamamen konu ve odak eylem öğeleri üzerinde odaklanmak, ancak tam web sitesi yok! Neredeyse hiç tüylenme görmeyen bir rahatlama. Texas tarihi gibi kasvetli bir şey içeriyorsa, çok cazip olurdu. İnsanlar tarih dersi istiyorlarsa, bu siteye gelmezlerdi. Bu web sitesinin tekil amacı ile alakalı olmayan içerikleri bulmak için zorlanacaksınız.
Her şeyi sorgulama alışkanlığına girin. Bu, bir web sitesini gerçekten kritik öğelerine indirgemenin tek yoludur; bu, iyi bir mobil web sitesinde tam olarak gerçekleşen şeydir. Web sitesi düzene koymak için zor seçimler yapılır ve başka türlü değerli içerikler kesilir. Ne olduğunu ve nuke onu çağır!
Markalama, mobil web'de kraldır
Web'de yaratıcılığım. Aslında, sektördeki en büyük değişikliklerin çoğu, statükoya sadık kalmamanın bir sonucu olarak ortaya çıkmıştır. Ama her şey için bir yer ve zaman var. Pek çok tasarımcı ödevlerini yaratıcı sularını serbest bırakmak için bir mazeret olarak kullanıyorlar. Bu, web sitesini müşteriye ve onların ihtiyaçlarına göre değil tasarımcı için bir tasarıma dönüştürür. Bu, mobil webin oldukça cesurca karşı uyardığı bir şey.
Markalaşma, mobil web'de inanılmaz derecede tutarlıdır ve en tutarlı parçalardan biri de logonun yerleştirilmesidir. Mobil web sitelerinde, sabit altbilgilerle altta herhangi bir çılgın logo bulamazsınız. İşlevsellik kraldır ve logolar her zaman en üstte görünür. Mobil bir web sitesine isabet etmeyi ve logoyu görmemenizi hayal edebiliyor musunuz? Ancak bu, pek çok dolu web sitesinde yaygındır.
Burada, minimal ve akıllara durgunluk veren bir tarzda eksik olan, kaçırılamayan markalaşma açısından zengin olan birkaç web sitesi var.
Buradaki ders işinize nasıl yaklaştığınız ve müşterilerinize verdiğiniz temel değer üzerinde derin bir etki yaratabilir. Müşterinin ihtiyaçlarının proje için tüm amacının olması gerektiğini anlayan her tasarımcı için, dünyaya ne kadar yaratıcı ve özgün olduklarını göstermek isteyen başka biri var.
Bir web sitesinin yapımında yer alan başka herhangi bir kişi gibi, web tasarımcısı da müşteriye hizmet etmede, işlerine yardımcı olma ve alt çizgiyi iyileştirmede tek fikirli olmalıdır. Mobil bir web sitesine koyduğunuz her öğe ile rolünü ve getireceği faydaları göz önünde bulundurun. Bu zihniyeti yaptığınız her şeye uygulayın ve yakında müşterinizde güçlü bir müttefik bulacaksınız.
Müşterinin ihtiyaçlarını ne kadar kucaklarsak ve web sitemize değer katmak için elimizden gelen her şeyi yaparsak, işimizde temel bir değişim göreceğiz. Müşterinin bakış açısından her şeye bakarak “havalı şeyler” inşa edeceğiz. Bu özellik karlarını artırmak için geçerli mi? İşlerini geliştirmek için tasarım nasıl değişebilir? Eğer işinizin bir yan ürünü müşteri için daha fazla parasa, o zaman her yerde fırsat bulacaksınız.
Gimmicks olmadan web siteleri
Mobil ağın en büyük başarılarından biri, toplam hile eksikliğidir. Adil olmak gerekirse, web üzerinde hile yapmak için bir yer ve zaman var. Aslında, kitapların bütün bölümlerini onlara adadım. Ancak, mobil web sitelerindeki hile eksikliği, bu harika fikirlerin gerçek bir amaca hizmet etmediğini gösteriyor.
Mobil bir siteye giden her şey birkaç filtreden geçmelidir. İçerik alakalı ve tamamen yararlı mı? İçerik kritik mi ve web sitesinin temel amacına hizmet ediyor mu? Web sitesi kullanımı ve anlaşılması kolay mı? Navigasyon alışılmamış mı? Eğer öyleyse, web sitesinin işlevi için kritik midir? Cevap evet olabilir, ancak daha sık değil, belirleyici bir hayır olacaktır.
Mobil geliştirmeden fark edilmeyen bazı hileler, açılış ekranları, olağandışı gezinme, anlamsız animasyonlar ve etkileşim, satır içi kaydırma bölgeleri, tek düzenler ve sabit genişlikli düzenlerdir. Mobil web'in verimliliği inanılmaz.
Sonuç
Gördüğünüz gibi, mobil web'den öğrenmek için bir dizi dersimiz var; Özellikle, bir web sitesinin gereksiz unsurlarını ortaya çıkarma yeteneği. Hayattaki birçok şeyde olduğu gibi, perspektifte ufak bir değişim, gözümüzü uzun zamandır verdiğimiz şeylerin gerçek değerine açar.
Web'in amacını gözden kaçırdığımızı söylemiyorum. Daha ziyade, çok daha stratejik bir zihniyeti benimsemeyi öneriyorum.
Patrick McNeil bir serbest yazar, geliştirici ve tasarımcı. Özellikle, web tasarımı hakkında yazmayı, web geliştirme konusunda insanları eğitmeyi ve web siteleri oluşturmayı seviyor. Patrick'in son kitap projesi Tasarımcının Web El Kitabı ; Bu makalenin satırları boyunca birçok konu içerir. Hakkında daha fazla bilgi edinebilirsiniz TheWebDesignersIdeaBook.com . Twitter'da takip et @designmeltdown .
Bu yazı DudaMobile tarafından getirildi, mobil web sitesi oluşturma şirketi.
Mobil tasarımın hangi yönlerini masaüstüne çevirmeyi deniyorsunuz? Mobil web'de basitlik ve hız görüyor musunuz?