REKAYASA PERANGKAT LUNAK : PERANCANGAN APLIKASI WEB

 

Selamat siang, disini saya akan sedikit membahas mengenai “PERANCANGAN APLIKASI WEB” pada mata kuliah REKAYASA PERANGKAT LUNAK pertemuan 11. Apa saja sih yang akan saya bahas pada pertemuan 11 kali ini?. Materi yang terdapat pada pertemuan 11 kali ini yaitu :

1.    Langkah-langkah Web Design

2.    Sifat-sifat aplikasi Web

3.    Kualitas Perancangan aplikasi Web

4.    Kualitas Aplikasi web

5.    Perancangan Antarmuka

6.    Perancangan Estetika

7.    Perancangan Isi

8.    Perancangan Arsitektural

9.    Imlementasi Penting Desain Web

 

Mari kita masuk ke pembahasan dari materi materi di atas.

Perancangan aplikasi web memerlukan 5 aktivitas teknis berupa:

1.    Menetapkan tampilan pada web

2.    Pembuatan rancangan estetika antarmuka pengguna

3.    Pendefinisian struktur arsitektur aplikasi web secara keseluruhan

4.    Pengembangan isi dan fungsional

5.    Perencanaan navigasi

Perancangan web sangat penting bagi designer karena:

1.    Membuat model yang dapat dinilai kualitasnya dan dapat diperbaiki sebelum isi dan kode dibentuk.

2.    Membuat model sebelum pengujian dilakukan.

3.    Membuat model sebelum end-user yang berjumlah besar menggunakan aplikasi.

 

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

Contoh disain yang sulit dipahami, karena mengandung pernyataan yang umum berupa “Link”

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

Atribut Kualitas :

1.     Keamanan Kemampuan aplikasi web dan lingkungan server untuk mencegah akses yang tidak sah, dan mencegah seranganserangan 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

Contoh disain Login dari sudut pandang keamanan

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

 

Sistem memberikan umpan balik kepada user jika melakukan kesalahan

 

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

 

Sasaran Perancangan web yang baik:

1.     Kesederhanaan (Simplicity

Fungsi-fungsi mudah digunakan dan mudah dipahami

2.     Konsisten (Consistency)

Konstruksi perancangan isi dibuat secara konsisten. Misalnya: jenis font yang sama pada semua dokumen teks, skema warna dan gaya yang konsisten

3.     Identitas (Identity)

Estetika, user interface, dan perancangan navigasi harus konsisten dengan lingkungan aplikasi untuk apa aplikasi web itu dibuat atau dikembangkan.

4.     Ketangguhan (Robustness)

User pada umumnya mengharapkan isi dan fungsi yang relevan terhadap kebutuhan user.

5.     Kemudahan melakukan navigasi dalam aplikasi

Aplikasi web seharusnya dirancang sedemikian rupa sehingga tampilannya intuitif dan hasilnya dapat dengan mudah diramalkan.

6.     Daya tarik visual (Visual Appeal)

Tampilan isi, rancangan user interface, pengaturan warna, keseimbangan yang harus terjadi di antara teks, grafik dan media lainnya, mekanisme navigasi sangat memiliki kontribusi pada daya tarik visual

7.     Kompatibilitas (Compatibility)

Aplikasi web akan digunakan pada berbagai jenis lingkungan eksekusi aplikasi yang berbeda (hardware, OS, browser, dan koneksi internet)

 

CONTOH DESAIN WEB

 

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

 

CONTOH DESAIN WEB BERBASIS ANDROID

 

 

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

 

CONTOH

Sebaiknya tidak menggabungkan semua kebutuhan penggunaan aplikasi, pisahkan antara pemesanan dengan pengembalian mobil, serta penggunaan warna teks yang seharusnya mudah dibaca

 

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.

 

CONTOH

Tampilan rancangan detail isi buku (objek)

 

 

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.

A.    ARSITEKTUR ISI

1.     Struktur Linier: dilakukan saat interaksi user dengan aplikasi web secara umum memperlihatkan urutan yang dapat diramalkan. Contoh: urutan pemasukan pemesanan produk dimana informasi tertentu harus dalam urutan yang bersifat spesifik.

 

2.     Struktur Grid: arsitektur yang diterapkan saat isi aplikasi web dapat diorganisasikan menjadi 2 dimensi atau lebih. Dimensi horizontal merepresentasikan jenisjenis produk, dan dimensi vertikal merepresentasikan penawaran yang disediakan oleh penjualnya.

 

3.     Struktur Hirarki: rancangan dimungkinkan adanya pencabangan hypertext (aliran kendali) secara horizontal bergerak melintasi cabang-cabang vertikal pada struktur aplikasi web.

 

4.     Struktur Jaringan (Web Murni): struktur ini dapat digabungkan untuk membentuk struktur-struktur yang bersifat komposit.

B.    ARSITEKTUR APLIKASI WEB

Mendeskripsikan infrastruktur yang memungkinkan sistem atau aplikasi berbasis web untuk mencapai sasaran-sasaran bisnisnya. Arsitektur aplikasi web dibuat dalam 3 lapisan yang bertujuan untuk memisahkan antarmuka dari mekanisme navigasi dan dari perilaku yang dimiliki oleh aplikasi. Hal ini akan menyederhanakan implementasi aplikasi web dan akan meningkatkan penggunaan ulang komponen-komponennya. Aristektur MVC (Model View-Controller) secara fungsional dijelaskan sebagai berikut:

a.     Pengendalian: mengelola akses ke model, ke view dan melakukan koordinasi aliran data di antara model dan view.

b.     Model: memuat semua isi yang bersifat spesifik terhadap aplikasi dan memuat logika pemrosesan, termasuk di dalamnya semua objek isi.

c.     View: memuat semua fungsi yang bersifat spesifik terhadap user interface yang di dalamya termuat presentasi isi dan logika pemrosesan, objek isi, akses ke data dan ke sumber informasi lainnya, dan semua fungsionalitas pemrosesan yang diperlukan end user.

9.    Elemen Penting Desain Web

1.     Layout atau Tata Letak

·       Layout sebuah situs web hendaklah mempertimbangkan letak penyusunan elemenelemen desain yang memudahkan pembaca untuk mencerna aliran informasi.

·       Perhatikan hierarki dan keseimbangan layout secara keseluruhan.

·       Susunan paling umum adalah atas-bawah-kirikanan.

Berikut contoh tampilan layout

 

TIPS LAYOUT YANG BAIK

·       Buat susunan atau aliran informasi yang mudah diikuti oleh mata pembaca.

·       Susun elemen berdasarkan skala prioritas dari paling penting → penting → kurang penting

·       Sebagian besar orang terbiasa membaca dari kiri ke kanan, maka letakkan main post di sebelah kiri sedangkan sidebar di sebelah kanan.

·       Perhatikan pula keseimbangan susunan elemen desain.

 

2.     White Space atau Ruang Kosong

·       White space berguna untuk membantu mata manusia mengorganisasi data.

·       Bagi yang belum begitu familiar dengan istilah desain, white space bisa diartikan sebagai ruang kosong yang memisahkan antara satu elemen dengan elemen lainnya.

·       Situs web adalah sebuah ruang berisi berbagai informasi, agar informasi itu dapat diolah dengan baik oleh mata pembaca, maka ruang kosong berfungsi sebagai jeda

 

TIPS WHITE SPACE YANG BAIK

·       Gunakan ruang kosong dengan jarak yang sama antara satu elemen dengan elemen lainnya.

·       White space juga termasuk jarak antar baris dan antar paragraf dalam body text.

 

3.     Pilihan Font

·       Prinsip memilih huruf untuk web (web fonts) agak berbeda dengan ketika memilih huruf untuk materi cetak seperti brosur, pamflet, buku, atau materi cetak lainnya.

·       Sebab ketika membaca di layar, mata manusia lebih cepat lelah dari pada ketika membaca di atas kertas.

·       Berikut beberapa hal yang harus diperhatikan ketika memilih jenis huruf untuk web:

1.     Klasifikasi huruf. Kenali klasifikasi huruf dan karakternya masing-masing.

2.     Karakter. Huruf memiliki psikologinya sendiri-sendiri, pilih jenis huruf yang sesuai dengan karakter situs web.

3.     Legibility. adalah tingkat kemudahan mata mengenali suatu karakter/huruf tanpa harus bersusah payah.

4.     Readibility. Readibility berkaitan dengan bentuk huruf dan hubungannya dengan huruf lain.

5.     Warna. Apa pun warna favorit pengguna, entah itu merah, ungu, biru, atau merah muda.

6.     Ukuran. Ukuran berpengaruh terhadap readibility.

 

TIPS FONT YANG BAIK

1.     Jenis huruf sans serif paling baik untuk digunakan di layar.

2.     Gunakan MAKSIMAL 2 jenis huruf di dalam satu situs web. Anda bisa mengkombinasikan antara huruf serif dengan sans serif atau script dengan sans serif. Misalnya, Georgia untuk judul dan Helvetica untuk body text.

3.     Gunakan variasi ukuran huruf untuk menandai skala prioritas aliran informasi. Misalnya, 12px untuk body text, 10 px untuk text snippet di sidebar, 8 atau 9px untuk footer.

4.     Anda bisa memilih kombinasi huruf yang paling cocok di Google Fonts.

 

4.     Skema Warna Website

·       Situs web bukan kanvas berisi lukisan abstrak, kita sedang menyampaikan informasi kepada pembaca, bukan sedang mendistraksi mata mereka.

·       Warna juga memengaruhi psikologi pembaca, menciptakan mood, bahkan menyelusup ke alam bawah sadar.

·       Warna, bisa menyampaikan simbol dirinya sendirinya bahkan tanpa disertai oleh teks.

·       Itu sebabnya mengapa pemilihan warna merupakan salah satu elemen penting dari desain sebuah web.

 

TIPS SKEMA WARNA YANG BAIK

·       Gunakan warna muda untuk latar dan warna tua untuk teks, bukan sebaliknya. Misalnya, latar putih atau abuabu muda untuk latar dan hitam atau abu-abu tua untuk huruf body text.

·       Jika Anda tidak yakin dengan pilihan warna yang sesuai, gunakan gradasi abu-abu (grayscale).

·       Hindari menggunakan warna-warna primer untuk latar: merah, biru, kuning. Ada jutaan gradasi warna di dunia ini, Anda bisa memilih satu di antaranya.

·       Pilih hanya SATU warna yang akan di-highlight. Untuk variasi, Anda bisa menggunakan warna lain tapi dengan tone yang sama atau gradasi dari warna utama.

 

5.     Desain Navigasi

·       Navigasi ibarat denah atau petunjuk jalan yang memudahkan pembaca untuk mencari kategori konten atau produk apa pun yang mereka inginkan.

·       Letakkan navigasi di tempat yang mudah ditemukan, juga pilih bentuk navigasi yang mudah digunakan agar pembaca betah berlama-lama di situs.

 

TIPS DESAIN NAVIGASI YANG BAIK

·       Letakkan navigasi di bagian paling atas layout. Bisa di bawah atau di atas header.

·       Kategorikan navigasi berdasarkan produk atau subtopik utama dari situs web Anda.

·       Untuk pengalaman pengguna yang lebih baik, sebaiknya hanya gunakan SATU baris navigasi.

·       Gunakan menu dropdown untuk memisahkan antara subtopik dengan sub-subtopik.

·       Anda bisa menggunakan navigasi linear atau navigasi hamburger.

 

6.     Desain Tombol Pencarian (dan Tombol Lain)

·       Tidak ada yang lebih menyebalkan selain ketika berkunjung ke sebuah situs web dan tidak menemukan tombol search.

·       Kita tidak akan pernah tahu apa yang ingin ditemukan oleh pembaca ketika datang ke situs web kita.

·       Navigasi, kategori, dan label adalah opsi yang kita berikan, sedangkan tombol search adalah kebebasan.

·       Pembaca tidak memiliki waktu yang cukup untuk mencari dari satu kategori ke kategori lain atau dari satu konten ke konten lain.

 

TIPS PENCARIAN YANG BAIK

·       Letakkan tombol di tempat yang mudah dilihat. Biasanya di sebelah navigasi atau di bawah header.

·       Gunakan tombol berupa huruf atau simbol. Jika menggunakan simbol, HANYA gunakan simbol lup yang merupakan simbol universal.

·       Untuk pengalaman pengguna yang lebih baik, Anda bisa menggunakan fitur Google custom search.

 

7.     Desain Halaman About US

Jika Anda bukan perusahaan besar, tidak memiliki jenis bisnis yang spesifik, bergerak di bidang bisnis yang sama sekali baru, atau bukan pemilik situs web yang sangat terkenal, laman “About Me/Us” memiliki beberapa fungsi:

1.     Memperkenalkan diri/perusahaan.

2.     Memperkenalkan jasa/produk yang dimiliki.

3.     Menjelaskan secara spesifik bidang yang digeluti

4.     Membangun engagement dengan pembaca

 

TIPS ABOUT US YANG BAIK

·       Letakkan laman “About Me/Us” di navigasi agar mudah ditemukan.

·       Laman “About Us” bisa dipergunakan untuk menceritakan visi dan misi perusahaan atau organisasi.

·       Berikan informasi yang jelas dan tidak bertele-tele.

·       Jika anda adalah profesional, sertakan juga skill dan jasa yang Anda berikan

 

8.     Desain Halaman Kontak

·       Laman kontak berpengaruh terhadap autoritas.

·       Pembaca dan klien tentu harus tahu apakah situs yang mereka kunjungi benar-benar dikelola oleh perusahaan atau orang asli, bukan fiktif.

·       Laman kontak juga mempermudah mereka untuk menghubungi kita.

·       Karena terus terang, seseorang yang sulit dihubungi sering kali membuat frustrasi.

 

APA SAJA YANG HARUS ADA DI LAMAN KONTAK:

·       Perusahaan: Alamat lengkap, jam operasional, nomor telepon, surel.

·       Personal: Alamat (lengkap atau hanya nama kota), nomor telepon (opsional), surel.

·       Form (opsional).

 

9.     Desain Footer yang Informatif

·       Footer bisa saja berisi pengulangan informasi dengan catatan informasi tersebut memang krusial.

·       Bisa juga berupa tambahan informasi berupa sitemaps, copyright, privacy policy, atau informasi lain yang memudahkan pembaca.         

 

 

10.  Kualitas Gambar pada Website

·       Walau bagaimanapun, kita harus tetap mempertimbangkan aspek-aspek visual untuk memikat pembaca.

·       Selain itu, ilustrasi dan foto memiliki fungsi untuk menjelaskan dan melengkapi konten.