it-swarm.asia

Merancang untuk iPad

Saya ingin membuat situs saya dapat diakses oleh orang-orang yang memiliki perangkat iPad atau lainnya iOS .

Pertimbangan apa yang perlu saya perhitungkan saat merancang antarmuka pengguna yang kompatibel dengan iPad atau iOS secara umum?

15
George Stocker

Lihat pemikiran Jakon Nielsen tentang masalah ini . The video ditautkan di bagian bawah hanya 3 menit dan menarik, jika tidak langsung bermanfaat.

Pikiran umum (tidak ada fakta untuk mendukung hal ini selain pengalaman pribadi):

  • Jika Anda harus kembali ke desain untuk platform lain, kembali ke desain PC, BUKAN desain iPod. Jika Anda bisa mendapatkan iPad (segera), coba jelajahi Amazon.com default di iPad. Itu jatuh kembali ke iPod Touch/iPhone UI default, yang memiliki tombol mengisi horisontal dengan teks di paling kanan, dan pada dasarnya tidak dapat digunakan.
  • Lebih mudah untuk melihat hal-hal kecil daripada mengkliknya. Dalam pengalaman saya sendiri, sebagian besar teks yang dapat dibaca tidak dapat diklik, dan saya sering perlu memperbesar tautan (yaitu di Wikipedia).
  • Uji desain Anda dalam potret dan lanskap!
  • Menggerakkan tangan Anda membutuhkan energi fisik yang sedikit lebih banyak (dan kurang tepat) daripada menggerakkan mouse Anda.
  • Menggunakan banyak tab lebih sulit daripada dengan PC (meskipun mungkin lebih mudah daripada dengan iPhone). Tautan yang membawa pengguna menjauh dari situs mungkin akan melakukan hal itu; jangan berharap mereka kembali dalam waktu dekat.
  • Keran tidak disengaja lebih umum daripada klik tidak disengaja.
  • Mengetik (bahkan untuk pencarian) lebih sulit daripada menggunakan keyboard.
  • Video YouTube yang disematkan berfungsi.
  • Ingat basis pengguna yang membeli iPad dan desain untuk mereka.
  • Pembaruan: Ada browser web lain. 95% pengguna mungkin menggunakan Mobile Safari, tetapi mungkin layak untuk dicoba pada beberapa lainnya. Sebagai contoh, saya baru saja menemukan situs Stack Exchange tidak berfungsi (tidak dapat memposting pertanyaan) di Atomic Web Browser .

Semoga berhasil!

14
Robert Fraser

Ini berlaku lebih untuk pertanyaan UI umum Anda:

Pikirkan "sentuh, jangan klik." Bagaimana Anda (atau klien potensial Anda) menggunakan aplikasi dengan tangan mereka ? Ada perbedaan mendasar antara menunjuk sesuatu dengan mouse dan menunjuk sesuatu dengan tangan Anda. Mungkin membuat kontrol paling penting di samping sehingga orang dapat menjangkau mereka dengan mudah? Lakukan percobaan dengan bingkai kawat yang berbeda dan minta orang menilai kemudahan penggunaan. Pengujian pengguna di awal proses dapat sangat membantu menyempurnakan desain Anda.

8
Scott M.

Saya menulis blog tentang hal-hal yang harus diperhatikan ketika mendesain situs yang dioptimalkan/siap untuk iPad. Anda mungkin menemukan itu berguna.

3
Jin

IPad dirancang untuk menjelajahi web. Layar besar memungkinkan untuk melihat seluruh lebar halaman web. Jadi desain untuk halaman web harus bagus di iPad.

Untuk iPhone, iPod Touch, Anda dapat mempertimbangkan membuat desain yang berbeda, membuat UI yang mirip dengan aplikasi iPhone asli. Ada alat yang dapat Anda gunakan, untuk memungkinkan hal ini, tetapi akan banyak pekerjaan. Lihat Sencha Touch , yang dapat digunakan untuk iPad juga.

Jika Anda tidak ingin menggunakan sesuatu seperti Sencha Touch, hal lain yang harus Anda pertimbangkan adalah interaksi pengguna sangat berbeda dengan perangkat ini. Mereka berbasis sentuhan dan bukan berbasis mouse. Contohnya adalah efek hover tidak akan berfungsi dengan perangkat berbasis sentuhan. Juga klik mouse berbeda dari ketiadaan tap yang ditangkap browser pada iOS. Ini berarti Anda dapat meningkatkan interaksi pengguna, dengan menyesuaikan JavaScript yang Anda gunakan untuk iOS agar lebih asli dan intuitif.

Apple juga telah membuat Panduan Antarmuka Manusia untuk aplikasi asli mereka di iOS. Ini akan menjadi ide yang baik untuk melihat ini, karena ini adalah apa yang diharapkan pengguna dari aplikasi asli. Memiliki laman web yang sesuai dengan ini, akan membantu mereka memahami situs Anda.

3
googletorp

Jangan lupa tentang ukuran layar dan tata letak yang mungkin berbeda: Tata Letak iPad CSS dengan mode orientasi lanskap/potret

2
Kostya

Dua masalah lagi yang ingin saya tambahkan, terutama mengenai mengadaptasi situs atau aplikasi yang sudah ada daripada mendesain yang baru - ini mungkin tampak sepele, tetapi tetap:

  • Pastikan situs atau aplikasi Anda tidak membalas tindakan mouse over (seperti tooltips)
  • Ingat tidak ada klik kanan (kurang umum di web, tetapi terkadang ditemukan di aplikasi web)
1
Dan Barak

Elemen harus lebih besar dari pada aplikasi desktop, karena jari kurang tepat daripada mouse.

Setelah menggunakan beberapa aplikasi grafis belakangan ini, saya telah melihat bahwa mungkin sangat sulit untuk menempatkan objek secara akurat dengan jari-jari Anda karena mereka mengaburkan objek yang Anda pindahkan. Salah satu cara untuk memperbaikinya yang sepertinya Apple lakukan adalah mulai memindahkan hanya setelah Anda memindahkan beberapa jari, sehingga tidak lagi berada di atas objek yang Anda pindahkan.

Pilihan ganda sangat merepotkan saat ini. Saya tidak suka pendekatan Apple dari mengetuk satu objek dengan satu jari dan mengetuk banyak objek dengan yang lain untuk membuat beberapa pilihan. Itu berantakan setelah Anda membutuhkan lebih dari 4-5 objek. Seret pilih mungkin berfungsi lebih baik, misalnya tab alat pemilihan pertama dan kemudian seret pilih beberapa objek.

1
Erik Engheim