Bir tasarıma başlarken ilk açtığım çerçeve 390 piksel genişliğinde. Bugün en yaygın telefonların ekranı kabaca bu genişlikte. Masaüstü tasarımı sonra geliyor, telefondakini büyüterek.
Tersini yapmak çok daha doğal geliyor, biliyorum. Ekranımız büyük, Figma büyük, müşteriye gösterdiğimiz sunum büyük. Ama sitenize gelenlerin çoğu küçük ekrandan geliyor. Kararı kimin ekranında verdiğiniz, sitenin kimin için yapıldığını belirliyor.
Neden önce küçük ekran?
Büyük ekranda her şey sığar. Üç sütun, yan menü, iki buton yan yana, uzun başlık. Hiçbir şeyden vazgeçmek zorunda kalmazsınız. Sonra bunu telefona sığdırmaya çalışınca her şey alt alta dizilir, sayfa bitmek bilmez, en önemli buton ekranın beşinci kaydırmasında kalır.
390 piksel sizi seçmeye zorlar. Bir sütun var ve o sütuna aynı anda tek bir şey sığar. Hangisi önce? Hangisi hiç olmasa da olur? Bu sorular masaüstünde sorulmaz. Telefonda ise başka çare yok.
Küçük ekranda verilen karar büyüdüğünde genelde bozulmaz. Büyük ekranda verilen karar küçüldüğünde neredeyse her zaman bozulur.
Kurallarım
Bunlar kesin kurallar değil, her projede kendime hatırlattığım şeyler.
1. Tek ekranda tek iş
Telefonda ilk açılan ekran ne yapıldığını ve bir sonraki adımı söylemeli. Bir başlık, bir cümle, bir buton. Üç ayrı mesajı aynı ekrana sığdırmaya çalışırsanız hiçbiri okunmaz.
2. Parmak, fare değildir
Dokunulacak her şey en az 44 piksel olmalı. Bu, parmak ucunun rahatça bastığı yaklaşık alan. Yan yana iki bağlantı arasında da nefes payı olmalı; yoksa yanlış yere basılır ve kullanıcı sitenin bozuk olduğunu düşünür.
Ana butonu başparmağın rahat eriştiği yere, yani ekranın alt yarısına koymaya çalışıyorum. Telefonu tek elle tutan birinin sol üst köşeye uzanması zor.
3. Üzerine gelmek yok
Masaüstünde fareyle üzerine gelince açılan menüler, ipuçları, gizli bilgiler telefonda yok. Parmakla “üzerine gelmek” diye bir şey yok. Hover’da gösterdiğim her bilginin telefonda görünür ya da dokunarak açılır bir karşılığı olmalı.
Bu sitedeki işler listesi buna iyi bir örnek. Masaüstünde fareyi bir işin üstüne getirince imleci takip eden bir önizleme kartı açılıyor. Telefonda aynı bilgi yan yana kayan kartlar olarak duruyor. Aynı içerik, iki farklı ekranın diline göre.
4. Yazı boyutu 16’nın altına inmez
Gövde metni için 16 piksel benim alt sınırım. Form alanlarında bu daha da önemli: iOS’ta yazı boyutu 16 pikselin altında olan bir alana dokunduğunuzda sayfa kendiliğinden yakınlaşır. Kullanıcı formu doldururken sayfa bir anda büyür, düzen kayar. Küçük bir ayrıntı, ama formu yarıda bıraktırmaya yetiyor.
5. Yatay kaydırma yalnızca bilerek
Telefonda sayfanın yana kayması neredeyse her zaman bir hatadır. Taşan bir görsel, uzun bir bağlantı, sabit genişlikli bir tablo. Yayına almadan önce her sayfayı dar ekranda açıp kontrol ediyorum.
Bilerek yana kaydırdığım tek şey kart şeritleri. Onlarda da bir sonraki kartın kenarını gösteriyorum ki kaydırılabileceği anlaşılsın.
6. Tablo telefonda tablo olmayabilir
Masaüstünde dört sütunlu bir karşılaştırma tablosu çok net. Telefonda ise okunamaz hâle gelir. Tabloyu küçültmek yerine her satırı bir kart gibi alt alta diziyorum: başlık üstte, değerler altında.
7. Hız da tasarımdır
Telefon her zaman hızlı internette değil. Metroda, kalabalık bir kafede, tek çizgi çeken bir sokakta açılıyor. Büyük bir görsel, ağır bir yazı tipi ya da gereksiz bir kütüphane, ilk ekranı saniyelerce geciktirebilir.
Görselleri ekran boyutuna göre ayrı ayrı hazırlıyorum; telefon, masaüstü için hazırlanmış büyük görseli indirmek zorunda kalmıyor. Animasyonların sayfanın ilk açılışını beklettirmesine izin vermiyorum. Hareketi azaltmayı seçen kullanıcıya da hiç animasyon göstermiyorum.
Sonra büyüt
Telefon tasarımı oturduktan sonra masaüstüne geçiyorum. Burada iş eklemekten çok, alanı değerlendirmek. Tek sütun ikiye, üçe açılıyor. Başlık büyüyor. Fareyle etkileşim eklenebiliyor. Ama iskelet aynı kalıyor: sıralama, öncelikler, mesaj.
Bu sitenin her sayfasını da böyle tasarladım: önce 390, sonra 1440. İkisini yan yana tutmak, birinde verdiğim kararın diğerinde bozulup bozulmadığını hemen gösteriyor.
Son kontrol gerçek telefonda
Tarayıcının telefon görünümü iyi bir başlangıç ama yeterli değil. Yayına almadan önce siteyi kendi telefonumda, mümkünse başka bir telefonda da açıyorum. Tek elle geziyorum, formu gerçekten dolduruyorum, bir butona basmayı kaçırıp kaçırmadığıma bakıyorum.
Kısacası
Siteyi büyük ekranda tasarlayıp telefona sığdırmayın. Telefonda tasarlayıp büyük ekrana açın.