Tutarlı olmak, aynı görünmek değildir.
Masaüstünde yan yana duran alanların mobilde alt alta gelmesi, deneyimin de doğru uyarlanmış olduğu anlamına gelmez. Ekran boyutu değişirken kullanım biçimi, görünür alan ve etkileşim koşulları da değişir. Buna rağmen kullanıcı, hangi üründe olduğunu ve yapmak istediği işe nasıl devam edeceğini anlayabilmelidir.
Bu nedenle tutarlılığı iki katmanda düşünmek yararlı: korunması gereken mantık ve bağlama göre değişebilen sunum. Ürün isimleri, işlem anlamları ve durumların açıklaması ortak kalırken, gezinme veya yerleşim farklılaşabilir. İyi bir uyarlama, bir ekranın küçük kopyası değil; aynı amaca ulaşan anlaşılır bir başka düzenidir.
Ortak dili renkten önce kurun.
Bir platformda “Favoriler”, diğerinde “Kaydettiklerim” deniyorsa önce bu iki alanın aynı işlevi taşıyıp taşımadığını netleştirin. Aynı işlevi taşıyan farklı adlar gereksiz belirsizlik oluşturabilir. Tam tersine, farklı işlemleri aynı adla sunmak da yanıltıcıdır.
Etiketler, boş durum mesajları, hata açıklamaları ve onay metinleri tasarım sisteminin dışında kalmamalı. W3C’nin tutarlı tanımlama rehberi, bir sayfa kümesinde aynı işlevi taşıyan bileşenlerin tutarlı tanımlanmasını ele alır. Web ve mobil ürün ailesinde de ortak bir sözlük kullanmak için yararlı bir tasarım ilkesidir; bu, iki ayrı platformun tüm kontrollerini birebir eşitlemek demek değildir.
Örneğin “Kaydet” taslağı korurken “Gönder” onay sürecini başlatıyorsa, bu fark her ortamda açık olmalıdır. Bir işlemin sonucunu kullanıcıya tekrar tekrar keşfettirmek yerine, anlamını adında ve geri bildiriminde görünür kılın.
Bileşenden önce durumları düşünün.
Bir butonun rengi ve köşe yuvarlaklığı, sistemin yalnızca görünen bölümüdür. Yüklenirken ne olur? İşlem başarısız olursa girilen bilgiler kalır mı? Aynı işlem ikinci kez tetiklenebilir mi? Bu soruların farklı ekiplerde farklı yanıtlanması, ortak görünen ekranlarda bile parçalı bir deneyim yaratır.
| Ortak ilke | Bağlama göre uyarlama |
|---|---|
| Aynı işlemin adı ve sonucu | Butonun ekrandaki konumu |
| Seçili filtrelerin anlamı | Yan panel, açılır alan veya mobil panel |
| Hata açıklamasının içeriği | Mesajın yerleşimi ve sunumu |
| Bilginin önem sırası | Kolon sayısı ve içerik yerleşimi |
| Markanın temel görsel dili | Platforma uygun gezinme ve geri davranışı |
Ortak bileşenlerin yanında kullanım kararlarını da belgeleyin. Bir bileşenin ne zaman kullanılmaması gerektiğini yazmak, yalnızca doğru örneğini göstermek kadar değerlidir. İçerik uzadığında, veri eksik olduğunda ve çeviri geldiğinde neler olacağını da aynı kapsamda değerlendirin.
Yalnızca ekranları değil, yolculuğu karşılaştırın.
Kullanıcının bir platformdan diğerine geçmesi bekleniyorsa, hangi bilgilerin taşınacağını baştan belirleyin. Sepet, taslak veya favorilerin ortak görünmesi yalnızca arayüz kararı değildir; hesap, veri ve senkronizasyon altyapısına bağlıdır. Böyle bir süreklilik sağlanmıyorsa varmış gibi anlatmayın.
Bir ürünü bulma, seçme, bilgi girme ve sonucu kontrol etme görevini iki ortamda da adım adım deneyin. “Bu ekranda aynı bileşen var mı?” yerine “Bu noktada kullanıcı aynı şeyi anlayabiliyor mu?” diye sorun. Yalnızca başarılı akışı değil, bağlantı kopması, boş veri ve yanlış giriş gibi durumları da ele alın.
Platformlar arası kontrol listesi
- Aynı işlevlerin isimleri tutarlı mı?
- Önemli bilgiler her iki ortamda da erişilebilir mi?
- Yükleme, hata ve başarı durumları tanımlı mı?
- Mobilde geri ve kapatma davranışları anlaşılır mı?
- Taşınan veya taşınmayan veriler kullanıcıya açık mı?
- Uzun içerik ve farklı ekran boyutları denendi mi?
Tutarlılık tek seferlik bir görsel kontrol değildir. Yeni özellikler eklenirken ortak kararların korunması ve gerektiğinde birlikte güncellenmesidir. Bu yaklaşım, birbirinden farklı ekranların aynı ürün ailesine ait hissettirmesini sağlar.
