Apple’ın Akışkan Arayüz Tasarımı
iOS ve Android tarafsız baktığımızda; Apple eskiden beri iPhone’un akıcı ve herkesin eline alır almaz rahatlıkla kullanılabilir olmasını önemsedi. İstediğini elde etmek içinse her zaman tek bir yöntem kullandı: Doğallık. Bir çok tasarımsal üründe olduğu gibi iPhone’da doğadan ilham aldı.
Steve Jobs’ın biyografisine baktığımızda görürüz ki Jobs, Apple’ın herkesin birden bire kullanabileceği ve hatta kullanım kılavuzuna ihtiyaç duymayacağı cinsten ürünler ortaya çıkarması gerektiğini düşünüyordu.
Örneğin iPhone uygulama ana ekranının sağa sola kaymasını gerçek hayatta bir kitap sayfası ile karşılaştırılabilir. Bir kitap sayfasını yukarı aşağı çeviremeyeceğimize göre iPhone’da da sayfaları sağa sola çevirmeliyiz. Her akıllı telefon zaten öyle değil mi diye soracak olursak; eski Androidlerin bu konuda kafası çok karışıktı.
Başka bir örnek bilgisayar imleci olacak. Ekrandaki parmak hareketleri bilgisayar imleci alışkanlığımıza göre tasarlandı. Eskiden beri bilgisayardaki fare kullanma alışkanlığımızda bir fareyi nasıl kullanıyorsak, parmağımızı da ekranda fare gibi gezdiriyoruz.
Ekran Akışkanlığı
Gecikme Süresi
Ekrana dokunduktan sonra ekranda oluşan reaksiyonda gecikme olursa, telefon bize yanıt vermemiş gibi bir hisse kapılırız. Bu nedenle ekran, dokunmalara ne kadar hızlı yanıt verirse doğallık -böylece akışkanlık- o kadar artıyor.
iPhone’da sadece ekranın yanıtının gecikmesine değil, kullanıcının gecikmelerine de müdahale etmek istemişler, nasıl mı? Tabii ki tasarımla…
iPhone ‘gestures’ diye adlandırdığımız parmak hareketleri, iPhone X’te home tuşunun kalkmasıyla çok önemli hale geldi. Hatta öyle demek de yetmez, neredeyse en önemli nokta oldu. Çünkü home tuşunun yaptığı tüm işlemleri iPhone X ile birlikte gelen ‘gesture’lar yapıyor. Yazının devamında gesture, ‘parmak hareketi’ diye geçecek.
Parmak hareketlerindeki tasarım sizi nasıl hızlandırabilir ki? Cevabı şu; parmak hareketlerini uygulanmadan önce ne yapacağınızı düşünmeniz gerekmezse, yani ilk önce ekranla etkileşime geçip sonra ne yapacağınıza karar verdiğinizde hızlı bir işlem yapmış olursunuz.’ Karışık mı oldu, Giflerden yardım alalım;
Bunlar küçük ve gereksiz detaylar gibi gelebilir. Fakat bunu bir de yanlış uygulamayı açtıktan sonraki 2 saniyeyi düşünerek tekrar gözden geçirin.
Home tuşu olan iPhone’larda yanlış bir uygulama açtığınızda zaten mecburen eliniz home tuşuna gidecek (uygulama açılana kadar eliniz home tuşuna gidiyor ve neredeyse zaman kaybı yok) Fakat home tuşu olmayan iPhone’larda eliniz zaten ekranda, eğer böyle bir parmak hareketi olmasaydı, önce ekranın açılmasını bekleyecek, ardından elinizi alta götürüp uygulamayı arkaya atmanız gerekecekti.
Fotoğraf uygulaması daha açılırken fotoğraf seçme işini ne kadar denesem de beceremedim, daha doğrusu yetişemedim. Ama mantıklı mı mantıklı; ileride telefonu yavaşlatmaya karar verirlerse işimize yarar 😄
Ekran Tepkisi
Artık tamamen ekranla iletişim halindeyiz. Bir uygulamaya tıkladığımızda, bildirim merkezini açtığımızda v.b. ekranda bir şeyler görmek isteriz. Çünkü ekran, hareketimize cevap verildiğini anlamamız için titreşim, ikon rengi değişimi gibi geri bildirimler sunar. Bunların haricinde yukarıdaki giflerde de görüldüğü üzere uygulama küçük bir ölçekten başlar ve hızlıca tüm ekranı kaplar.
Sınırlar Olduğunu Belli Etmek — Rubber Banding
Bir web sitesinde gezinirken yazının bitip bitmediğini anlamak için bir kaç kere daha aşağı kaydırırız. Aynı şey uygulamalarda gezinirken de olur; mesela notlarda ya da fotoğraflarda. Apple aşağı veya yukarı kaydırdığınızda ‘burada bir şey yok’ demek için aşağıdaki GIF’teki gibi bir hareket sergiler. Buna ‘rubber banding’ denir.
Chan Karunamuni (GIF’lerde görünen sunucu) eğer böyle bir geri bildirim olmasaydı, ‘içeriğin sonuna gelmiş bir metinle donan telefon arasındaki farkı anlayamazdık’ diyor.
Animasyonlar
Göz yormayacak ve geçişleri yumuşatacak animasyonlar nasıl olmalı? Apple bunun için sadece saniyede gösterilen kare sayısının yeterli olmadığını, farklı kriterlere de ihtiyaç duyulduğunu aşağıdaki GIF’le gösteriyor;
Aynı zamanda animasyon hızı ve her karenin görünümü önemli. Bunun için Motion Blur ve Motion Stretch kullanılıyor.
Bir uygulama ikonuna tıkladığımızda, ikon büyüyüp tüm ekranı kaplarken motion stretch ile geçişin yumuşak olması sağlanıyor.
Sonuç olarak bizim farkında bile olmadığımız ihtiyaçlarımızı karşılayan tasarımlar ortaya konmuş. Bir uygulama tasarlarken dokümanlar elbette en önemli kaynağımız olacak ama böyle sunumlardaki detaylar da kullanıcı arayüzleri hakkında güzel tüyolar veriyor.
İletişim için Twitter ya da iletisim@alicorak.com adreslerini kullanabilirsiniz.
