Mobil tasarımda yeni trendler!
İster bir uygulama olsun ister bir internet sayfası ya da bir giyilebilir teknolojinin arayüzü, tasarım, kullanıcı etkileşimini artıran en önemli unsurlardan birisi. 2015’in öne çıkan tasarım trendlerini ele alan Monitise ekibi de yeni tasarım tercihlerinin kullanıcı deneyimi üzerindeki etkilerini “Mobil 2015: UI/UX Trendleri”nde inceliyor. Monitise MEA COO’su Fırat İşbecer, Marketing Türkiye için hazırladıkları trendlerle ilgili “Türkiye’de halen tasarımıyla fark yaratan mobil uygulamaların sayısı az. Umarız bu makale Türkiye’nin mobil ekosistemindeki kullanışlı ve design trendlerine uygun uygulama sayısını artırmaya yardımcı olur” diyor.
Daha sade tasarımlar şart!
Nedir? Gerçek nesnelerin temsillerini arayüze taşıdığımız tasarım anlayışı artık geçmişte kaldı. “Flat Design”, gösterişsiz tasarım tercihleri ile ekrandaki görsel kalabalıklığı yok ederek, mobilde daha sade bir estetik anlayışını ortaya çıkardı. Renk geçişleri (gradients) ve gölge gibi kullanıcı deneyimine faydası olmayan elementlerin ortadan kaldırılması ve negatif alanların değerlendirilmesiyle temel görsel öğelere odaklanan daha basit arayüzler yaratılmaya başlandı.
Neden? Daha sade bir tasarım tercihi, gözün önceliklendirilmek istenen içeriklere odaklanmasını engelleyen dikkat dağıtıcı unsurları ortadan kaldırır. Şık ve modern bir estetiğin yanı sıra kullanıcının ekranı hızlıca tarayabilmesini kolaylaştırır. Bu şekilde kullanıcıların algı süresini kısaltarak arayüzle daha iyi etkileşim kurmasını sağlar ve ekranda iletilmek istenen mesajlar daha kolay bir şekilde kullanıcıya ulaşmış olur.
Tek yazı tipi kullanılmalı…
Nedir? Bir arada farklı yazı tipleri kullanmak yerine tek bir yazı tipinin italik gibi farklı karakteristik özellikleriyle veya farklı büyüklüklerde kullanılarak ekrandaki içerik alanlarını daha belirgin hale getirilmesidir. Tasarımda kullanılan yazı tiplerinin sayısını düşürmek tipografinin gücünü ortaya çıkarır.
Neden? Mobil uygulama tasarımında tek bir yazı tipinin kullanılması yalnızca marka ile uyum açısından değil, aynı zamanda mobil sayfa ve web sayfası gibi markanın diğer platformlardaki tasarımıyla da tutarlı ve uyumlu olması açısından da önemlidir.. Bu şekilde tüm platformlarda arayüz bileşenleri optimize edilebilir. Tek yazı tipinin kullanılmasının kullanıcılar için ilgili içeriği bulma ve odaklanma konusunda sağladığı kolaylık, kullanılabilirlik açısından da avantajdır.
Çizgiler yerine boşluk ve bloklar temiz görüntü sağlıyor
Nedir? Bir ekrandaki belli kategorileri veya bölgeleri birbirinden ayırmak için daha önce çizgiler ve ayraçlar kullanmak yerine, tasarımda çizgilerden uzaklaşıp, kümelenmiş içerik bloklarının boşluklar ile birbirinden ayrılarak öne çıkarılmasıdır. Çizgi ve ayraç gibi elementler kullanıcının gözünü yorarak arayüzde kalabalığa neden olurken, boşluk ve blok kullanımı tasarımcının ekran içinde daha fazla alan kazanmasını mümkün kılıp, daha temiz bir görüntü sağladı.
Neden? Belirgin çizgilerin ve ayraçların kaldırılması arayüzün işlevselliğini öne çıkararak, mobil tasarıma modern bir görüntü getirir. Bu yeni tasarım tercihi ekrandaki gereksiz elementleri azaltarak, fotoğraf gibi medyaların veya yazı puntolarının daha büyük kullanabilmesine olanak sağlar. Böylece tasarıma görsel bir netlik kazandırıldığı gibi arayüz ekranının da daha efektif kullanması için yeni alanlar açılmış olur. Ekrandaki içerik gruplarının boşluklarla ayrılması kullanıcının gözünün çizgi varmışçasına ekrandaki farklı bölümleri belirmesini sağlar.
Kullanıcılar için önemli olacak bilgilere odaklanma sağlanmalı
Nedir? Kullanıcılar daha basit arayüzleri kullanmayı tercih ettikçe, tasarımcıların da kullanıcıların ekranda asıl görmek istedikleri bilgileri öne çıkarabilmek için tasarımlarında büyük punto ve dikkat çeken renk kullanımına yönelmesidir.
Neden? Büyük puntoda yazılar ve farklı renkler ile ekrandaki en önemli veriyi öne çıkarmak gözü rahatsız etmeden, kullanıcının otomatik olarak o bilgiye odaklanmasını sağlar. Bu şekilde uygulama içinde gezinme ve bilgi toplama deneyimi kolaylaşır ve kullanıcılar bilgiye daha hızlı erişebilir. Bu tasarım tercihini uygularken öne çıkarılması gereken bilgiler uygulamanın hedef kitlesine göre belirlenir. Her uygulama için öne çıkarılması gereken bilgiler değişiklik gösterebilir.
Mikro-Etkileşimler deneyimi zevkli hale getirir
Nedir? Mikro-etkileşimler uygulamanın kullanımı sırasında görülen animasyon, ses veya efekt gibi küçük görsel zenginleştirmelerdir. Bu etkileşimler kullanıcı bir işlemi tamamlandığında, bir ürünü favorilediğinde veya bir pop-up mesajı açıldığında ortaya çıkabilir.
Neden? Mikro-etkileşimler, bir işlemi yerine getirdikten sonra veya bir pop-up mesajın açılışında ortaya çıkabileceği gibi kullanıcıyı uygulama içinde bir işleme yönlendiren teşvik edici bir sinyal olarak da kullanılabilir. Mikro-etkileşimlerin iyi kullanıldığı uygulamalar hem kullanıcının uygulama ile etkileşimini artırır, hem de kullanıcı deneyimini daha zevkli hale getirir. İncelikle hazırlanmış mikro-etkileşimler kullanıcının dikkatini doğru öğeye çekerek ürünü diğer örneklerinden farklılaştırır.
Daha sade renk paletleri marka kimliğini net yansıtır
Nedir? “Flat Design”ın kullanılmaya başlandığı 2013’ten bu yana netlik ve sadelik sağlayan basit renk şemalarının kullanımı da bir trend haline gelmesinin ardından tasarımcıların daha temiz bir görüntü için daha az renk kullanmaya başlamasıdır.
Neden? Renk kullanımı; ekranda belli bir atmosfer yaratmak, tüketicinin gözünü belirli bir alana yönlendirmek ve marka kimliğini kullanıcıya aktarmak için gerekli bir unsurdur. Daha az renk kullanarak marka kimliği de daha net yansıtılabilir. Buna ek olarak, kullanıcılar çok fazla renk kullanımının yaratacağı karmaşadan kaçınmak için, yalın bir renk paletinin kullanıldığı bir uygulamayı tercih edebilir. Daha az renk kullanımı, ayrıca uygulamadaki kilit özelliklerin öne çıkarılmasını kolaylaştırarak uygulama içerisinde gezinmeyi de kolaylaştırır.
Katmanlı arayüz dikkatleri nesnelere çeker
Nedir? Daha önceleri arayüzler, “skeuomorphizm” denilen nesne taklit ilkesini merkez alıyordu. Bu tasarım ilkesinde kullanılan elementler gerçek yapı veya nesnelerden esinleniyordu. Örneğin dijital takvimin masa üstündeki kağıt takvimi çağrıştırması, uygulama ikonlarının üzerindeki 3D “derinlik”, mobil telefondan gelen analog fotoğraf çekme sesi… Fakat görüyoruz ki “Flat Design” ile artık bu ilkeden uzaklaşıldı. Katmanlı arayüz (Layered Interface) yaklaşımı derinliği farklı yollardan yaratacak fırsatları da beraberinde getirdi. Katman kullanımı üç boyut hissinin yaratılmasına yardımcı olurken daha kullanıcılar için de daha “hissedilebilir” deneyimler de sundu.
Neden? “Flat Design”ın uygulanması “aşırı sade” olma riskini de beraberinde getiriyordu. 3D olan fiziksel dünyaya bağımlılıkları dikkate alındığında kullanıcılar uygulamalarda nasıl gezinti yapacak ya da etkileşimde bulunacaktı? Katmanlar, z-ekseninin sunduğu bütün avantajları kullanarak bir nesneyi başka bir nesnenin üzerinde gösterebilme olanağını sundu. Böylelikle katmanlaştırma ve derinliği artırma, farklı nesneler arasındaki ilişkinin belirlenmesine ve dikkatleri belli nesnelere çekmeye yardımcı oldu.
Hayalet butonlar hiyerarşiyi algılatır
Nedir? Hayalet butonlar (ghost buttons) herhangi bir rengi olmayan şeffaf butonlardır. Kenarları ise çok incedir ve tam açılı ya da yuvarlak köşeli dikdörtgen veya kareler gibi basit şekillere sahiptirler. Bu butonlardaki yazılar basit ve minimum seviyededir.
Neden? İlk bakışta dikkat çekmeyen bu basit butonlar; gözü almadıkları halde görünürde sade ve trendlere uygun oldukları için kullanıcıların dikkatini çekebilir. Hayalet butonlar ekrandaki önceliklendirmeyi kullanıcıya aktarmak için tasarlanabilir. Eğer ekranda birden fazla farklı buton var ise hayalet butonlar, bu butonlar arasında bir hiyerarşi kurulmasını sağlar. Örneğin, akıştaki opsiyonel veya ara adımlar için hayalet butonlar tercih edilebilir. “Material Design” akımının bazı örneklerinde hayalet butonlar için kullanılan belli belirsiz gölge efektleri de kullanıcıların bu hiyerarşiyi algılamasına yardımcı olur.
El hareketleriyle kontrol interaktif etkileşim sağlar
Nedir? Jiroskop ve hareket sensörlerinin entegrasyonu ile mobil cihazların hareketleri algılayabilecek duruma gelip, kullanıcı ile cihaz arasındaki etkileşimin tıklamanın ötesine geçerek, gerçek hayattaki el hareketlerinin ekran üzerine taşınmasıdır.
Neden? Kullanıcıların el hareketlerini kullanması sezgisel bir durumdur. Yaşı veya cinsiyeti fark etmeksizin bir kullanıcı bir öğeyi silmek istediğinde o öğeyi ekranın dışına taşımak isteyecektir. Kullanıcının daha az tıklayacağı ve daha fazla kaydırma yapacağı bir deneyim, ekranı yalnızca bir tıklama alanı olmaktan çıkararak uygulamaları daha interaktif yapar.
Animasyon ve hareketler beğeniyi artırır
Nedir? Yazılımdaki yenilikler sayesinde tasarımcılar artık arayüzleri tasarlarken tasarımlarına hareket (motion) katabilmenin de avantajını kullanabilir duruma geldi. Hareket tabanlı tasarım öğeleri; 3D derinliği taklit etmek için tercih edilen ara geçişler, animasyonlar ve hatta dokular gibi çeşitli yöntemlerin kullanılmasıdır.
Neden? Animasyon ve hareketler kullanıcıların ilgisini bir alana çekmeye ya da alandaki ilgilisini dağıtmaya yardımcı olur. Hareketlerle kullanıcıya görsel bir geri bildirim vermek ayrıca kullanıcının beğenisini artırır. Kullanıcının tasarım içerisinde hareketleri kullanması uygulamayla daha fazla etkileşimde bulunmasına ve içeriği benimsemesine yardımcı olurken, ekrandaki bir bölümün, datanın veya nesnenin diğerlerinden ayrışmasını sağlar.
Daha kısa işlem akışları kolaylık ve çabukluk getirir
Nedir? Tek bir işlemi yapmak için birçok sayfada gezinmek yerine tüm ara adımların yerleştirildiği tek bir ekran kullanımıdır. Bu yöntem kulllanıcının o işlemi yapmak için harcadığı zamanı ve çabayı azaltır. Örneğin, kullanıcı bir form alanına bir bilgi girdiğinde bir sonraki bilgi alanı otomatik açılır ve kullanıcı başka bir sayfaya veya form satırına tıklamadan o alanı doldurabilir. Daha kısa işlem adımları sesle arama yapma, parmak izi ile giriş yapma gibicihazların teknik özelliklerinden yararlanılarak da gerçekleştirilebilir.
Neden? Mobil kullanıcılar özellikle hareket halinde veya meşgul iken uygulama içerisinde işlemlerini kolaylıkla ve çabuk tamamlamak isterler. Uygulamanın sunduğu deneyimin bu beklentiyi karşılayacak şekilde tasarlanması kullanıcıya zaman kazandırarak daha az çaba sarf ettirir. Bu şekilde işlemlerin dönüşüm oranı (conversion rate) ve uygulamanın kullanım sıklığı artırılabilir.
Tasarım kılavuzu oluşturmak hataları mimimuma indirir
Nedir? Tasarım kılavuzları (design standards) projenin başlangıcında tasarımında kullanılacak renk, ikon, fotoğraf ve marjin gibi tasarım öğelerinin standardize edildiği görsel dili oturtmaya yarayan dökümanlardır.
Neden? Tasarım kılavuzlarıyla görsel standartları belirlemek uygulamanın kendi içinde ve farklı platformlarla uyumu olmasını sağlar, ekranlar arasında tutarlılık yaratmaya yardımcı olur. Bu sayede proje hayata geçirildiğinde muhtemel hatalar minimum seviyeye indirilmiş olur ve olası modifikasyonların yapılması daha da kolaylaşır.
Prototipler, düşük maliyetli “deneyimler” yaratır
Nedir? Prototipleme, ürünün canlıya çıkmadan önce elle tutulur en ilkel şeklinin oluşturulması olarak tanımlanır. Prototipin kullanımı; projede tasarımcının çok fazla zaman ve çaba harcamasının önüne geçerek, tasarımın işlevselliği ile ilgili değerli bilgiler verir.
Neden? Prototipler, düşük maliyetli “deneyimler” yaratarak projedeki özelliklerin kapsamı ve gereklilikleri gibi kilit bileşenlerin netleştirilmesine yardımcı olur. Kullanıcı deneyimini zenginleştirmek için yapılması gereken değişiklikleri ortaya çıkarır. Böylece ürünün geliştirilmesi sürecinde prototipler ile yapılan testler ile projede zaman ve kaynaktan tasarrruf edilir.