Formula 1: UX Analizi ve Redesign
Kullanıcı deneyimi ve arayüz tasarımlarıyla ilgili var olan bir sitenin veya mobil uygulamanın yeniden yorumlanarak tasarlandığı yazılar ve çalışmalar her zaman ilgimi çekiyor. Sık kullandığım bir ürünle ilgili kullanıcı gözünden, ürünle ilgili ihtiyaçları, ürünü kullanarak ve eksikliğini bizzat yaşayarak farkettiğimde bir çok tasarımcı gibi sorunu nasıl çözerim diye düşünmeden edemiyorum.
Özellikle sezon aktif şekilde devam ederken Formula 1’in mobil web sitesini sıklıkla kullanırken bu sayfalar daha kullanışlı nasıl olurdu diye aklımdan geçirmeye başladım. Sitedeki eksikliğini hissettiğim bilgileri ve ekranları kafamda kurgularken yazı yazmaya ve üzerinde çalışmaya karar verdim.
Davranış sıralamam ve karşılaştığım durumlara değinmem gerekirse, sayfayı en çok ziyaret ettiğim zaman dilimi yarıştan önceki gün ve saatler oluyordu. Özellikle sıralama turlarının sonuçlarını görmek ve yarışın başlangıç sırasını öğrenmek istiyordum. Menüde “Standings” başlığı altındaki sayfalar sıklıkla ziyaret ettiğim sayfalardı. Aktif haftaya ait sonuçlar veya takip edemediysem bir önceki haftanın sonuçlarına erişmek bana yeterli oluyordu.
Formula 1 mobil sitesinde “Standings” sayfası sonuçların yer aldığı adeta arşiv gibi detaylı bir sayfa. Kullanıcılar hem puan durumu hem sonuçlar hem de detaylı geçmiş bilgilere erişmek için bu sayfayı kullanabiliyorlar. Yarış, pilot ve takım özelinde geçmiş yılların bilgileri de bulunuyor.
Bu sayfa ile ilgili temel bulgularım şöyleydi;
Sayfaya girildiğinde sırasıyla reklam alanı, dropdown bir filtre ve altında da sayfanın içeriği geliyordu. Bilgiye ulaşmak zordu, pilotların adı kısaltma olarak kullanılıyor ve içeriğe ait başlıkları görmek de efor istiyordu. Ayrıca sayfaya girdiğiniz esnada yarış varsa canlı sonuçlar da gösteriliyor. O kısımla ilgili bir beklenti veya kesin hatalı diyebileceğim bir bulgum olmadığı için canlı gösterim kısmını çalışmaya dahil etmedim.
- Pilot isimlerinin kısaltma şeklinde kullanıldığı örnek
- Sayfaya girildiğinde içerik görememe sorunu ve başlık karmaşası
- Pilotların takım bilgisinin verilmemesi sorunu
Elimde sayfaya ait herhangi bir kullanım istatistiği olmadığı için kendi iç görülerimle kullanıcı ihtiyaçlarını çıkarmaya çalıştım. Bu kısımda daha doğru çalışma için ilgili kullanıcılarla detaylı bir görüşme ve kullanılabilirlik testi planlanabilir. Ek olarak Google Analytics veya sayfaya entegre edilebilecek bir UX aracı (hotjar, smartlook gibi) ile bir çok dataya erişip anlamlı sonuçlar elde ederek deneyimi pozitif etkileyecek çıktılar da elde edilebilir.
Kendi tahminlerime göre sayfadaki temel kullanıcı ihtiyaçlarını çıkarmaya çalıştım.
1- İlgili haftada yarışa ait sıralama turu sonuçları
2- İlgili haftaya ait yarış sonuçları
3- Sezon içi genel sonuçlar
4- Geçmiş sezon sonuçları ve şampiyonluklar
5- Pilot ve takım sonuçları
İhtiyaçlara paralel olarak “Standings” ve alt sayfalarda düzeltilebilecek alanları çıkarttım.
- Sayfanın başlığının sayfanın üstünde gelmemesi
- Alt alta her biri 40 px’ten yüksek üç satır filtrenin sayfada çok yer kaplaması ve sayfa ziyaret edildiğinde içeriğin görünür alanın dışında kalması
- Filtrede içinde dört element olan bir dropdown olması. (Üçe indirip ilerledim.)
- Mevcut haftanın belirtilmemesi
- Yarış seçilen listede tarihin belirtilmemesi
- Herhangi bir yarış seçildiğinde içerik başlığı ile yarış adının karışması
- Pilot sonuçları sayfasında pilot seçerken takımın gösterilmemesi
- Pilot sıralamalarında isimlerin kısaltma olarak kullanılması
- Pilot sıralamalarında hangi takımda olduğunun belirtilmemesi
Son iki madde benim bu çalışmayı yapmam için ilk düşündüren ve aksiyona geçiren durumdu.
Sadece yukarıdaki ihtiyaçlar ve eksikliler listesiyle sınırlı kalmayıp, çalışmaya faydalı olabilecek ufak dokunuşlar da ekledim. Pilot seçim listesinde veya pilot sayfasında fotoğraflarına da yer vermek gibi.
“Standings” özelinde yaptığım ve detaylarını aşağıda anlatacağım bu çalışmada sayfa içindeki elementler (header, bottom sheet, checkbox, list vs.) bir nevi atomik parça olarak ele alınarak “Formula 1 Design System” tasarlanıp tüm tema Formula 1 mobil sitesine de uygulanabilir.
Çalışmaların büyük halini kolaylıkla görüntülemek için Behance’te paylaştığım proje dosyasına erişebilirsiniz.
https://www.behance.net/gallery/131810409/Formula-1-UX-Analizi-ve-Redesing
Puan Durumu
İlk çözmeyi amaçladığım problemler,
- Kullanıcının nerede olduğunu bilmesi için sayfanın başlığını göstermek
- Kullanıcıyı scroll ile uğraştırmadan içerik verebilmek adına içerikler için yer kazanmaktı.
“Güncel veriler daha çok takip ediliyordur” diye düşünerek yola çıktım ve sezon için eklenen dropdown’u kaldırarak sayfaya bir başlık ekledim ve yıl bilgisini başlıkla birleştirdim. Kullanıcı sezon bilgisini değiştirmek için başlığın yanındaki “Change” text butonuna dokunabilir. Yıl bilgisi dört haneli olarak sabit yer kaplayacağı için başlık ve buton dar/geniş ekranlarda ve farklı yıllarda sorun olmayacaktı.
Devamında, normalde dört element olan ama (sonuncusu reklam olduğu için göz ardı ederek) üç elemente indirdiğim (Races, Drives ve Teams) bölümü dropdown yerine tab grup olarak tasarladım. Bu sayede kullanıcılarımız tek dokunuşla istediği kategoriye geçebilecekti.
Son bölüm yarış, pilot ve takım detayı seçilen alanı listelenen madde sayısı çok fazla olacağı için dropdown olarak bıraktım.
Gelelim içerik alanına, listenin başlığı ve liste elementlerinin başlık satırı rahat okunabilecek şekilde sayfayı bölsün istedim. Bu şekilde filtre ve içerik rahatça ayrışabilecekti. Listedeki bilgileri ayrıştırmak için tipografik bir düzenleme yeterli oldu. Pilotların isimlerini rahat okunabilmesi ve ayrıştırılabilmesi için “bold” yaparak öne çıkardım. Bu noktada bu listenin içerik anlamında kullanıcı tarafında nasıl bir beklenti olabileceği ile ilgili bir fikrim yoktu, (daha sağlıklı çözüm için kullanıcı görüşmeleri yapılabilir) o nedenle içeriği olduğu gibi sabit tutarak ilerledim.
Sezonlar
Sayfadaki dropdown menüler native listeyi açıyordu. Bu yapıyı kullandığınız durumlarda listeyi içerik olarak zenginleştirmek ve kullanılabilir bir yapı sunmak pek mümkün olmuyor. Bu nedenle, özellikle ufak ekranların içinde de rahatlıkla çalışabilecek yükseklikte bir bottom sheet kullandım. Bottom sheet yapısının görsel ve bilgi olarak zenginleştirildiğinde kullanışlı ve şık bir çözüm olduğunu düşünüyorum.
Sezon seçen biri için bu listede biten bir sezonda en önemli bilgi kimin şampiyon olduğu bilgisidir. Hem takım hem de pilot olarak bu bilgiyi sezon seçim listesine yedirmeye karar verdim. Devam eden sezon için sıradaki yarış haftasının lokasyon ve tarih bilgisini kullanmayı tercih ettim. Bu kısımlar kullanıcı görüşmeleri, data analizleri ve ürün ekipleri ile görüşülüp karar verilebilecek kısımlardır. Uyguladığım halini spor sektöründeki geçmiş tecrübelerime dayanarak aldığım şahsi kararlar olarak yorumlayabilirsiniz.
Cancel butonu konusu; Bottom sheet gibi yapılar genellikle Android cihazlarda back butonu ile veya tüm cihazlarda ekrandaki kart dışındaki transparan alanın tıklanmasıyla kapanabiliyor. Bu yoruma göre karttaki “Cancel” butonu eklenmeyebilir. Ama kullanıcıyı düşündürtmemek için ben bu butonu eklemeyi tercih ettim.
Yarışlar / Pistler
Yarış seçtiğiniz dropdown yine aynı native yapıyla hazırlanmıştı. Yarışları da aynı şekilde aynı bottom sheet tasarımını kullanarak bu sayfaya uyarladım. Ülke bayraklarının, yarış haftası bilgisinin ve mevcut haftanın belirtilmesinin bu kart yapısı için uygun ve yeterli olduğunu düşündüm.
Ek olarak scroll edilebilecek aşağıda ve yukarıda alan olduğunda ufak bir nüans ile kullanıcıya bu bilginin verilmesinin kıymetli olduğunu düşünüyorum. Bu amaçla aşağı ve yukarı gölge efekti ekledim.
Yarış Detayları
İçerik olarak eski ve yeni ekranları kıyasladığımızda yeni yapı da hiç bilgi eksiltmeden, boşlukları ve içeriği yöneterek -hatta ekstra bilgiler ekleyerek- aynı boyuttaki bir ekranda en az ilk üç sırayı verebiliyor şekilde sığdırdım. Kullanıcı listeden ülke seçiyor ancak sayfada o bilgiyi göremiyordu, ülke bilgisini görsellik açısından bayrağı ile ekledim.
Yarış adında FORMULA 1 ve 2021 metinleri tekrar ediyordu, bunları kaldırdım. Sizler de çalıştığınız projelerde sürekli tekrar eden içerikleri tespit edip sayfayı bu tekrarlardan kurtararak daha kullanılabilir deneyimler tasarlayabilirsiniz. İçeriğin başlığı ise yarış adı ile birlikte verilmişti ve adeta karmaşa içinde kayboluyordu. Sol ekrandaki “RACE RESULT” aslında içeriğin başlığıydı. Bu kısmı genel bilgi olan yarış adı, yarış tarihi ve pist adının altına alarak içerikle birleştirdim.
Listede pilot isimlerini tam olarak verdim. Pilotların takımlarına ait logoları da ekleyerek mobil ekran için gerekli olan tüm bilgileri burada çok da sıkıştırmadan verebilmiş olduğumu düşünüyorum.
Pilotlar
Pilotların puan durumunun verildiği sayfa için yukarıdaki yapıyı uyarladım. Bu sayfa yukarıdaki örneklere nazaran daha az sorunlu bir sayfaydı. Dikkat ederseniz tutarlı bir başlık stili, tablo tasarımı ve tipografi belirlediğinizde aynı yapıyı diğer sayfalara uyarlamak oldukça kolay oluyor. Sadece tablo içeriklerinde pilot isimlerini tam kullanmaya ve puanları ön plana çıkarmaya dikkat ettim.
Pilot Detayı
Detaylı pilot bilgileri olan sayfayı da revize ettim. Pilotun fotoğrafı ve takım bilgisi eklenmesi gereken temel ihtiyaçlardan biriydi. Sayfa başlığı da pilot adının yani sayfa içeriğinin önüne geçiyordu, tekrar eden ve pek de gerekli olmayan “2021 Driver Standings” başlığını kaldırarak pilota kolaylıkla odaklanılmasını sağladım. Listede podyumu temsil eden ilk üç sıra için ayrıştırıcı bir görsel kullanarak, pilotun podyum yaptığı yarışları ön plana çıkardım.
Pilot dropdown listesini de diğer yapılarda olduğu gibi bottom sheet yapısına taşıdım. Bu listede pilot fotoğrafı ve pilotun bulunduğu takımı da ek bilgi olarak vermek kullanıcıların aradığı bilgiye ulaşmasını kolaylaştıracağını düşündüm.
Sonuç
Elinizde kısmen sorunlu bir ürün varsa ufak dokunuşlar ve temel kullanılabilirlik kuralları ile daha iyi bir deneyim yaşatmak mümkün ve hatta bana göre oldukça keyifli. Eğer tutarlı ve ileri görüşlü bir tasarım ilkesi benimsiyorsanız yeni tasarım dilini tüm uygulamaya yaymak da zor değil.
Tüm dünyadan ziyaretçisi olan bu kadar popüler bir sayfanın günümüzde oldukça popüler olan mobil cihazlar özelinde bu kadar atıl kalmasına şaşırdım ve bu beni bir aksiyon almaya itti. Neler yapabilirim görmek istedim. Ortaya çıkan ürünü de sizlerle paylaşmak istedim. Çalışma ile ilgili yorumlarınızı yazabilir varsa fikirleriniz uygulayıp benimle paylaşabilirsiniz. Daha önce de söylediğim gibi “Gelişim Süreklidir!” kariyerler, insanlar, ürünler ve tasarımlar her daim geliştirilebilir.
Sevgiyle kalın!
Çalışmaların büyük halini kolaylıkla görüntülemek için Behance’te paylaştığım proje dosyasına erişebilirsiniz.
https://www.behance.net/gallery/131810409/Formula-1-UX-Analizi-ve-Redesing
