tl; dr 90% smartphone modern memiliki layar diagonal lebih dari lima inci. Munculnya tampilan semacam itu menghadirkan masalah baru yang fundamental bagi pengembang dan perancang aplikasi. Mari kita lihat bagaimana menyelesaikannya.

Setelah Apple hadir pada Januari 2007, seluruh dunia menyusut seukuran tangan kami. Perusahaan menggabungkan iPod, ponsel, dan browser menjadi satu perangkat. Apple memperkenalkan ke pasar massal kelas baru perangkat yang sekarang kita kenal sebagai "smartphone". Gadget ini berfungsi tanpa keyboard (seperti BlackBerry) atau stylus (seperti Palm).

IPhone dirancang untuk pengoperasian yang mudah hanya dengan satu tangan, dengan gerakan ibu jari yang halus di layar.

Steve Jobs pernah berkata bahwa 3,5 inci adalah "ukuran yang sempurna untuk konsumen," dan layar yang lebih besar itu bodoh.

Namun, pada pergantian dekade, phablet dengan layar besar menjadi populer di pasar. Saat ini, kurang dari 1% perangkat dijual dengan layar kurang dari 4 inci, sementara 90% memiliki diagonal lebih dari 5 inci.

Perlombaan ini dengan peningkatan yang konstan di layar telah memberikan peluang baru bagi pengembang dan perancang aplikasi untuk menggunakan ruang layar ekstra untuk menghadirkan lebih banyak konten dan lebih banyak fitur.

Misalnya, aplikasi CNN adalah salah satu dari sedikit untuk mendapatkan akses awal ke iPhone 5, yang diperkenalkan pada 2012. Pengembang tidak hanya secara estetika mengubahnya, tetapi juga meningkatkan keterbacaan dengan menyoroti judul.

Apple 2012

Sementara layar besar sangat bagus untuk menampilkan banyak konten, pertimbangan utama Steve Jobs untuk ponsel 3,5 inci menderita dengan penggunaan satu tangan .

Dalam dua bulan nya studi - di bandara, di jalanan, di kafe, di bis dan kereta api - Stephen Huber diperiksa tiga cara yang pengguna memegang ponsel mereka.

Ternyata 49% pengguna memegang ponsel mereka dengan satu tangan, terutama saat bepergian. Secara umum, ini adalah pegangan standar smartphone.

Memberikan argumen yang meyakinkan dalam mendukung pengembangan aplikasi untuk penggunaan satu tangan, Stephen juga menemukan bahwa pengguna sering mengubah cengkeraman mereka tergantung pada kenyamanan dan situasi.

Mengapa desain satu tangan harus menjadi prioritas utama

Kami sering menggunakan ponsel saat sibuk atau terburu-buru. Ini sangat mempengaruhi bagaimana kita memegang telepon dan bagaimana kita menggunakan aplikasi. Dalam praktiknya, cengkeraman ini jauh lebih umum daripada 49% yang disebutkan di atas.

Studi menunjukkan bahwa rata-rata pengguna memeriksa ponsel mereka 58 kali sehari, dengan 70% interaksi seluler berlangsung kurang dari dua menit. Orang sering menggunakan ponsel dalam "periode waktu singkat dengan perhatian yang teralihkan."

Gambar: Waktu Penyelamatan

Sekelompok peneliti dari Simform mengamati impuls sporadis menggunakan ponsel dalam beberapa skenario:

Contoh penggunaan smartphone dalam interval pendek

Direktur Produk Google Luke Wrobleski menyebut impuls singkat penggunaan ponsel ini “satu jari, satu tampilan” (satu ibu jari, satu bola mata). Ini mencerminkan bagaimana lingkungan yang mengganggu membuat smartphone hanya memiliki interval pendek perhatian parsial seseorang. Dia juga menambahkan bahwa jenis penggunaan smartphone yang paling optimal dengan satu tangan adalah di mana interaksi cepat didukung oleh fungsionalitas yang nyaman .

Bagaimana cara mendesain desain untuk interval pendek dengan satu jari?

Jawabannya cukup sederhana. Terus-menerus melakukan pengujian kegunaan dan pelajari bagaimana pengguna Anda memegang telepon mereka dalam berbagai situasi.

Jika pengguna sering menggunakan aplikasi dalam skenario yang mengganggu, maka Anda harus fokus pada pengembangan template yang ditujukan untuk aksesibilitas dan digunakan dengan satu tangan.

Untuk mendapatkan gambaran tentang masalahnya, mari kita lihat evolusi antarmuka Spotify:

Navigasi Spotify lama - hamburger Spotify

menggunakan menu seperti hamburger di sudut kiri atas yang menyembunyikan fungsi aplikasi dan mengatur pengguna untuk mencari mereka. Dengan munculnya layar besar, masalah desain lain ditambahkan ke daftar: jangkauan .

Pengguna Spotify mengalami tingkat kesulitan dan ketidaknyamanan tertentu

Ini memaksa tim Spotify untuk menutup menu hamburger pada tahun 2016 dan menempatkan fungsi utamanya - Beranda, Jelajah, Radio, dan Perpustakaan - di bagian bawah, yang menyebabkan peningkatan jumlah klik sebesar 9% secara umum dan 30% pada item menu .

Gunakan template UX standar untuk kasus penggunaan umum.

Mengapa menemukan kembali roda jika Anda dapat menggunakan template UX yang terbukti efektif. Banyak desainer sudah membuat skenario untuk menggunakan aplikasi dengan satu tangan.

Kami menelusuri ratusan aplikasi dan ribuan templat untuk menemukan trik dan metode terbaik untuk penggunaan tersebut. Mari kita lihat mana yang paling berhasil, masalah apa yang mereka pecahkan, dan manfaat apa yang Anda dapatkan dari ini.

Kami membagi pola perilaku pengguna dan templat UX yang paling umum menjadi enam kategori:

Navigasi
Misalnya, bilah menu, tab, dan gerakan untuk memudahkan perpindahan di antara bagian terpenting aplikasi.
Tindakan
Buat, edit, tempatkan, tambahkan, hapus dan tindakan lain yang menggunakan fungsionalitas dasar aplikasi.
,
, , .
, , , , , , — .
, , , .

1.

Landasan aplikasi yang hebat adalah navigasi yang baik. Ini membantu untuk dengan cepat menemukan fungsi yang diperlukan dan apa yang penting bagi pengguna.

Dalam 70% kasus, pengguna menemukan fungsi dan fitur baru aplikasi dengan menavigasi, dan bukan dengan mencari atau dengan cara lain. Panel navigasi, menu, gerakan, tautan, tab, dll. Adalah template UX yang paling umum.

Navigasi yang baik harus segera menunjukkan semua bagian penting dan mudah diakses.

Masalah

Templat navigasi konvensional, seperti bilah tab Apple dan menu gesek Android, memiliki keterbatasan. Hanya sejumlah fungsi terbatas yang ditempatkan di bilah tab, dan akses ke semua elemen menu gesek tidak mudah.

Pengguna tidak harus berjuang untuk mencapai bagian penting dari aplikasi, mereka tidak harus menjangkau dengan jari ke bagian atas layar. Ini tidak nyaman. Secara khusus, jika seseorang sedang bepergian dan menggunakan aplikasi dengan sangat cepat.

Keputusan

Facebook dan banyak aplikasi lain menyelesaikan masalah dengan menempatkan elemen di bawah tombol yang disebut "Menu" atau "Lebih", dari mana pengguna dapat mengakses fungsi dan bagian tambahan aplikasi. Namun, ini tidak ideal bila digunakan dengan satu tangan.

Untuk aksesibilitas dan penempatan lebih dari lima item, bukan halaman penuh, tetapi menu pop-up lebih cocok.
Bilah tab diperluas jika ada lebih banyak konten.
Bilah tab yang dipersonalisasi untuk pengguna tingkat lanjut.
Gerakan bagi pengguna untuk mengembangkan kebiasaan akses yang nyaman dan cepat.
Mengembalikan dan menutup halaman semudah itu.
Lompatan cepat ke bagian spesifik aplikasi.

Misalnya, Facebook menyembunyikan banyak fitur di menu hamburger, yang menutup layar utama. Meskipun terlihat cantik dan logis, pengguna menderita saat bekerja dengan satu tangan .

1.1. Apa masalah utama dengan menu hamburger?

Gunakan pop-up daripada menu satu halaman penuh

Untungnya, kita punya cara untuk menyelesaikan masalah.

Menu satu halaman penuh seringkali dapat diganti dengan menu pop-up. Seperti namanya, mereka "muncul" dari bawah. Ini membuatnya mudah untuk mengakses opsi hanya dengan satu tangan.

1.2. Templat menu sembulan. Video: Joox

Perpanjang bilah tab jika ada banyak konten

Panduan Antarmuka Manusia Apple merekomendasikan penempatan tidak lebih dari lima fungsi di bilah navigasi bawah. Di sinilah opsi "Lainnya" berguna (tiga poin). Terletak di panel bawah, ia dapat menyembunyikan fungsi lain dan membukanya dengan satu klik.

1.3. Desain menu navigasi bawah dengan panel opsi tambahan

Bilah tab yang dipersonalisasi untuk pengguna tingkat lanjut

Setiap pengguna adalah individu, dan fungsi yang penting untuk satu mungkin tidak menarik bagi yang lain. Untuk mengambil keuntungan penuh dari desain, Anda dapat memungkinkan pengguna untuk menyesuaikan panel tab dengan fungsi yang sering digunakan.

1.4. Bilah tab bawah yang dipersonalisasi untuk akses cepat ke fitur

Gerakan bagi pengguna untuk mengembangkan kebiasaan akses yang nyaman dan cepat

Navigasi gerakan populer Tinder adalah cara yang bagus untuk membuat navigasi satu tangan lebih mudah.

1.5. Navigasi berbasis isyarat untuk mengakses fitur aplikasi

Mengembalikan dan menutup halaman semudah itu.

Navigasi tidak hanya akses ke layar atau bagian aplikasi. Penting untuk mempertimbangkan metode kembali, menutup layar atau pindah ke bagian tertentu di halaman! Mari kita lihat bagaimana aplikasi menggunakan gerakan dan template UX untuk hal-hal seperti itu.

1.6. Menggunakan gerakan untuk menavigasi beberapa layar (video: Zenly )

Lompatan cepat ke bagian spesifik aplikasi

Aplikasi dengan banyak kategori, subkategori dan bagian, seperti buku, wiki, menu restoran, katalog produk, membutuhkan organisasi yang terorganisir dengan baik sehingga pengguna tidak memiliki masalah dalam menemukan konten.

Aplikasi dapat diatur secara hierarkis dan menggunakan templat UX khusus untuk meningkatkan aksesibilitas dan kemudahan penggunaan.

1.7. Panel tab mengambang dan gerakan untuk berpindah antar bagian

2. Tindakan satu tangan

Apa itu

Pengguna menghabiskan sekitar 50% dari waktu mobile mereka melakukan aktivitas di smartphone mereka. Ini adalah interaksi sosial, pembelian, ekspresi diri, keuangan, kesehatan dan manajemen produktivitas, serta perencanaan untuk acara mendatang. Semua templat ini termasuk tindakan seperti membuat pesan sosial, mengedit dokumen, dan beberapa lainnya.