Benim Güzel, Native Storylerim
Storyly’i mobil uygulamalarına eklemek isteyen kullanıcılarımıza her zaman destek oluyoruz. Tasarım anlamında da önerilerde bulunuyoruz. Öneri niteliğindeki Design Guide’ımızın bir kısmını bu yazıda toplayıp yer yer nedenlerini ve nasıllarını anlatacağım. Storyly’nin bir mobil uygulamadaki hissiyatını iyileştirmek için neler yapılabilir? Native bileşen gibi görünmesi neden önemlidir? Gibi sorulara cevap arayacağız.
Sonraki kısımların daha iyi anlaşılması için üründen bahsetmem gerekiyor. Storyly, mobil uygulamalarınız için story formatında içerikler üretmenizi sağlayan ayrıca oluşturduğunuz storyleri CTA, Poll, Quiz, Rating, Countdown ve Product Tag gibi interaction elementleriyle desteklemenize imkan tanıyan hatta custom source yaratıp, otomatik storyler oluşturabileceğiniz ve hatta bu storyleri kullanıcıya göre segmentleyebileceğiniz bir user engagement aracıdır. Daha fazla bilgiye buradan ve şuradan ulaşabilirsiniz.
Kullanıcılarımıza, Storyly’e ayrılan alanın native görünmesi gerektiğini söylerken nasıl yapabileceklerini de bir design guide vasıtasıyla anlatıyoruz. Native görünümün elde edilmesini de bazı düzenlenebilir alanlara borçluyuz. Düzenlenebilir alanlar, tasarımsal anlamda çok fazla esneklik sağlıyor.
Neden Native Görünmeli?
Play Store ve App Store’da milyonlarca uygulama mevcut. Android tarafında Material Design’ın dilini konuşmaya çalışan uygulamalar varken, iOS tarafında da Human Interface Guideline’ı takip eden uygulamaların sayısı dikkate değer. Bu guide’lar sayesinde Android ve iOS’teki uygulamalar, bulundukları platformun genel deneyiminin bir parçası oluyorlar. Olmaya çalışıyorlar.
Bu platformlardaki uygulamaların bir de kendi iç tutarlılıkları söz konusu. İç tutarlılığı açıklamak için basit bir örnek: “Uygulamadaki actionable elementlerin mavi olarak belirlenmesi.” Bu sayede kullanıcı, mavi gördüğü alanlarla etkileşime girebileceğini öğrenir, öğretmeye çalışırız. Ve bu öğrenim artık bir beklentiye dönüşebilir. “Hmm demek ki mavi gördüğüm yerlere tıklayabilirim.” gibi.
Kullanıcının bu gibi öğrenimlerini, Storyly’e ayrılan alanı tasarlarken de uygulayabiliriz. Bunu iç tutarlılıktan ödün vermeden yapmak kullanıcıdaki bilişsel yükü hafifletecektir.
Biraz abartarak anlatmak istiyorum. Zeynep, bu sabah her gün severek kullandığı uygulamaya yine girmek istedi. Uygulamada hep dokunduğu butonun gelişigüzel bir stile büründüğünü gördü. Belki de artık bu buton öyle bir görünüme sahipti ki “ilk bakışta” hep dokunduğu butonun aynı işleve sahip olduğunu bile anlamadı. Güvenilmez ve tutarsız bir buton. Kullanıcıyı daha ne kadar uzaklaştırabiliriz bu butondan?
Sanırım biraz daha abartırsam banner örneğini verebilirim. Burada vurgulamak istediğim nokta, uygulamamızda reklam gösterimi yapacağımız alanın tam kontrolümüzde olamaması. Reklam banner’ı için belirli bir alan belirlenir ve orada bir reklam döner. Storyly’nin böyle hissedilmesini kim ister?
Uygulama arayüzünde Storyly’e ayırdığımız alan için bu kaygıyı gütmeliyiz. Yani Zeynep sabah uyanıp daha yüzünü yıkamadan telefonuna sarılacak. “Günaydııın” mesajlarını attıktan sonra yine o çok sevdiği uygulamayı açacak. Fakat bu kez yeni ve büyülü bir şeylerin olduğunu fark edecek.
yeni ve büyülü…
Storyly alanını tasarlarken o büyülü anı elde etmeye çalışıyorsak güzel mi oldu yoksa çirkin mi oldu gibi göreceli sorularla yola çıkmamalıyız. Birinci önceliğimiz, uygulamanın genel deneyimiyle ve iç tutarlılığıyla uyumu olmalı.
Peki bunu nasıl yapabiliriz?
7 Adımda Native Story Grouplar Oluşturmak
Yukarıda minik bir giriş yaptığımız düzenlenebilir alanların biraz daha detayılarına inerek görsellerle destekleyeceğim. Ama temelde yapacağımız şey; Storyly’nin ilk günden beri sanki o uygulamanın bir parçasıymış gibi görünmesini sağlamak, diğer bileşenlerle uyumlu olmasına dikkat etmek, önceden oluşturulan tasarım diline Storyly’i de dahil etmek olacak. Storyleri kendine göre yorumlamış bir kaç örnek uygulama bırakıyorum:
Nasıl ki bir kullanıcı uygulamaya girip buttonlara, checkboxlara, switchlere dokunurken tereddüt etmiyorsa, aynısı Storyly’e ayrılan kısımda da geçerli. Mobil uygulamanın kullanıcıları o alana güvenmeli. O alana dokunmaktan, orada gezinmekten çekinmemeli, keyif almalı.
1- Story Group Border Color
Story Grouplara actionable element gibi davranmamız ve böyle yaklaşmamız sağlıklı olacaktır. Ve doğal olarak kullanıcının saniyelik de olsa “tıklanabilir bir alan” olduğuyla ilgili şüpheye düşmemesi kritik nokta.
Bunu yapmak için ilk akla gelen primary butonda kullanılan rengi borderlara uygulamak olabilir. Güzel bir seçenek. Bunu uygulamak, default gelen renklerden daha iyi bir yol olabilir.
Clickable bileşenlerde farklı renkler kullanmış olabiliriz. Elimizde iki tane clickable element rengi olduğunu varsayalım. İki farklı rengi de border’da deneyebiliriz.
Bir tane gerçek örnek bırakıyorum:
Düz renkler kullanmanın yanı sıra gradient seçeneğini de göz önünde bulundurabiliriz. Bunu yapmamızın bir sebebi Story Group’a tıklandığında full screen başka bir deneyime geçileceğini hissettirmek olabilir. Yani bu alana tıklandığında uygulamadaki herhangi bir iç sayfaya yönlendirme olmayacağını hissettirmek ve kendi içinde başka bir deneyimi olduğunu anlatmak.
Bir diğer sebebi ise -eğer istiyorsak- bu alanın daha fark edilmesini ve diğer elementlerle uyumunu kaybetmeden farklılaşması olabilir.
Buradaki yöntemlerde belirlediğimiz base color’ımızı hep cebimizde tutacağız. Gradient’in bir ucunda hep o olacak. Diğer renk için neler yapabiliriz bakalım.
Renge Beyaz veya Siyah Eklemek (Tint — Shade)
Eğer zemin beyaz ise bu yöntem görece daha iyi bir seçenek olabilir. Belirlediğimiz rengi gradientin bir ucuna alırken, diğer ucuna ise aynı rengin daha açık tonunu ekleyebiliriz. Beyazı artırarak soldan sağa doğru aşağıdaki gibi bir sonuç elde edilebilir. Burada düşük kontrast riskini göz önünde bulundurup ona göre seçmeliyiz.
Rengimizin kontrastını artırarak gradient elde etmek diğer bir seçenek olabilir. Belirlediğimiz rengi gradientin bir ucuna alırken, diğer ucuna ise aynı rengin daha koyu tonunu kullanabiliriz.
Renk Kombinasyonu
Ön yargı oluşturmak istemem ama en sevdiğimi sona bıraktım, burası çok zevkli:) İki rengin birbiriyle uyum içinde dans ettiği anı görmek beni hep mutlu ediyor. Aslında yukarıdaki seçeneklerde de teknik olarak farklı renkler elde ettik ama bu kez siyah ya da beyaz ekleyerek değil de, ikinci rengimizi renk tekerini kullanarak bulacağız.
Renk kombinasyonu kısmını anlattıkça ya da derinine indikçe komplike bir hale gelip yazının amacını aşabilir. Bu sebeple ikinci rengimizi üretirken çok basit ama etkili bir araç kullanacağım. Ve bunu sadece iki input yardımıyla yapacağım. Canva Color Wheel
Şimdi bir deneme yapalım. Base color olarak #7A4BFF (bir adet mor) renk kodunu girdim. Tool otomatik olarak kombinasyon kurabileceğimiz renkler verdi. Yapacağım tek işlem complementary, monochromatic, analogous, triadic ve tetradic renk kombinasyonlarına bakmak olacak.
Base color olarak seçtiğimiz mor’u tutuyorum. Diğer uca ise renk kombinasyonlarında gördüğüm renkleri tek tek koyuyorum. Ve tadaa!
İlk bakışta bu kombinasyonlardan bazıları gözümüze hoş gelebilir. Belki de hiçbiri içimize sinmez. Kağıt üstünde buna karar vermek bizi yanılgıya düşürebilir. Kombinasyonlardan hangisinin diğer arayüz elemanlarıyla daha iyi iletişim kurduğunu anlamak için direkt uygulamanın arayüzünde görmeliyiz. Bu daha sağlıklı karar alınmasına yardımcı olabilir. Arayüzde görmek renklerle ilgili baştaki ön yargıları tam tersine çevirebilir.
Seen Color
İzlenen Story Group’ların border color’ları web’deki visited links deneyimine göz kırpsa da burada yeni story eklenen grubu vurgulamak için de kullanılır. “Şunları daha önce izledin. Ama burada sana yeni bi’şeyler var.”
Bu sebeple izlenmiş bir story group’un border color’ında açık gri tonlar kullanılabilir.
Seen state için daha açık tonlar demek her zaman çalışmayabilir. Çünkü dark mode ya da koyu tonların hakim olduğu bir mobil uygulama da olabilir.
2- Story Group Border Radius
Arayüz elementlerinde kullandığımız radius oranları, doğal olarak uygulamanın karakterine etki eder. Bu sebeple uygulamadaki genel kullanılan radiuslara bağlı kalmak bir seçenek olabilir.
Story Grouplar yatayda ritmik devam ettiği için radius değeri beyaz alanın artıp azalmasında etkili. Aşağıdaki görselde daha iyi anlayabiliz.
Duruma göre kavramları birbirinden ayırmak için radiusa başvurabiliriz. Spotify’ın podcastler müzikler ve sanatçıları ayrıştırmak için kullandığı üç ayrı radius bunun için güzel bir örnek. Story Grouplara başka yerde kullanmadığımız bir radius tanımlayabiliriz.
Bu sebeple Story Group’lar için yeni bir radius değeri tanımlamak ve sadece o alanda uygulamak bir diğer seçenek olabilir.
3- Pin Color
Bir Story Group sabitlendiğinde kenarında yeni bir element belirir. Bunun rengini belirlerken de gelişigüzel davranmamalıyız. Border ile uyumlu gözükmesinde fayda var.
Bunu yaparken borderla aynı renk olabileceği gibi renk paletimizden başka bir renk de kullanabiliriz. Kahve Dünyası buna güzel bir örnek.
4- Story Group Title
Burada konuyu okunabilirlik(readibility), okunaklılık(legibility) ve kontrast olarak ele alabiliriz.
Title’larımızın okunma emin olmak için kontrast değerlerin güçlü tutmalıyız. Bunun için var olan statik metinlerimizde çalışan renkler denenebilir.
Uygulama birden fazla typeface’ barındırıyorsa, okunaklılığı(legibility) en yüksek olanı seçmekte fayda var. Title alanında diğer yerlere nazaran daha küçük font kullanılıyorsa bunun önemi daha da artıyor.
Minimum font size için ek bilgi: Apple’ın guide’ına göre önerilen body text size’ı 17pt. Material design’a göre 16sp (iOS’taki dengi 16pt). Tabii bunların San Francisco ve Roboto’ya için olduğunu bilmekte fayda var. Daha genele hitap eden bir öneri de WCAG 2.0 standartlarında bulunuyor. Buna göre bold text 14pt ile 18pt arası olarak kullanılmalı. Ama typeface’e göre değişkenlik göstereceğini tekrar vurgulamalıyım.
5- Space ve Alignment
Story Grouplar arası boşluklar border size ve radius’una göre değişkenlik gösterebilir. Ama border oranı 1:1 ise %15–20 arası boşluk bırakılmasını öneriyoruz. Tabii ki hali hazırda önceden tanımladığınız ve kullandığınız boşluk kurallarının dışına çıkmadan bu dengeyi yakalamak gerekiyor.
Üst ve alt boşluklaradaki başka bir element ile ilişkilendirilemeyecek bir dengeyle pay bırakılmalı. Storyly kısmının kendi başına başka bir bölüm olduğu kolayca anlaşılmalı.
Sağ ya da sol tarafın kesik biçimde gözükmesi de karşılaştığımız durumlardan. Yatayda devamında bir şey olduğunu kullanıcıya anlatmak gerekiyor. Storyly’i sağ ve sol boşlukları tamamen kapsayacak şekilde konumlandırmalıyız.
6 — Skeleton Screen
İnternet bağlantı hızı yavaş olan kullanıcılarla içerik buluşmadan önce arada ufak bir yükleme payı olabilir. Bu ufak zaman diliminde kullanıcıyı yalnız bırakmayıp iletişim kurmak isteyebiliriz. Bunun için skeleton screen’ler güzel bir illüzyon yöntemidir.
7- Story Group Cover Image
Story Group Cover görselini hazırlarken daha önce kullandığımız görsel stiline uymak ve bu alan için özel setler oluşturmak güvenli bir görünüm elde etmemizi kolaylaştırır. Görseller hem birbirleriyle hem de uygulamayla güzel anlaşmalı. Baştaki banner örneğini hatırlayabiliriz.
Bunun için bir kaç örnek vermek istiyorum.
Burada yine de her Story Group Cover görselinin kendi içinde farklılaşmasını sağlamalıyız. Örneğin Google’ın yeni uygulama ikonları. Bir tasarımcı olarak biliyorum ki Google çalışanları birçok şeyi düşünüp, bir çok nedeni göz önünde bulundurarak bunları bizim önümüze sunar. Fakat ben bir kullanıcı olarak böyle şeyleri taramakta, ilk bakışta anlamakta zorlanıyorum.
Yaptığımız image’ları dark mode’u da düşünerek ayarlamak daha homojen bir görünüm elde etmemizi sağlar. Hatta kimi durumlarda dark mode için özel image yüklemek gerekebilir.
Son Deyiş
Parçası olmaktan keyif aldığım Storyly, beni uzun zamandır büyülüyor. Ürünün entegre olduğu her uygulamada bizi başka bir “hikaye” bekliyor. Ve her mobil uygulamada düzenlenebilir alanlar sayesinde suyun bulunduğu kabın şeklini alması misali şekilleniyoruz. O uygulamanın bir parçası oluyoruz. Bundan büyük haz alıyorum.
Yine de belirtmekte fayda var. Buradaki öneriler amaca, kitleye ve beklentilere göre değişkenlik gösterebilir.
Bitirmeden… Bir parçasını burada paylaştığım guide’ın, hazırlığını birlikte yaptığım takım arkadaşım Onur Mermer’e teşekkür ederim.
Okuduğunuz için teşekkür ederim:)
“…biz kristal bardaklarda çay ikram edebiliriz. Bu sayede insanlar çayı çok beğenecekler ve kristal eşya almak isteyecekler. Çünkü insanları en çok etkileyen şey güzelliktir.”
-Simyacı
