Apple Tasarım Prensipleri: Widget Tasarlamak

iOS 14 ile birikte hayatımıza giren Widget’ların tasarım prensiplerine göz atalım.

Sabah Kemal Cansu
TurkishKit
5 min readJan 20, 2021

--

iOS 14 ile birlikte hayatımıza ve cihazlarımıza giren en büyük yeniliklerden bir tanesi uygulama deneyimlerini güçlendiren “widget” özelliği oldu. Widget ile uygulamanızın belirli bir özelliğini kullanıcılarınızın ana ekranına taşıyabilirsiniz. Bu, kullanıcı deneyiminizi güçlendiren ve uygulamanız ile kullanıcılar arasında daha sıkı bir bağ kurabileceğiniz anlamına gelmektedir.

Hazırsanız gelin birlikte uygulamalarınız için etkili widget tasarımları oluşturalım.

Faydalı ve Odak bir Widget Oluşturma

Uygulamanız için faydalı ve odaklı bir widget oluşturmanın belli başlı kuralları ve düzeni vardır. Widget ile uygulamanızın odak bir özelliğini kullanıcılarınızın uygulamanızı açmadan görmesini sağlayabilirsiniz. Bu sayede yeterli ve doğru bilgi ile daha güçlü bir kullanıcı deneyimi sunmuş olursunuz.

Bir widget penceresinde bir yardımcı öğenin bulunması, görüntülenecek bilginin kapsamının belirlenmesi widget tasarımını oluşturacak en temel kuraldır.

Widget’ınızı tek bir özelliğe odaklayın. Çünkü widget’lar az miktarda bilgi göstermek için oluşturuldu ve bundan kaynaklı uygulamanızın ana fikrini yansıtan bir widget tasarlamak en iyi sonuca götürür. Örneğin, hava durumu uygulaması için oluşturulmuş bir widget, tek bir konuma ait hava durumu bilgilerini göstermeli. Bu sizi en iyi sonuca ulaştırır.

Kullanıcı widget’a tıkladığında uygulamanızı başlatmaktan başka işe yaramayan widget tasarlamaktan tamamen kaçının çünkü kullanıcılar içeriğe anında erişim sağladıkları için widget kullanmayı tercih ederler aksi durumda widget’ınız kullanılmayacaktır. Widget tasarlarken en önemli kurallardan bir taneside gün içerisinde değişen dinamik içeriklerin kullanıcıya sunulmasıdır. Günün her saniyesi değişmesede gün içerisinde sık sık güncellenebilecek bir içerik üretmek en doğru yoldur.

Widget sunarken bu widget’ı birden çok boyutta sunmak kullanıcının birden fazla seçeneğinin olduğunu ve gerektiğinde widget ekranında birden fazla bilgiyi gösterebileceğinin ifadesidir.

Büyük ve küçük widget örnekleri.

Widget Düzenlemeleri ve Etkileşimleri

Düzenlenebilir veya etkileşimi düzenlenebilir bir widget oluşturacaksanız burada dikkat etmeniz gereken bir kaç önemli husus var. Oluşturacağınız widget’lar çoğu zaman kullanıcıların görmek istedikleri bilgileri göstermelidir. Eğer kullanıcılar tarafından yönetilebilir bir widget tasarımı oluşturuyorsanız burada çok bilgi almamaya veya düzenleme konusunda tamamen özgür bırakmamaya dikkat edin.

Örneğin, içerik sunan bir uygulamanız var ise widget’ınız son içeriği gösterecek şekilde kullanılabilir olsun ve kullanıcılarınızın bunu özgür bir biçimde düzenlemesine izin vermeyin. Çok bilgi istemek veya çok düzenleme yaptırmak kullanıcılarınız için kafa karıştırıcı olabilir ve bu durumda widget’ınız kullanılmayabilir.

Kullanıcınız widget’ınıza dokunduğunda ilgili sayfaya yönlendirmeye ve farklı bilgi göstermemeye dikkat edin. Kullanıcı widget’a dokunduğunda doğru sayfaya yönlendirir ve ilgili içeriği karşısına çıkarırsanız kullanıcınızın uygulamanız ile bağ kurması çok daha yararlı olur. Örneğin, hava durumu widget’ına tıklandığında eklenen ilin hava durumunu göstermek ya da son müzik listesi widget’ı eklediğinde aksiyon aldığı anda son müzik listesine gitmesi kullanıcınızın uygulamanıza olan bağlılığını arttırır.

Widget Tasarım Prensipleri

Widget tasarlarken markanızın kimliğini ön planda tutmaya ve kullanıcıların sizin markanızı tanımasına izin verin. Oluşturacağınız widget tasarımları sizin uygulamanızın font, renk veya tasarım stili ile aynı olmalıdır bu kullanıcının ana ekranına baktığında o widget’ın sizin uygulamanıza ait olduğunu anlamasına yardımcı olacaktır.

Karmaşıklık

Widget tasarlarken karmaşık renkler, tipografiler veya okunabilirliği az içerikler sunmaktan kaçının. Sunacağınız widget tasarımı düzenli bir yapıda olması yeterince karmaşık gözüken ana ekran düzeninde sizin widget’ınızı fark etmeye faydası olacaktır.

Kullanıcınıza mutlaka kendi tasarım sisteminiz ile bir widget sunun ve bunu yaparken tamamen sade, basit olmaya özen gösterin. Sunacağınız düzenli bir akış widget’ınızın kullanımını arttıracaktır..

Marka, Logo veya Simge

Widget tasarlarken dikkat etmeniz gereken bir diğer husus ise widget tasarımınıza logo, simge veya türev bir ifade eklememeniz ekleyeceğiniz taktirde bunu kullanıcının gözüne sokmadan minimal bir şekilde eklemeniz.

Zorunda değilseniz widget tasarımınızda markanızın logosunu kullanmaktan kaçının önceliğiniz markanızın renkleri ve fontlarıyla bir widget tasarımı oluşturmak olsun. Kullanıcınız markanızı renkleri ve fontları ile tanımalı eğer logo kullanmak istiyorsanız küçük bir logo veya kelime işareti kullanıcınızın uygulamanızı tanımasına yardımcı olacaktır.

todoist Uygulaması

Rahat Bilgi Yoğunluğu

İçeriğiniz az olduğunda widget gereksiz görünebilir, içerik çok fazla olduğunda ise karmaşık görünebilir ve widget’ınız kullanılmayabilir. Kullanıcınıza sunabileceğiniz bilgi çoksa bunu bir kolaj haline getirip kullanıcınızın önüne sunmayın kullanıcınızın işine yarayacak temel özellikleri en iyileştirilmiş tasarım yapısı ile sunun. Birden fazla göstereceğiniz bir içerik zorunluluğu var ise büyük widget yapısını kullanmayı tercih edin.

Küçük alanlarda az içerik ile büyük başarılar elde edebilirsiniz.

Doğru Renkler ve Karanlık Mod

Widget oluştururken doğru renkleri kullanmak ve karanlık mod özelliğini desteklemek teme prensiplerden bir tanesi. Zengin, göz alıcı renkler her zaman güzeldir ancak bunları kullanırken kullanıcınızın tek seferde bilgi almasını engellememelisiniz. Sade, basit ve doğru renk tonları ile kullanıcınız widget’a baktığında o içeriğin ne olduğunu anlamalıdır.

Bütün bu renk kurallarının dışında ise uygulamanızın desteklemesi gerektiği gibi widget’ınızda karanlık mod özelliğini desteklemelidir. Kullanıcılar karanlık mod kullandığında widget karanlık mod desteklemiyorsa yüksek ihtimalle kullanıcı tamamen kullanmaktan vazgeçecektir. Kim gözünü yoran bir widget kullanmak ister ki 👀

Shazam Dark Mod

Boyutlar

Son ve yine prensipler arasında en önemli olan konu ise boyutlar konusu. Bildiğiniz gibi iOS14 iPhone 6S cihazlarına kadar sunuldu ve şu an son çıkan tüm cihazları destekliyor bu da cihazlar arası boyut farklılığını gündeme getiriyor. Bir widget tasarlıyorsanız tüm cihazlarda doğru göründüğüne emin olmalısınız.

Örneğin, iPhone 6s kullanan bir kullanıcı widget’ını iPhone 12 Pro Max kullanan birisiyle aynı görmelidir. Özellikler değişkenlik gösterebilir ancak boyutlar bu noktada değişkenlik göstermemelidir.

Apple tarafından önerilen widget boyutları. (Human Interface Guidelines)

Genel olarak başarılı ve etkili bir widget oluşturmanın temellerini size aktarmaya çalıştık. Küçük bir alanda büyük işler başarabileceğiniz widget’lar apple tarafından sunulan en iyi özelliklerden sadece bir tanesi. Widget’lar ile kullanıcılarınızı uygulamanıza daha çok bağlayın ve onlara daha çok etkileşimler sunun.

Başka bir tasarım yazısında görüşmek üzere. 👋

Bizi daha yakından takip etmek istiyorsanız, sosyal medya hesaplarımıza aşağıdan ulaşabilirsiniz!

Twitter | Instagram | Facebook

--

--