giriiş

Merhaba Orta okuyucu! Bu UI UX örnek olay incelemesinde, mobil uygulama tasarımımı sergileyeceğim. “Stash&Store” ikinci mobil uygulamamın adı. Kullanıcının öğeleri için yeterli bir depolama alanı bulmasına ve/veya kendi fazlalık alanından para kazanmasına yardımcı olan çeşitli özelliklerden oluşur. Yenilikçi ve yaratıcı olmayı ve bu uygulamayı olabildiğince kullanıcı dostu, sezgisel, işlevsel ve benzersiz yapmayı arzuladım.

Sorun

Projeye başladığımda aklımda çözmeyi düşündüğüm belirli bir sorun vardı. Ancak, biraz daha düşündükten sonra, "Stash&Store"un çeşitli insan türleri için biraz farklı sorunları çözen çok işlevli bir uygulama olabileceğini fark ettim. Aşağıdakiler, bir şekilde çözmeyi arzuladığım problemlerdir:

• İnsanların evlerinde depolama alanı eksikliği
  Modern dünyada insanlar, depolama alanı bir yana, yaşam sıkıntısı yaşıyor.
• Yüksek depolama birimleri ve antrepo fiyatları
  Depolama alanları kiralamayı düşünenler, genellikle yüksek kira fiyatları nedeniyle bunu yapmaktan caydırılır. Özel depolar genellikle çok pahalı olabilir.
• Kullanılmayan fazla alan
  Fazla alana sahip olan kişiler bazen yalnızca kullanılmayan alan için yapılan harcamalarla kalır.

Yukarıda belirtilen sorunların farkında olarak araştırma yapmaya başladım. Yaptığım ilk şey, her zaman olduğu gibi, rekabet uygulamalarını ve ürünlerini analiz etmek oldu. Bunu yaparak, uygulamama neler ekleyebileceğime dair bazı fikirler buldum ama daha da önemlisi, rekabet uygulamalarında kusurlar ve eksiklikler buldum. Nihai hedefim, bu amaç için en iyi ve en benzersiz uygulamayı yapmaktı! Rekabet uygulamalarını incelemenin yanı sıra, kullanıcıyı tanımak istedim. Tüm tasarım süreci boyunca, kullanıcıyı ve onun ihtiyaçlarını düşünmek en büyük önceliğimdi.

Kullanıcı Kişisi

Uygulamamın çözeceği temel sorunları kapsamlı bir şekilde ele aldıktan ve potansiyel kullanıcıların ihtiyaçları hakkında kapsamlı araştırmalar yaptıktan sonra, bir sonraki adım ideal kullanıcı kişiliğini belirlemekti.

beyin fırtınası

Kullanıcı kişiliğini belirledikten sonra, birkaç beyin fırtınası seansına katıldım. Bu aşamada aklıma gelen hemen hemen her fikri not aldım. Bu notları FigJam'de tuttum ve daha sonra bu fikirler için özel olarak ayrılmış özel bir Figma sayfasına aktardım.

Yukarıdaki ekran görüntüsünde görebileceğiniz gibi, uygulamanın belirli ana bölümleri için bölümler varken, saf beyin fırtınası için bir bölüm vardı.

Kullanıcı Deneyimi Haritası

Çeşitli fikirler bulduktan sonra bir UX Haritası oluşturdum. Her birinin uygulamanın ayrı bir bölümünü temsil ettiği üç çerçeve rengi vardır.

İlham panosu

Uygulamamın kullanıcı arabirimi öğeleriyle ilgili olarak, çok sayıda farklı ekran ve farklı uygulamalardan çekimler içeren büyük bir ilham panosu yaptım. Sezgilere biraz ters gelse de, seyahat uygulamalarından, sosyal medya uygulamalarından, yemek pişirme uygulamalarından, navigasyon uygulamalarından vb. kartlar vb. Temelde, tüm uygulamalar aynı miktarda aynı kullanıcı arabirimi öğelerini paylaşır.

Dribbble, Mobbin, Behance ve benzeri platformlardan sayısız kareyi Figma'daki “İlham Panosu” sayfama kaydettim. Tüm çekimleri amaçlarına göre kategorilere ayırdım. Bu şekilde, farklı çekim türlerini içeren birden çok farklı bölüm vardı.

Ayrıca tam olarak dikkatimi çeken şeyi bana hatırlatmak için çekimler üzerine Figma yorumları şeklinde notlar bırakmayı da ihmal etmedim. Uygulamamın harika görünmesi için yalnızca diğer harika tasarımcıların çalışmalarını yeniden düzenlemem ve taklit etmem gerektiğini biliyordum! İlham aldığım uygulamalar çoğunlukla dünya çapında kullanılıyordu ve dünyanın en iyi uzmanlarından bazıları tarafından tasarlandı!

Lo-Fi tel kafesleri

Üç tel kafes bölümü oluşturdum. İlki evrenseldir ve bu, işe alım sürecidir. Diğer iki bölüm, biri ana bilgisayarlar ve diğeri istemciler için olmak üzere farklı uygulama görünümlerinin tel kafesleriydi . Uygulama indirilip kullanıcı kaydolduktan sonra ikisi arasında kolayca geçiş yapabilir. Aşağıdaki ekran görüntülerinde hemen hemen her ekranın bu tel kafeste tanıtıldığı görülüyor.

Tel çerçeveleri tamamladığımda, projeye nasıl devam edeceğime dair çok daha net bir fikrim vardı. Ayrıca wireframe yaparken düşüncelerimi unutmamak için ekranın belirli bölgelerine belirli bir tasarım öğesi ile ilgili planlarımı hatırlatmak için Figma yorumları bıraktım.

Tasarım sistemi

Tema rengiyle birlikte kullandığım yazı tipi en iyi çözüm oldu. Yeşil rengin bu tonu, kullanıcıların zihninde güven, iyimserlik ve genel pozitifliği çağrıştırır. Öte yandan, bir yazı tipi olarak DM Sans, modernlik, profesyonellik ve netlik duygusu taşır. Net çizgiler ve yuvarlatılmış köşeler, uygulamaya samimi ve yaklaşılabilir bir his verirken, keskin kenarlar bir hassasiyet hissi verir.

Tasarım sürecinde üretkenliği artırmak için metin ve renk stilleri yaptım. Bu şekilde, belirli UI öğelerinin rengine karar vermek ve belirli bir yerde kullanacağım yazı tipine karar vermek daha kolay ve hızlıydı. Stiller yaratmak, daha sonra tasarımda değişiklikler yapmama da son derece yardımcı oldu.

Simgelerle ilgili olarak, uygulama boyunca tutarlı bir tasarım sağlamak için tek bir simge paketi ve tek bir simge türü kullandım. Simge paketinin adı “Heroicons” ve ihtiyacım olan neredeyse tüm simgeleri SVG (vektör) formatında içeriyordu. Bulamadığım ikonları Figma'da pen tool ile çizdim. Daha önce bahsedilen simge paketindeki simgelerle boyut ve vuruş olarak tutarlı olmalarını sağladım.

Simge paketi kaynağı:
https://heroicons.com/

Kullandığım çizimlere gelince, onlar da aynı illüstrasyon kaynağından alınmıştır. Yine, kullanıcı arayüzünde tutarlılık çok önemlidir!

İllüstrasyon kaynağı:
https://storyset.com/time

Son tasarım

"Lo-Fi tel kafesleri" bölümünde bahsedildiği gibi, "Stash&Store" iki uygulama görünümünden oluşur . İlki müşteriye odaklanır ve müşteri, uygulama aracılığıyla kiralamak için depolama alanı arayan kullanıcı türüdür. Bu uygulama görünümünün, müşterinin depolama fırsatlarını kolayca bulmasına yardımcı olması gerekiyor. İkinci uygulama görünümü , alanlarını kiralamak isteyen ev sahipleri için tasarlanmıştır . Bu durumda, "Stash&Store", kullanıcıya tekliflerini yönetmeyi kolaylaştıran belirli şekillerde hizmet eder.

Katılım süreci kendi başına her uygulama için nispeten aynıdır. Bu durumda, kullanıcıya elbette iki ana seçenek sunulur - kaydolmak veya oturum açmak. Bir hesap oluştururken, kullanıcılardan "Stash&Store" için kullanım amaçlarını belirtmeleri istenir. Bu, kullanıcının yalnızca bir uygulama görünümüyle ilgilenebileceği için dahil edilmiştir. Tercihine göre kayıt işlemine devam eder. Ev sahibi
olarak devam edenlerden tekliflerini hemen listelemeleri veya o kısmı atlayıp daha sonra geri gelmeleri istenir. Ev sahipleri, kimliklerini doğrulamak için devlet tarafından verilen kimlik kartlarının fotoğrafını da çekmek zorunda kalacak. Yine de, tüm kullanıcılar için zorunlu olan tek doğrulama işlemi e-posta doğrulamasıdır.

Müşteri kayıt işlemini tamamladıktan sonra, kullanıcılar Ana Sayfa sekmesi olarak da hizmet veren Keşfet ekranına yönlendirilir. Buradan istedikleri lokasyonu girerek depolama alanı arayabilir ve arama sonuçlarını filtreleyebilirler. Harita, kullanılabilir depolamanın konum pinlerini görüntüler. Bunlardan birine tıklandığında ekranın alt kısmında o depo hakkında genel bilgi veren bir kart belirir.
Bu sekmedeki bir diğer önemli özellik de “Nokta koy” özelliğidir. Sağ alt köşedeki düğmeye tıkladığınızda, ekranın ortasında küçük bir yer belirleyici pim belirir. Kullanıcı haritayı kaydırırken merkezde kalır. Kullanıcı pini istediği yere yerleştirip tekrar sağ alt butona bastığında, yerleştirilen pinin yakınındaki tüm saklama yerleri ekrana gelir.

Müşteriler, uygun depolamayı bulduktan sonra çevrimiçi kullanılabilirlik isteği gönderebilir. Yukarıdaki ikinci ekranda görüldüğü gibi, müşteriler diledikleri başlangıç ​​tarihini seçiyor ve ayrıca toplantı sahibine bir not yazabiliyorlar. Müşterinin isteğini tam olarak onaylamanın hala ev sahibine bağlı olduğunu belirtmek önemlidir.
Müşterilerin depolama konusunda karar vermelerine yardımcı olan uygulamaya getirdiğim bir şey de başarı çipleri . Bu çipler, depolama ekranında görünür ve müşteriye buldukları depolamanın güvenli ve güvenilir olduğuna dair bir tür garanti sunar. Ana bilgisayarlar, bu çipleri hesap doğrulama ve yapılan belirli sayıda anlaşma yoluyla alan kişilerdir.

Müşteri bir kiralık yer ayırdıktan sonra ikinci sekme olan kiralıklarım bölümünde anlaşmayı bulabilir. Bu sekmede, yaptıkları tüm tekliflere genel bir bakış sunarlar. Kartlardan birine tıklandığında, kişinin anlaşmasını görebileceği ve daha da önemlisi rezervasyonunu düzenleyebileceği ve/veya iptal edebileceği bir ekran açılır. Her iki durumda da, yanlışlıkla bir işlem yapmamak için eylemlerini onaylamaları istenir.

"Mesajlar", bu uygulamadaki üçüncü sekmedir. Ayrıca, aşağı yukarı evrensel olduğu için ana uygulama görünümünde de bulunur. Kullanıcı sohbetler arasında arama yapabilir, konuşmaları silebilir veya arşivleyebilir. Ayrıca, müşterilerin uygulama görünümü durumunda, kullanıcılar önceden oluşturulmuş sık sorulan soruları gönderebilirler (yukarıdaki üçüncü çekimde gösterildiği gibi).

Her iki uygulama görünümü için profil ekranları nispeten benzerdir. Her iki ekranın üstünde, uygulama görünümünü değiştiren düğme bulunur. Bu düğmenin kolay erişilebilir olmasını amaçladım. Ayrıca, ev sahibi hesabını tam olarak doğrulamadıysa doğrulamayı tamamlaması hatırlatılır ve teşvik edilir. İkinci ekranın üstündeki o yeşil canlı düğmenin amacı budur.

Ev sahiplerinin uygulama görünümünde en önemli şeylerden biri rezervasyon yönetimidir. Ev sahipleri için sorunsuz bir deneyim sağlamak amacıyla, istekleri kolayca görüntülemelerini ve yönetmelerini sağlayan sezgisel bir istek yönetimi sistemi tasarlamaya öncelik verdim.

Teklif eklemek ve düzenlemek de ev sahipleri için çok önemlidir. Boşluk eklemek, listeleri düzenlemek ve incelemeleri görmek kolay olmalıdır.

Ana bilgisayar görünümündeki "mesajlar" sekmesi ile ilgili olarak, her iki uygulama görünümü için de aynıdır. Ancak, sohbetler iki farklı uygulama görünümü arasında bölünür/ayrılır.

Çözüm

Özetlemek gerekirse, Stash&Store uygulaması, eşyaları için ekstra alana ihtiyaç duyan kişiler için güvenli ve uygun fiyatlı depolama seçenekleri sorununu çözmek için tasarlanmıştır. Uygulama aracılığıyla, kiracılar depolama alanlarını kolayca bulabilir ve rezerve edebilirken, ev sahipleri de kullanılmayan alanlarından para kazanabilir.

Örnek olay incelememi beğendiyseniz, bu makaleyi 50 kez alkışladığınızdan emin olun.
Profesyonel ipucu: Alkış düğmesini basılı tutmayı deneyin :)

Temas etmek

Benimle iletişime geçmekten çekinmeyin :)
[email protected]
https://www.linkedin.com/in/danis-okic-745a4919a/
https://www.instagram.com/danees6/