Desain Sistem

Tujuan Pembelajaran

Setelah mempelajari materi ini, peserta didik diharapkan mampu:

1. Menjelaskan pengertian desain sistem.

2. Menjelaskan tujuan desain sistem dalam pengembangan perangkat lunak.

3. Mendeskripsikan proses perancangan alur sistem.

4. Menjelaskan penggunaan flowchart dalam desain sistem.

5. Menjelaskan pengertian wireframe dan mockup.

6. Membuat diagram use case sederhana.

7. Merancang struktur menu aplikasi.

8. Menjelaskan prinsip dasar perancangan antarmuka pengguna (User Interface).

9. Menjelaskan prinsip dasar User Experience (UX).

Pendahuluan

Sebelum sebuah rumah dibangun, seorang arsitek terlebih dahulu membuat gambar rancangan agar proses pembangunan berjalan sesuai rencana. Demikian pula dalam pengembangan perangkat lunak. Sebelum programmer mulai menulis kode program, diperlukan sebuah rancangan yang menggambarkan bagaimana aplikasi akan bekerja, bagaimana tampilannya, serta bagaimana pengguna akan berinteraksi dengan aplikasi tersebut.

Proses penyusunan rancangan tersebut disebut desain sistem. Tahap ini menjadi jembatan antara hasil analisis kebutuhan dengan proses pembuatan program. Desain sistem membantu pengembang menghasilkan aplikasi yang mudah digunakan, memiliki tampilan yang menarik, serta sesuai dengan kebutuhan pengguna.

Materi Inti

A. Pengertian Desain Sistem

Desain sistem adalah proses merancang struktur, alur kerja, tampilan, serta komponen-komponen suatu sistem sebelum perangkat lunak dikembangkan.

Desain sistem bertujuan menerjemahkan kebutuhan pengguna menjadi rancangan yang jelas sehingga programmer memiliki pedoman dalam membangun aplikasi.

Hasil desain sistem biasanya berupa diagram, flowchart, wireframe, mockup, maupun rancangan antarmuka aplikasi.

B. Tujuan Desain Sistem

Desain sistem memiliki beberapa tujuan penting.

1. Menjadi Pedoman Pengembangan

Desain membantu programmer memahami bagaimana aplikasi akan dibangun.

2. Mengurangi Kesalahan

Kesalahan dapat ditemukan lebih awal sebelum proses pemrograman dimulai.

3. Mempermudah Komunikasi

Desain menjadi media komunikasi antara analis sistem, programmer, desainer, dan pengguna.

4. Menghasilkan Aplikasi yang Mudah Digunakan

Perancangan yang baik akan meningkatkan kenyamanan pengguna.

5. Menghemat Waktu dan Biaya

Perubahan dapat dilakukan pada tahap desain tanpa harus mengubah kode program yang sudah dibuat.

C. Perancangan Alur Proses

Perancangan alur proses bertujuan menggambarkan urutan aktivitas yang dilakukan oleh sistem dalam menyelesaikan suatu pekerjaan.

Melalui alur proses, pengembang dapat mengetahui:

• urutan pekerjaan,

• hubungan antarproses,

• keputusan yang harus diambil,

• hasil yang diharapkan.

Alur proses biasanya digambarkan menggunakan flowchart atau diagram lainnya.

D. Flowchart

Flowchart merupakan diagram yang menggambarkan urutan proses menggunakan simbol-simbol standar.

Dalam desain sistem, flowchart digunakan untuk:

• menggambarkan proses bisnis,

• menjelaskan alur program,

• membantu memahami logika sistem,

• mempermudah proses implementasi.

Contoh sederhana:

E. Wireframe

Wireframe adalah rancangan awal tampilan antarmuka aplikasi yang hanya menunjukkan tata letak komponen tanpa memperhatikan warna, gambar, maupun desain akhir.

Wireframe digunakan untuk menentukan posisi berbagai elemen, seperti:

• logo,

• menu,

• tombol,

• kotak pencarian,

• gambar,

• formulir,

• area konten.

Wireframe dapat dibuat menggunakan kertas maupun aplikasi desain digital.

Tujuan wireframe adalah memastikan susunan tampilan aplikasi telah sesuai sebelum masuk ke tahap desain visual.

F. Mockup

Mockup adalah desain visual yang menampilkan bentuk aplikasi secara lebih lengkap dibandingkan wireframe.

Pada mockup biasanya sudah terdapat:

• warna,

• ikon,

• gambar,

• jenis huruf,

• tombol,

• tata letak akhir.

Mockup memberikan gambaran kepada pengguna mengenai tampilan aplikasi sebelum proses pemrograman dimulai.

Perbedaan wireframe dan mockup:

G. Diagram Use Case Sederhana

Diagram use case adalah diagram yang menggambarkan hubungan antara pengguna (actor) dengan fungsi-fungsi yang tersedia dalam suatu sistem.

Komponen utama diagram use case meliputi:

• Actor, yaitu pengguna sistem.

• Use Case, yaitu layanan atau fungsi yang disediakan sistem.

Contoh aplikasi perpustakaan:

Actor:

• Siswa

• Admin

Use Case:

• Login

• Mencari buku

• Meminjam buku

• Mengembalikan buku

• Melihat laporan

Diagram use case membantu pengembang memahami layanan yang harus tersedia bagi setiap pengguna.

H. Struktur Menu Aplikasi

Struktur menu merupakan susunan menu yang digunakan pengguna untuk mengakses berbagai fitur dalam aplikasi.

Contoh struktur menu aplikasi perpustakaan:

I. Perancangan Antarmuka Pengguna (User Interface)

User Interface (UI) adalah bagian aplikasi yang berinteraksi langsung dengan pengguna.

UI meliputi:

• tombol,

• ikon,

• menu,

• formulir,

• warna,

• teks,

• gambar,

• navigasi.

Prinsip dasar perancangan UI antara lain:

• Sederhana dan mudah dipahami.

• Konsisten pada setiap halaman.

• Menggunakan warna yang nyaman dipandang.

• Tulisan mudah dibaca.

• Tombol mudah dikenali.

• Navigasi mudah digunakan.

UI yang baik membuat pengguna dapat menggunakan aplikasi tanpa kebingungan.

J. Prinsip User Experience (UX) Dasar

User Experience (UX) adalah pengalaman yang dirasakan pengguna ketika menggunakan suatu aplikasi.

UX tidak hanya berkaitan dengan tampilan, tetapi juga kemudahan, kenyamanan, dan kepuasan pengguna.

Beberapa prinsip dasar UX antara lain:

1. Mudah Dipelajari

Pengguna baru dapat memahami cara menggunakan aplikasi dengan cepat.

2. Mudah Digunakan

Pengguna dapat menyelesaikan tugas tanpa kesulitan.

3. Efisien

Aplikasi membantu pengguna menyelesaikan pekerjaan dengan cepat.

4. Konsisten

Tampilan dan fungsi setiap menu memiliki pola yang sama.

5. Memberikan Umpan Balik

Sistem memberikan informasi ketika suatu proses berhasil atau gagal.

Contohnya, setelah data berhasil disimpan, aplikasi menampilkan pesan “Data berhasil disimpan.”

UX yang baik akan meningkatkan kepuasan pengguna sehingga aplikasi lebih nyaman digunakan.

Contoh Penerapan dalam Kehidupan Sehari-hari

Sebuah tim peserta didik akan membuat aplikasi kantin sekolah. Sebelum mulai menulis kode program, mereka menyusun flowchart untuk menggambarkan alur pemesanan makanan, membuat wireframe sebagai rancangan tata letak halaman, kemudian mengembangkan mockup dengan warna dan ikon yang menarik. Selanjutnya, mereka membuat diagram use case untuk menunjukkan hubungan antara pembeli, penjual, dan administrator. Setelah struktur menu selesai dirancang, mereka memastikan tampilan aplikasi mudah dipahami dan nyaman digunakan. Tahapan tersebut merupakan bagian dari proses desain sistem.

Kesimpulan

Desain sistem merupakan tahap penting dalam pengembangan perangkat lunak yang bertujuan menerjemahkan kebutuhan pengguna menjadi rancangan yang jelas. Desain sistem meliputi perancangan alur proses, flowchart, wireframe, mockup, diagram use case, struktur menu, antarmuka pengguna, dan pengalaman pengguna. Dengan desain yang baik, proses pengembangan perangkat lunak menjadi lebih terarah, efisien, dan menghasilkan aplikasi yang mudah digunakan.

Rangkuman

• Desain sistem adalah proses merancang sistem sebelum proses pemrograman dilakukan.

• Tujuan desain sistem adalah menghasilkan rancangan yang jelas dan mengurangi kesalahan pengembangan.

• Flowchart digunakan untuk menggambarkan alur proses.

• Wireframe merupakan rancangan awal tata letak antarmuka.

• Mockup merupakan desain visual yang lebih lengkap dibandingkan wireframe.

• Diagram use case menggambarkan hubungan antara pengguna dan fungsi sistem.

• Struktur menu membantu mengorganisasi fitur-fitur aplikasi.

• User Interface (UI) berfokus pada tampilan aplikasi, sedangkan User Experience (UX) berfokus pada pengalaman pengguna saat menggunakan aplikasi.

• Desain sistem yang baik membantu menghasilkan perangkat lunak yang efektif, efisien, dan mudah digunakan.

💡 Tahukah Kamu?

Banyak aplikasi populer, seperti WhatsApp, Instagram, Google Maps, dan Tokopedia, mengalami puluhan hingga ratusan kali perubahan desain antarmuka sebelum dirilis kepada pengguna. Perusahaan teknologi biasanya membuat berbagai versi wireframe, mockup, dan prototipe, kemudian meminta calon pengguna untuk mencobanya. Masukan dari pengguna digunakan untuk memperbaiki desain agar aplikasi menjadi lebih mudah digunakan. Hal ini menunjukkan bahwa desain sistem bukan hanya tentang tampilan yang menarik, tetapi juga tentang menciptakan pengalaman pengguna (UX) yang nyaman, efisien, dan sesuai dengan kebutuhan mereka.