Mikro Etkileşimler Yoluyla Daha İyi UX

Bir ürün tasarlarken, kişi tanımlama, iyi yapılandırılmış bilgi mimarisi ve düşünceli bir şekilde yazılmış içerik dahil olmak üzere kullanıcı deneyimini iyileştirmenin birçok yolu vardır. Ancak bu üst düzey yapı ayarlandıktan sonra, kullanıcı için zevk yaratmak, daha küçük etkileşim tasarım detaylarında gelir.

Mikro etkileşimler olarak bilinen bu ayrıntılar, doğal ürün akışını geliştirirken tek bir görevi yerine getirmek için tasarlanmış üründeki bireysel anlardır. Verileri yenilemek, içeriği beğenmek veya bir ayarı değiştirmek için yukarı kaydırmak mikro etkileşimlerdir. Ayrıca basit UI animasyonlarını da içerebilirler; örneğin, dokunulduğunda bir menünün kayması veya kaydırıldığında bir kartın ekrandan kayması.

Çoğu zaman mikro etkileşimler kullanıcı tarafından bilinçli olarak fark edilmez, ancak ince ayrıntıları ürünü daha keyifli ve kullanımı daha kolay hale getirir ve bu nedenle kullanıcı deneyimini geliştirir.

Mikroetkileşimlerin Faydaları

Mikro etkileşimler ve UI animasyonu o kadar önemlidir ki, bir tasarımı yapabilir veya bozabilir - ya da mobilya tasarımı ve mimari şöhretinden Charles Eames'in dediği gibi:

Detaylar detay değildir. Tasarımı yaparlar.

Bir ürüne mikro etkileşimleri dahil etmenin bazı temel faydaları şunlardır:

• Daha akıcı kullanıcı arayüzü etkileşimleri sayesinde kullanıcı üzerinde olumlu bir duygusal etki yaratmak
• Kullanıcıya yaptığı işlemlere göre anında geri bildirim sağlamak
• Kullanıcıyı bir uygulamada daha akıcı ve sezgisel bir şekilde yönlendirmek
• Bir bildirime yanıt vererek veya içerik paylaşırken kullanıcıları bir uygulamayla etkileşim kurmaya teşvik etme
• Kullanıcı hatalarını önleme

Mikroetkileşim Tasarımı En İyi Uygulamaları

Mikro etkileşimlerin ne yaptığına dair bir tanım ve bağlam oluşturduğumuza ve bunların kullanıcı deneyimini nasıl iyileştirdiğine dair bir örnek verdiğimize göre, mikro etkileşimler oluşturmak için en iyi uygulamaları tartışalım.

Kullanıcının Sorununu Tanımlayın ve Anlayın

Herhangi bir kullanıcı deneyimi tasarımındaki ilk kural, kullanıcı sorunlarını ortaya çıkarmak ve anlamaktır; mikro etkileşimler için de durum farklı değildir. Kullanıcının neye ihtiyacı olduğunu anlamanın en iyi yolu, anketler veya görüşmeler yapmak veya kullanıcı araştırması yoluyla davranışları gözlemlemektir. Toptal tasarımcısı Ivan Annikov, “Gerillaya Gitmek: Uygun Fiyatlı UX Araştırma İpuçları ve Alternatifleri” başlıklı makalesinde kullanıcı ihtiyaçlarını anlama konusunda daha derinlere iniyor.

Mikro Etkileşimleri Doğal Tutun

Amaç, kullanıcı ile ürün arasındaki boşluğu sezgisel ve doğal hissettirecek şekilde kapatmaktır, bu nedenle yüklenmesi çok uzun süren veya kullanıcının dikkatini dağıtabilecek garip animasyonlardan kaçının. Bunun yerine, ürünle sorunsuz bir şekilde akan tasarımlar oluşturun. İncelik, mikro etkileşimlerde anahtardır. Kullanıcının kafasını karıştırıp “Bu da neydi?” diye düşünmeyin.

Kullanıcı Testinden Elde Edilen Bulguları Test Edin ve Yineleyin

Deneyimli tasarımcılar bile tasarımları nadiren ilk denemede tamamen doğru bir şekilde elde ederler. Bu nedenle, bir kullanıcı testi ve yinelemeli tasarım süreci kullanmak, ürün piyasaya sürülmeden önce kullanılabilirlik kusurlarını azaltmanın basit bir yoludur.

Kullanıcı test aşamasında, mikro etkileşimler test edilir ve kullanılabilirlik açısından analiz edilir ve sonraki tasarım aşamasında revize edilir. Bu işlem, kullanılabilirlik sorunları ve sorunlu noktalar düzeltilene kadar tekrarlanır.

Mikroetkileşimlerin Yapısını Takip Edin

Twitter'da Kıdemli Personel Ürün Tasarımcısı ve "Mikrointeractions: Designing with Details" kitabının yazarı Dan Saffer'a göre, bir mikro etkileşimin dört bölümü vardır.

1. Tetik - Bir tetikleyici, mikro etkileşimleri başlatır. Bir tetik türü, bir işlevi açıp kapatan bir geçiş anahtarıdır.
2. Kurallar — Bir kural, bir mikro etkileşimin bir tetikleyiciye nasıl tepki vereceğini belirler ve etkileşim sırasında ne olacağını tanımlar. Örneğin, bir el feneri uygulaması, ışığı açıp kapatan tetikleyici olarak bir düğme kullanır.
3. Geribildirim — Geri bildirim, kullanıcıya mikro etkileşim sırasında neler olduğunu söyler. Geri bildirim örneği, satır içi doğrulamaya sahip bir kayıt formudur; alan doğru doldurulursa kenarlık rengi yeşile, yanlış bir şey varsa kırmızıya döner. Bu şekilde kullanıcı bir şeyin doğru veya yanlış olduğunu anında anlar.
4. Döngüler ve Modlar - Döngüler ve modlar, mikro etkileşimin meta kurallarını ve tekrar tekrar kullanıldığında mikro etkileşimin nasıl değiştiğini tanımlar. Örneğin, e-Ticaret'te, kullanıcı ürünü daha önce satın aldığında "Şimdi satın al" düğmesi "Başka bir satın al" olarak değişebilir.

Mikroetkileşim Tasarımını Yapısızlaştırma

Mikro etkileşimleri tasarlamanın ardındaki düşünce sürecini göstermek için, Google'ın sunduğu bir mikro etkileşimin yapısını çözelim: Google Dokümanlar'daki dosya adı önerisi mikro etkileşimi.

Bu mikro etkileşim, bir belgenin ilk satırını alır ve bu metin parçasını belgenin adı olarak önerir ve ad oluşturma sürecini daha sezgisel hale getirir.

Bir mikro etkileşim tasarlama süreci, herhangi bir tasarım göreviyle aynıdır: kullanıcının sorun yaşadığı noktayı belirlemek ve düzeltmek. Önceki en iyi uygulamaları akılda tutarken, sorunu tanımlamaya başlayalım.

Kullanıcı Sorunu

Belgeleri düzenli tutmanın kolay ve sezgisel bir yolu, onları açıklayıcı bir şekilde adlandırmaktır. Çoğu metin düzenleyicide, dosya adının sonunda belgenin içeriğiyle ilişkilendirilme olasılığı çok yüksek olsa da, "Belgenizi adlandırın" alanı boş kalır. Bu, bir mikro etkileşim ile ele alınmaya değer bir süreçtir.

Google'ın Çözümü

Google Dokümanlar, kullanıcının tercihlerine bağlı olarak bunu iki şekilde ele alır: 1) Kullanıcılar, herhangi bir içerik yazmadan hemen önce ad alanını tıklayıp belge adını değiştirebilir ve "Adsız belge"yi kendi seçtikleri adla değiştirebilir veya 2 ) Bir kullanıcı metnin ilk satırını yazdıktan sonra, Google bunu belge adı olarak otomatik olarak doldurur. Kullanıcı bunu olduğu gibi tutabilir veya değiştirebilir.

Detayları inceleyelim:

tetikleyiciler

Dosya > Farklı kaydet menü işlevini kullanarak veya masaüstü uygulamalarında olduğu gibi klavyede Mac'te cmd+s'ye (Windows'ta ctrl+s ) basarak belgeyi adlandırmak için birkaç olası tetikleyici olabilir. Ancak bunların hiçbiri web'in etkileşimli yapısından yararlanmaz ve özellikle kullanıcı akışını geliştirmez.

Bunun yerine, Google Dokümanlar'ın ana tetikleyicisi, belge adı alanını tıklamaktır. Alandaki fareyle üzerine gelme durumu, bir "Yeniden Adlandır" araç ipucu görüntüler. İkincil tetikleyici, ad giriş alanını vurgulayan Dosya > Yeniden Adlandır'dır .

Tüzük

Kurallar, tetikleyiciye tıkladıktan sonra ne olacağını tanımlar. Bu durumda, metnin ilk satırı belge adı olarak görünecektir. Ancak, kullanıcı adın ilk metin satırına sahip olmasını istemezse ne olur? Kullanıcı ad giriş alanını tıkladığında, metnin tamamı seçilir ve herhangi bir tuşa basıldığında silinir, bu da kullanıcının yeni bir ad oluşturmasını kolaylaştırır.

Geri bildirim

Giriş alanı kenarlığının rengini değiştirmek yaygın bir etkileşim modelidir ve Google Dokümanlar burada kullanıcıya anında geri bildirim vermek için bunu kullanır.

Döngüler ve Modlar

Kullanıcı belge adını başarıyla oluşturdu ve tetikleyici, önemli bir farkla yerinde kalır: Belge artık adlandırılmıştır.

Bu noktada kullanıcı daha önce tanımladığı tüm ismi değiştirmek yerine sadece birkaç harfi değiştirmek veya isme tarih eklemek isteyebilir. Bu durumda, önceki kuralın aksine, belge adının tamamını vurgulama kuralı devre dışı bırakılır.

Sonuç

Sorunu tanımladıktan ve bir mikro etkileşimin dört bölümünün tümüne odaklandıktan sonra, sonuç daha doğal, kullanıcı dostu bir deneyimdir. Google Dokümanlar dosya adlandırma çözümü, kullanıcının düzgün adlandırılmış dosyalarla düzenini korumasına yardımcı olur ve dokümanları adlandırma sürecini basitleştirir.

Eylemdeki Mikro Etkileşimler: Gerçek Dünya Örnekleri

Görev Listesini Yeniden Sıralama

Apple iOS Anımsatıcıları, kullanıcıların liste sırasındaki yerini değiştirmek için bir liste öğesine dokunmalarına, basılı tutmalarına ve sürüklemelerine izin vererek kullanıcıların düzenli kalmasına ve birkaç adımı ortadan kaldırmasına yardımcı olur.

Sosyal Medya Paylaşımlarına Tepki

Bir beğeni düğmesine veya simgeye tıklayarak içeriği "beğenmek", birçok uygulama ve web sitesinde yaygın bir UX tasarım modeli haline geldi. Facebook, ince bir mikro etkileşim yoluyla "beğenmenin" ötesinde birden fazla seçenek ekleyerek bu etkileşimi geliştirdi.

Markalı Metin Vurgulama

Çoğu tarayıcıda, varsayılan metin seçimi rengini geçersiz kılmak mümkündür. IKEA, ikonik sarı ve mavi renklerinde metni vurgulayarak ince bir marka detayı eklemek için bu etkileşim modelini kullanır.

Konumunuzu Paylaşma

Google Hangouts, bir kullanıcının konumunu paylaşmak isteyebileceği durumlardan birinin, birisinin "Neredesin?" diye mesaj atması olduğunu varsayar.

Kullanıcı bu mesajı görüntülediğinde, bağlamsal bir seçenek olarak “Konumunuzu paylaşın” düğmesi görünür. Ardından, konumlarının bir haritasını diğer kullanıcıya otomatik olarak göndermek için bu düğmeye dokunabilirler.

Seçmek için Kaydırın

Mikro etkileşimler, bir uygulamada basit evet veya hayır sorularını yanıtlamak için kullanılabilir. Tinder bunu, olası eşleşmeyi beğenip beğenmemelerine bağlı olarak kullanıcının sola veya sağa (hayır/evet) kaydırmasını sağlayarak yapar.

Arama Genişletme

Google Gelen Kutusu uygulaması yalnızca postaları paketlerle akıllı bir şekilde gruplamakla kalmaz, aynı zamanda sesle arama yapılmasına veya tek bir dokunuşla en yeni kişiler arasından seçim yapılmasına izin verecek şekilde tasarlanmıştır.

Bir Arkadaşın İletişim Bilgilerini Hızlandırma

SeatGeek, bir “Kişilerden Ekle” düğmesine bir dokunuşla bir kullanıcının bağlantılarından gelen bilgileri otomatik olarak doldurarak form doldurma sürecini basitleştirir.

Mikroetkileşimler Hakkında Daha Fazla Bilgi Edinin

Mikro etkileşimler, kullanıcı deneyimini iyileştirmenin önemli bir parçasıdır ve bunlar hakkında daha fazla bilgi edinmek için kullanılabilecek birçok kaynak vardır, bunlardan birkaçı aşağıda listelenmiştir.

Genel olarak mikro etkileşimler hakkında daha fazla bilgi edinmek için, Dan Saffer'ın daha önce bahsedilen “Microinteractions: Designing with Details” kitabına eşlik eden web sitesi olan Microinteractions'ı ziyaret edin. Sitede, mikro etkileşimlerin ayrıntılı açıklamalarının yanı sıra, otomatik düzeltme, otomatik tamamlama ve kes ve yapıştır gibi iyi bilinen mikro etkileşimlerin kökeni hakkında bilgiler bulunmaktadır. Kitabın ilk bölümü de ücretsiz olarak indirilebilir.

Mikro etkileşim ilhamı için, dijital ürünlerdeki mikro etkileşimlerden oluşan bir koleksiyon olan Küçük Büyük Ayrıntılar'ı ziyaret edin. Apple, Trello ve Stack Overflow gibi şirketlerin mikro etkileşimleri ve UI animasyonunu nasıl uyguladığına dair örnekler gösterir.

Framer'da mikro etkileşimlerin nasıl oluşturulacağını öğrenmek için, Toptal Designer, Wojciech Dobry'nin Framer Eğitimi: Prototiplerinizi Geliştirmek için 7 Basit Mikroetkileşim başlıklı makalesini okuyun.

Haydi ne düşündüğünü söyle! Lütfen düşüncelerinizi, yorumlarınızı ve geri bildirimlerinizi aşağıya bırakın.

• • •

Toptal Tasarım Blogunda daha fazla okuma:

• Tasarım İlkeleri ve Önemi
• En İyi UX Tasarımcı Portföyleri – İlham Veren Vaka Çalışmaları ve Örnekler
• Tasarımın Gestalt İlkelerini Keşfetmek
• Adobe XD ve Sketch - Hangi UX Aracı Size Uygun?
• En İyi Tasarımcıların Kullandığı 10 UX Çıktısı