Mobil Uyumlu Tasarımın Temel İlkeleri

Bir web sayfasını geniş ekranda hazırlayıp telefonda açtığınızda farklı bir deneyimle karşılaşabilirsiniz. Başlık birkaç satıra bölünür, menü alanı daralır ve yan yana duran kartlar üst üste gelir. Bu değişiklikler yalnızca ekranın küçülmesi değildir; içeriğin nasıl okunacağı ve kullanılacağı da değişir. Mobil uyumlu tasarım, aynı bilgiyi farklı alanlarda anlaşılır biçimde sunmayı amaçlar. Bütün öğeleri küçültmek, kullanılabilir bir telefon görünümü oluşturmak için tek başına yeterli olmayabilir.

İyi bir başlangıç sorusu, kullanıcının sayfada ne yapacağıdır. Bir yazıyı okumak, iletişim bilgisine ulaşmak veya kategori seçmek farklı görevlerdir. Önce esas içeriği ve önemli işlemleri belirleyin. Ardından bunların dar alanda hangi sırayla görünmesi gerektiğini düşünün. Bu yazı, içerik önceliği, metin, dokunma alanları ve görseller üzerinden temel ilkeleri açıklıyor. Belirli bir cihaz modeline göre tek ölçü vermek yerine, değişen koşullarda korunması gereken ilişkileri ele alıyor.

İçeriğin sırası tasarımın temelidir

Masaüstünde yan yana görünen bölümler telefonda çoğunlukla alt alta yerleşir. Bu durumda hangisinin önce geleceği önem kazanır. Ana mesajdan önce çok uzun bir yardımcı alan görünüyorsa kullanıcı aradığı bilgiye geç ulaşabilir. Önce içerik akışını bir liste gibi düşünün: Başlık, açıklama, temel işlem ve ayrıntılar hangi sırada olmalı? Bu sıralama yalnızca görsel konuma değil, sayfanın yapısına da yansıtılmalıdır. Farklı görünümde aynı anlam ilişkisi korunmalıdır.

Gereken bilgi görünür kalmalı

Dar alanda yer kazanmak için önemli açıklamaları kaldırmak cazip olabilir. Bunun yerine metni sadeleştirmek, tekrarları azaltmak ve yardımcı bilgileri uygun bir konuma taşımak seçeneklerdir. Kullanıcının karar vermesi için gereken içerik erişilebilir kalmalıdır. Küçük ekranda görünen ilk bölüm, bütün işin anlaşılmasına yardımcı olmalıdır. Bir düğmenin amacı veya bir form alanının açıklaması kaybolduğunda alan kazanılmış olsa da görev zorlaşabilir. Yerleşim ile içerik düzenlemesini birlikte düşünün.

Metin rahat okunabilmeli

Telefon görünümünde yazının ölçüsü, satır uzunluğu ve aralıkları birlikte kontrol edilir. Metni küçülterek daha fazla içeriği ilk ekrana sığdırmak, okumayı güçleştirebilir. Uzun başlıklar ve bağlantılar için de uygun davranış gerekir. Bir öğe ekranın dışına taşıyorsa kullanıcı bütünü görmek için yatay hareket etmek zorunda kalabilir. W3C’nin yeniden akış açıklaması, içeriğin dar alanda ve büyütülmüş görünümde düzenlenmesini ele alır. Bazı içerik türlerinin özel ihtiyaçları ayrıca değerlendirilir.

Metni büyüttüğünüzde sayfaya yeniden bakın. Başlıklar üst üste biniyor mu, düğmelerin yazısı kesiliyor mu veya önemli bilgi görünmez hâle geliyor mu? Kullanıcının varsayılan boyutu değiştirmeyeceğini düşünmek doğru değildir. Düzenin farklı okuma tercihlerine alan bırakması gerekir. Uzun bir yazıda metnin genişliği ve paragraf yapısı da önemlidir. Sadece bir ekran görüntüsüne değil, sayfa boyunca okuma deneyimine bakın. İlk bölümün iyi görünmesi bütün içeriğin aynı durumda olduğunu göstermez.

Dokunma alanları ve komşu öğeler

Bir bağlantının metni görülebilir olsa da parmakla seçmek zor olabilir. Öğenin alanı ve yanındaki başka seçimlere uzaklığı birlikte düşünülmelidir. Çok yakın iki küçük simge, yanlış seçime yol açabilir. W3C’nin minimum hedef boyutu açıklaması, hedeflerin boyutu ve aralığıyla ilgili ölçütleri anlatır. Burada tasarımın gerçek kullanımına bakmak önemlidir. Bir düğmenin çerçevesi ile tıklanabilir alanının aynı olup olmadığını da kontrol edin.

Sadece simge kullanmak yeterli mi?

Bir işlevin simgesi herkes için aynı anlamı taşımayabilir. Menü, paylaşım veya geri dönüş gibi işlemlerde uygun bir açıklama bulunması görevi netleştirebilir. Görünen metin, erişilebilir ad ve işlem sonucu birbirine uygun olmalıdır. Tasarımda fazla yer kaplamasın diye bütün sözcükleri kaldırmak, kullanıcının ne yapacağını tahmin etmesine neden olabilir. Alanı sadeleştirirken anlamı koruyun. Küçük bir ekran, açık dilin önemini azaltmaz; çoğu zaman daha görünür hâle getirir.

Menüyü gerçek kullanımda inceleyin

Az sayıda ana kategori varsa görünür bağlantılar kullanılabilir. Daha çok seçenek varsa menü yapısının nasıl açıldığı ve kapandığı açık olmalıdır. Menünün hangi bölümde bulunduğunu, seçili sayfanın nasıl gösterildiğini ve kullanıcının geri dönmek için ne yapacağını düşünün. Bütün seçenekleri tek satıra zorlamak metni küçültebilir veya taşma oluşturabilir. Alternatif yerleşimler içeriğin miktarına göre değerlendirilmelidir. Menü kararı, yalnızca ilk görünümün sade olmasıyla ölçülmez.

Açılır bir menü kullanıldığında klavye ve yardımcı teknolojilerle davranışı da önemlidir. Görsel olarak açılması, bütün kullanıcıların aynı işlemi yapabildiği anlamına gelmez. Odak sırası ve kapanma yolu gibi ayrıntılar değerlendirilmelidir. Bu yazı teknik uygulama talimatı yerine tasarım sorularını gösteriyor. Bir menünün kullanılabilirliği, açma düğmesinin görünüşünden daha geniştir. Mümkün olduğunca sade bir yapı, etkileşimin anlaşılmasını kolaylaştırabilir; fakat her sayfanın ihtiyaçları ayrı değerlendirilmelidir.

Görseller ve sayfa dengesi

Görselin alanı değiştiğinde kırpılan bölüm de değişebilir. Ana konu kenarda bulunuyorsa dar görünümde kaybolabilir. Farklı oranlarda nasıl göründüğünü kontrol edin. Görsel içinde önemli metin varsa bu metnin okunabilirliğini ayrıca düşünün. Bilgiyi yalnızca resme gömmek, küçük ekranda veya farklı erişim araçlarında sorun oluşturabilir. Açıklayıcı metnin sayfanın gerçek metin yapısında bulunması daha esnek bir düzen sağlar. Dekoratif görsel ile bilgi taşıyan görselin görevleri farklıdır.

Görsellerin yüklenme davranışı da deneyimin parçasıdır. Boyutların önceden belirtilmesi, içerik yüklenirken alanın ayrılmasına yardımcı olabilir. Görselin ekran için uygun biçimde hazırlanması, gereksiz veri aktarımını azaltmaya yönelik bir konudur. Fakat bütün resimleri aynı yöntemle ele almak yerine sayfadaki görevlerine bakın. İlk görülen önemli bir görsel ile aşağıdaki destekleyici görsel aynı önceliği taşımayabilir. Tasarım ve performans kararları, içerik sırasıyla birlikte düşünülmelidir.

Formlar ve geri bildirim

Bir form varsa alan başlıkları ve açıklamalar dar ekranda da görünmelidir. Yalnızca kutu içindeki kısa ipucu, kullanıcı yazmaya başladığında kaybolabilir. Hata oluştuğunda neyin düzeltilmesi gerektiğini açık söyleyin. Mesajı yalnızca renk değişikliğiyle vermek yerine açıklayıcı metin kullanın. Gönderme işleminin tamamlandığı veya beklediği durum da anlaşılır olmalıdır. Kullanıcı yaptığı işlemin sonucunu göremiyorsa aynı düğmeye tekrar basabilir. Geri bildirim, formun tasarımının bir parçasıdır.

Birden fazla koşulla kontrol edin

Tek bir telefon ölçüsünde yapılan kontrol sınırlı bilgi verir. Dar ve daha geniş ekranlarda, uzun başlıklarda ve gerçek metinlerle sayfayı inceleyin. Açık ve koyu görünüm varsa ikisini de kontrol edin. Dokunarak kullanımın yanında klavye ile dolaşma ve metni büyütme gibi durumlara bakın. Sorunları tek seferde çok sayıda değişiklikle düzeltmek yerine belirgin bir görev üzerinden ele alın. Böylece düzenlemenin neyi değiştirdiğini anlamak kolaylaşır.

Sonuç

Mobil uyumlu tasarım, içerik sırasını ve kullanım görevlerini dar alanda açık tutmayı gerektirir. Metin, dokunma alanları, menü ve görseller birlikte değerlendirilir. Önemli bilgiyi koruyup yerleşimi koşullara göre uyarlayın. Gerçek içerikle ve farklı kullanım biçimleriyle kontrol yapmak, yalnızca ilk ekranın güzel görünmesinden daha kapsamlı bir sonuç verir. Tasarımın amacı, kullanıcıya anlaşılır bir yol sunmaktır.