Artikel berikut merupakan artikel lanjutan dari Software Engineering : Design Engineering – WebApps Design (Part 1)

3. Formulasi dan Analisis Sistem Berbasis Web
Formulasi dan analisis sistem berbasis web mewakili suatu urutan kegiatan rekayasa WebApp yang dimulai dengan identifikasi tujuan keseluruhan untuk WebApp dan diakhiri dengan pengembangan model atau persyaratan analisis spesifikasi untuk sistem. Formulasi sistem memungkinkan pelanggan dan pengembang untuk menetapkan seperangkat tujuan dan sasaran untuk pembangunan WebApp.  Hal ini juga dapat mengidentifikasi ruang lingkup upaya pengembangan dan menyediakan sarana untuk menentukan hasil yang sukses. Analisis adalah kegiatan teknis yang mengidentifikasi persyaratan data, fungsional, dan perilaku untuk WebApp.

  • Formulasi
    Secara umum ada dua kategori sasaran yang dapat diidentifikasi :Tujuan informasi
    Menunjukan niat untuk menyediakan konten spesifik dan informasi kepada pengguna akhir.

    Tujuan yang berlaku
    Menunjukan kemampuan untuk melakukan beberapa tugas di dalam WebApp.

    Dalam banyak kasus tujuan yang sudah dikembangkan adalah mengintegrasikan ke dalam scope statement. Ini berguna untuk menunjukan tingkat integrasi yang diharapkan dari WebApp. Masalah konektivitas dipertimbangkan dalam tahap ini.

  • Analisis
    Konsep dan prinsip yang dibahas untuk analisis persyaratan perangkat lunak berlaku tanpa revisi untuk analisis rekayasa Web. Scope ditentukan selama kegiatan formulasi diuraikan untuk membuat model analisis lengkap untuk WebApp. 4 jenis analisis dilakukan selama WebE :
  1. Analisis Konten
    Spektrum konten yang akan disediakan oleh WebApp harus diidentifikasi. Konten termasuk teks, grafik, gambar, audio, dan video. Pemodelan data dapat digunakan untuk mengidentifikasi dan menggambarkan masing-masing objek daya yang akan digunakan dalam WebApp.
  2. Analisis Interaksi
    Cara dimana pengguna berinteraksi dengan WebApp dijelaskan secara rinci. Use-case dapat dikembangkan untuk memberikan rincian tentang interaksi ini.
  3. Analisis Fungsional
    Skenario penggunaan (use-case) dibuat sebagian dari analisis interaksi untuk menentukan operasi yang akan diterapkan ke dalam konten WebApp dan menyiratkan fungsi pemrosesan lainnya. Semua operasi dan fungsi dijelaskan secara rinci.
  4. Analisis Konfigurasi
    Lingkungan dan infrastruktur WebApp dijelaskan secara rinci. WebApp dapat berada di internet, intranet, atau extranet. Selain itu, infrastruktur untuk WebApp harus diidentifikasi dalam tahap ini.Meskipun spesifikasi persyaratan rinci direkomendasikan untuk WebApp yang besar dan kompleks, dokumen seperti itu jarang terjadi. Dapat dikatakan bahwa persyaratan WebApp yang berevolusi terus-menerus dapat membuat dokumen apapun menjadi usang sebelum selesai. Meskipun mungkin benar secara ekstrem, perlu untuk mendefinisikan model analisis yang dapat berfungsi sebagai dasar untuk kegiatan desain yang diikuti, Minimal informasi yang dikumpulkan selama empat tugas analisis sebelumnya harus ditinjau, dimodifikasi sesuai kebutuhan, dan kemudian disusun menjadi dokumen yang dapat diteruskan ke desainer WebApp.

4. Design Web Application
Sifat langsung dari aplikasi berbasis web digabungkan dengan tekanan untuk kekuatan evolusi terus menerus memaksa seorang insinyur web untuk membangun desain yang memecahkan masalah bisnis segera, sementara pada saat yang bersamaan juga mendefinisikan sebuah arsitektur aplikasi yang memiliki kemampuan untuk berkembang pesat seiring berjalannya waktu. Masalahnya, tentu saja adalah bahwa memecahkan masalah langsung (dengan cepat) dapat mengakibatkan kompromi yang mempengaruhi kemampuan aplikasi untuk berkembang dari waktu ke waktu.

Dalam rangka menampilkan web-based desain yang efektif, web engineer harus memakai kembali keempat Teknik element:

  • Design principles and method: Merupakan hal penting untuk diingat bahwa konsep dan prinsip desain yang sudah didiskusikan pada chapter 13 digunakan ke semua WebbApp. Effective modularity, information hiding, stepwise elaboration, dan software desain heuristik lainnya menuntuk kepada Web-based system dan aplikasi yang mudah untuk beradapatasi, disempurnakan, di test, dan digunakan.
  • Golden Rules: Interaktif hypermedia telah dibangun lebih dari satu decade. Selama itu, designer telah mengembangkan desain heuristic yang dapat dipakai pada aplikasi yang baru.
  • Design Pattern: Seperti yang telah kita ketahui bahwa desain pattern adalah pendekatan generic untuk penyelesaian masalah yang dapat diadapatasi cukup luas dalam masalah yang spesifik. Dalam konteks WebbApp, desain pattern dapat diaplikasikan tidak hanya pada fungsional element dari aplikasi tapi juga dokumen, grafik, dan general estetis untuk website.
  • Templates: Template dapat digunakan sebagai kerangka untuk desain pattern ataupun dokumen yang akan digunakan WebbApp.

Desain Arsitektural
Arsitektural desain untuk Web-Based system dan aplikasi fokus pada struktur hypermedia dari WebbApp dan pattern desain aplikasi dan konstruksi template untuk memenuhi struktur yang memenuhi aturan reuse.

Struktur WebbApp
Keseluruhan struktur arsitektur terikat pada tujuan yang ditetapkan untuk WebApp, konten yang akan disajikan, pengguna yang akan kunjungi, dan filosofi navigasi (bagian 29.5.3) yang telah didirikan. Perancang arsitektural dapat memilih dari empat struktur yang berbeda ketika mengembangkan desain untuk WebAp.

Berikut adalah beberapa hypertext yang diusulkan dalam literatur:

  • Cycle: pattern yang mengembalikan user ke node sebelumnya
  • Web ring: pattern yang mengimplementasikan “grand cycle yang menghubungkan keseluruhan hypertexts dalam perjalanan subject
  • Contour: pattern yang terjadi bila cycle melanggar yang satu dengan yang lainnya,
  • Counterpoint: pattern yang menambahkan komentar hypertext
  • Mirrorworld: konten yang dipresentasikan menggunakan benang narasi yang berbeda,masing masing dengan sudut pandang perspektif yang berbeda.
  • Sieve: pattern yang memandu user kedalam beberapa pilihan tujuannya adalah menggiring user ke konten tertentu.
  • Neighborhood: pattern yang menampilkan lapisan navigational frame yang seragam ke semua Web pages tujuannya untuk memberikan petunjuk yang konsisten kepada user terlepas dari lokasi pada WebbApp.

Desain Navigasi
Setelah semua WebbApp arsitektur telah ditetapkan dan komponen(halaman,skrip,applet, dan fungsi proses yang lainnya) dari arsitektur telah di identifikasi, designer harus menentukan jalan navigasi untuk user dalam mengakses konten WebbApp. Untuk memenuhi ini designer harus:

  1. Identifikasi semantics dari naviagasi untuk user yang berbeda.
  2. Mendefinisikan mekanisme untuk mencapai navigasi.

WebbApp yang besar seringkali memiliki dua user yang berbeda, dari user yang telah teregister maupun user yang memiliki kewenangan, hal ini harus dibedakan dan diberikan Batasan dalam mengakses konten yang tesedia.

Saat tahap pertama pada design navigasi, struktur WebbApp dinilai untuk menentukan satu atau lebih WoN untuk setiap tujuan user(user goal). WoN mengidentifikasikan navigasi nodes, lalu menghubungkan navigasi yang dapat digunakan, WoN nantinya akan diatur oleh SNU.

Sebagai hasil desain, mekanisme masing-masing link navigasi diidentifikasi. Antara banyak pilihan yang mungkin adalah link berbasis teks, ikon, tombol dan switch, dan grafis metafora. Perancang harus memilih link navigasi yang sesuai untuk konten dan konsisten dengan heuristik yang mengarah ke high-quality design interface.

Selain memilih mekanisme navigasi, perancang juga harus menetapkan Konvensi navigasi yang sesuai dan AIDS. Sebagai contoh, ikon dan link grafis akan terlihat “diklik ” dengan Beveling tepi untuk memberikan gambar tampilan tiga dimensi.

Audio atau visual feedback harus dirancang untuk memberikan user dengan indikasi bahwa opsi navigasi telah dipilih. Untuk navigasi berbasis teks, warna harus digunakan untuk menunjukkan link navigasi dan untuk memberikan indikasi link sudah pernah dituju. Ini hanyalah beberapa contoh Konvensi desain yang membuat navigasi menjadi mudah. Selain Konvensi, alat bantu navigasi seperti peta situs, tabel isi, indeks, mekanisme pencarian, dan fasilitas bantuan juga harus didesign.

Desain Interface
Interface design konsep,prinsip, dan metode yang telah dijelaskan di chapter 15. Semua dapat diaplikasikan kedalam design dari user interface untuk WebbApp.User interface pada WebApp adalah suatu “first impression”. Ketimbang nilai dari konten, kecanggihan kemampuan untuk memproses, dan semua manfaat dari WebApp itu sendiri. Design yang tidak menarik mungkin akan mengurangi ekspektasi dari user dan user bisa saja langsung meninggalkan WebbApp tersebut, sebuah interface harus menangkap user yang berpotensi.

Berikut adalah beberapa panduan sederhana dari Nielsen dan Wagner:

  • Server error,dapat menyebabkan user untuk meninggalkan Website, dan mencari informasi di Website lain, walaupun error yang terjadi hanyalah error kecil.
  • Kecepatan membaca pada computer rata-rata 25% lebih lambat ketimbang membaca langsung dari hardcopy atau buku. Oleh sebab itu jangan memaksakan user untuk membaca text yang terlalu banyak.
  • Hindari tanda “dalam perbaikan”.
  • User lebih memilih untuk tidak melakukan scroll, informasi yang penting sebaiknya ditempatkan pada posisi yang benar
  • Navigation menus dan headbars harus di design secara konsisten dan bisa dipakai pada semua halaman oleh user. Design seharusnya tidak berdasarkan pada fungsi browser untuk membantu navigasi
  • Aesthetic seharusnya tidak menggantikan fungsionalitas. Contohnya tombol yang simple mungkin akan lebih baik dari pada tombol yang estetis, gambar yang tidak jelas.
  • Opsi navigasi harus jelas, sehingga user tidak perlu repot mencari-cari tombol untuk suatu fungsi navigasi.
  • Interface yang didesain dengan baik akan meningkatkan pesepsi user terhadap konten yang disediakan oleh situs tersebut. Tidak perlu yang terlalu bagus, tetapi harus terstruktur dan terlihat ergonomis.

Bersambung ke artikel Software Engineering : Design Engineering – WebApps Design (Part 3)

Referensi :

Pressman, R.S. (2015). Software Engineering : A Practioner’s  Approach. 8th ed. McGraw-Hill Companies.Inc, Americas, New York.  ISBN : 978 1 259 253157

Author : Theodorus Nathaniel Kurniawan
Supervised by : Irma Kartika Wairooy, S.Kom., M.T.I