it-swarm.asia

Bagaimana Anda mendefinisikan interaksi di mockup?

Saya seorang programmer dan desainer UX/UI. Ketika saya mendesain sesuatu, saya biasanya membuat gambar statis dari apa antarmuka akan terlihat. Masalahnya adalah, sebagian besar UI tidak statis; mereka mengubah dan mengubah ukuran dari input pengguna. Tentu saja, saya tahu persis bagaimana antarmuka harus menanggapi input seperti itu, tetapi untuk proyek-proyek besar klien dan pemrogram lain harus dapat mengambil maket saya dan memahami interaksinya. Jadi, bagaimana Anda menunjukkan dalam mockup bagaimana desain Anda berinteraksi dan merespons pengguna?

17

Cara terbaik untuk menggambarkan interaksi adalah dengan memodelkannya dengan prototipe interaktif.

Ada berbagai alat prototyping seperti Axure atau yang sedang kami kembangkan, Kerajinan Tangan . Apa pun yang Anda gunakan, intinya adalah mereka memungkinkan Anda untuk menunjukkan kepada klien Anda, teman sebaya, dll. Apa yang terjadi ketika Anda berinteraksi dengan elemen dalam maket. Anda akan mendapatkan hasil yang lebih baik menggunakan prototipe untuk menunjukkan interaktivitas daripada Anda akan dengan mockup yang dapat diklik. Dimungkinkan untuk menunjukkan perubahan keadaan dasar dengan mockup, dan ada fase dalam proses desain di mana ini bisa berguna, tetapi ada beberapa hal yang sulit untuk dijelaskan dengan gambar statis, seperti animasi (penting dalam situasi tertentu), daya tanggap ( elemen kunci interaktivitas) dan dalam kasus aplikasi asli atau web, "rasa" menggunakan platform tertentu.

7signals banyak berbicara tentang bagaimana mereka melewatkan wireframes dan langsung ke HTML. Saya menulis posting blog beberapa bulan yang lalu tentang ceramah yang mereka berikan di mana mereka menggambarkan proses mereka.

Namun, jika Anda ingin memperkaya maket statis, Notasi Sketsa Interaktif Jakub Linowski adalah titik awal yang baik untuk cara mirip UML untuk menggambarkan interaksi:

interactive sketching notation

Lihat Pro/kontra PSD vs HTML mockups untuk diskusi serupa:

Jika Anda membuat situs web atau aplikasi, maket HTML jauh lebih unggul karena Anda merancang maket dalam format sedekat mungkin dengan produk akhir. Ini memungkinkan Anda untuk menetapkan harapan jauh lebih mudah, itu membatasi Anda pada apa yang mungkin terjadi pada produk akhir, dan memberikan fleksibilitas yang jauh lebih besar.

25
Rahul

Ketika mock-up interaktif bukan pilihan, coba teks. Anda dapat menambahkan angka yang mengarah pada bagian gambar statis atau gambar rangka, dan kemudian memberikan catatan interaksi untuk setiap angka.

alt text

Atas: contoh angka penunjuk.

5
JeromeR

Jika Anda tidak memiliki opsi untuk sesuatu seperti Axure (atau alat prototyping interaktif lainnya atau bahkan HTML atau Flash), saya pikir taruhan terbaik Anda adalah menggunakan rangka layar dengan tampilan "standar" atau "default", dan kemudian tunjukkan dalam kabel tambahan status alternatif dari modul tertentu.

Dalam pengalaman saya mengandalkan anotasi berbasis teks untuk menyampaikan perubahan biasanya tidak cukup - saya telah melakukan terlalu banyak proyek di mana wireframe beranotasi sempurna disalahpahami atau dibangun secara tidak benar karena klien/pengembang/dll. melewatkan detail tekstual penting yang seharusnya ditangkap dengan lebih baik secara visual.

2
Michael Histen

Saya tahu ini berusia setengah tahun, tetapi karena belum ada yang menyebutkannya, saya akan:

Bill Buxton telah menulis sebuah buku berjudul "Sketching User Experiences" yang membahas masalah "sketsa" desain interaksi - bagaimana kita bisa menyampaikan konsep dan pola interaksi secara eksploratif, yaitu dengan cepat dan murah, tetapi tidak terlalu abstrak?

2
Jan