Perancangan Aplikasi Web

 1. Langkah-langkah Web Design

1. Perancangan Isi

Dikembangkan selama tahapan analisis, dilakukan sebagai basis untuk penetapan objek-objek

2. Perancangan Estetika (Perancangan Grafis) Membuat tampilan yang akan dilihat oleh user

3. Perancangan Arsitektural

Fokus pada struktur hypermedia untuk semua objek isi dan untuk semua fungsi pada aplikasi web

4. Perancangan Antarmuka

Menentukan tampilan dan mekanisme interaksi yang mendefinisikan user interface

5. Perancangan Struktur Navigasi

Mendefinisikan bagaimana end user melakukan 

penelusuran untuk melintasi hypermedia

6. Perancangan Komponen

Merepresentasikan rincian struktur elemen-elemen fungsional aplikasi web.

2. Sifat-Sifat Aplikasi Web

a. Kepadatan jaringan

b. Keserempakan

c. Jumlah pengguna yang tidak dapat diprediksi

d. Kinerja

e. Ketersediaan

f. Digerakkan oleh data

g. Peka terhadap isi

h. Evolusi yang berkesinambungan

i. Kesegeraan

j. Keamanan

k. Estetika

3. Kualitas Perancangan Aplikasi Web

1. Keamanan

Kemampuan aplikasi web dan lingkungan server untuk mencegah akses yang tidak sah, dan mencegah serangan-serangan yang berasal dari luar.

2. Ketersediaan

Pengukuran atas persentase waktu yang tersedia bagi aplikasi web untuk dapat digunakan oleh user.

3. Skalabilitas

Aplikasi web mampu mengakomodasi kebutuhan terhadap jumlah end user yang semakin bertambah

4. Waktu untuk masuk ke pasar

Ditinjau dari sudut pandang bisnis

4. Kualitas Aplikasi Web

1. Kemudahan Penggunaan

a. Kemudahan pemahaman situs global

b. Umpan balik dari user dan fitur-fitur bantuan

c. User interface dan fitur-fitur estetika

d. Fitur-fitur khusus

2. Fungsionalitas

a. Kemampuan pencarian dan penerimaan

b. Fitur-fitur navigasi dan perambahan (browsing)

c. Fitur-fitur aplikasi yang berhubungan dengan 

lingkungan

3. Keandalan

a. Pembetulan pemrosesan tautan (link)

b. Pemulihan dari kesalahan

c. Validasi dan pemulihan pada user

4. Efisiensi

a. Kinerja waktu tanggap aplikasi web

b. Kecepatan pembentukan halaman-halaman

c. Kecepatan penggambaran grafik-grafik

5. Kemudahan Pemeliharaan

a. Kemudahan untuk dilakukan koreksi

b. Keamanan aplikasi web untuk beradaptasi

c. Kemudahan aplikasi web untuk dikembangkan

5. Perancangan Antarmuka

• Salah satu tantangan membuat user interface adalah bagaimana caranya user masuk ke aplikasi.

• Sasaran-sasaran user interface adalah untuk:

1. Menetapkan suatu jendela yang konsisten untuk meletakkan isi-isi dan fungsionalitas yang disediakan oleh user interface

2. Memandu user melalui serangkaian interaksi dengan aplikasi web yang dikembangkan

3. Mengorganisasikan pilihan-pilihan navigasi dan isi-isi yang dapat dilihat user yang dapat berupa menu navigasi, icon grafis, dan gambar-gambar grafis

6. Perancangan Estetika

Sering juga disebut Perancangan Grafis, yang merupakan tambahan artistik yang sering digunakan untuk melengkapi aspek-aspek teknis dari perancangan aplikasi web.

Tata letak yang baik pada perancangan interface:

1. Jangan mengisi bagian dari halaman web dengan informasi yang akhirnya sulit untuk mengidentifikasi informasi tersebut

2. Lakukan penekanan pada isi yang merupakan alasan utama bagi user untuk masuk ke aplikasi web

3. Lakukan pengelompokkan fitur navigasi, isi, dan fungsi

4. Jangan perluas bagian aplikasi dengan penggunaan scrollbar, sebaiknya kurangi isi yang jumlahnya banyak

5. Sesuaikan resolusi layar dan ukuran jendela browser

7. Perancangan Isi

• Hubungan objek isi dengan objek isi lainnya adalah sebagai bagian dari suatu model kebutuhan untuk aplikasi web.

• Permasalahan yang terjadi pada perancangan isi jika jumlah objek isi yang digabungkan untuk membentuk halaman web tunggal merupakan fungsi dari kebutuhan user, yang dibatasi oleh kecepatan pengunduhan koneksi ke internet, juga dibatasi oleh besarnya ukuran jendela monitor yang digunakan user.

8. Perancangan Arsitektural

• Perancangan arsitektur web terkait dengan sasaran untuk aplikasi web, terkait dengan isi yang akan ditampilkan, user, dan navigasi.

• Arsitektur isi pada umumnya fokus pada bagaimana objek-objek isi distrukturkan agar layak untuk dipresentasikan kepada user dan menarik untuk ditelusuri.

• Aplikasi web distrukturkan untuk dapat mengelola interaksi user dengan aplikasi web, bagaimana menangani pekerjaan proses internal, bagaimana melakukan pengaturan navigasi, serta bagaimana menampilkan isinya.

9. Implementasi Penting Desain Web

• Tetap Sederhana : Ketika kita atau tim pengembang memiliki ide yang sederhana maupun ide dengan kompleksitas tinggi, kita harus dapat mempresentasikan kepetusan kita yang paling tepat untuk digunakan dalam aplikasi web yang dibangun. Semua pengguna harus dapat memahami berbagai hal di dalam aplikasi secara efektif.
• Kemudahan Pemahaman untuk Setiap Elemen : Desain dari Antarmuka Pengguna harus mudah untuk dimengerti oleh target pengguna. Kita harus mengupayakan bahwa pengguna tidak perlu bersusah payah dalam mengetahui tentang tombol, bahasa, alur, dll., dalam aplikasi web.
• Kesamaan : Ketika seseorang mengunjungi aplikasi web kita untuk pertama kali, maka mereka dapat menghubungkan pengalaman mereka dengan penggunaan aplikasi web sebelumnya. Misalkan ikon “ß “ yang menunjukkan langkah untuk kembali ke halaman sebelumnya. Dengan mempertahankan kesamaan atau familier bagi pengguna, kita dapat mengurangi kurva pembelajaran dan dapat meningkatkan retensi pengguna serta keefektifan penggunaan, dll., dalam aplikasi web yang dijalankan.
• Navigasi yang Sederhana : Semua pengguna yang menjalankan aplikasi web harus dapat dengan mudah menavigasi dari satu bagian ke bagian lain tanpa hambatan. Kita dapat mengintegrasikan menu atas, side-bar, sub-navigasi, dan lain sebagainya dalam memberikan navigasi yang sempurna dan penawaran UX yang efektif kepada pengguna.
• Responsif : Desain Aplikasi web yang dibangun harus dapat beradaptasi dengan ukuran layar berbagai perangkat (smartphone, tablet, desktop, dsb.) serta memberikan kegunaan dan pengalaman yang baik untuk pengguna.
• Memiliki Konsistensi : Konsistensi desain dapat membantu pengguna dalam mengidentifikasi semua pola di aplikasi web. Dengan konsistensi yang sama pada setiap elemen UI pada halaman aplikasi web, pengguna mendapatkan desain UI yang benar dan dapat menggunakan aplikasi dengan lancar.
• Estetik : Antarmuka Pengguna yang estetis dapat meninggalkan sebuah kesan dari merek yang telah dibuat pada aplikasi web kita kepada para pengguna atau pelanggan. Selain itu, pengguna atau pelanggan dapat menghabiskan waktu lebih banyak di aplikasi web. Dalam membuat UI yang estetis, komponen UI seperti tobol, ikon, warna, font, dll., harus diperhatikan secara menyeluruh oleh timp pengembang.
• Efesiensi : Efisiensi memberikan tingkat kinerja pada aplikasi web yang telah dibangun dengan input yang lebih sedikit, tetapi memberikan output yang banyak bagi pengguna. Integrasi pintasan yang lebih baik yang dapat mengalir dari layar ke layar serta transisi yang efektif dapat meningkatkan tingkat keefesiensian aplikasi web. Tidak hanya itu dengan desain aplikasi web yang tepat dapat meningkatkan produktivitas pengguna serta membantu pengguna dalam mencapai berbagai tujuan dengan waktu dan usaha yang sedikit.
• Kompatibilitas : Desain aplikasi web yang dirancang harus terlihat dan berkinerja pada ukuran layar, sistem operasi, dan websites yang berbeda.
• Umpan Balik Pengguna : Pengguna cenderung tidak suka tinggal lama di aplikasi web, jika tidak memberikan umpan balik. Umpan balik secara instan dapat diberikan pada pengguna setiap kali mereka melakukan tindakan pada aplikasi web, misal seperti menampilkan sebuah ikon tertentu untuk setiap tindakan yang dilakukan oleh pengguna. Kita harus memaafkan pengguna jika suatu ketika pengguna melakukan beberapa kesalahan. Seperti jika pengguna ingin menghapus file, kita harus menawarkan suatu opsi untuk membatalkan dan mendapatkan kembali file tersebut.