• Tidak ada hasil yang ditemukan

BAB III ANALISIS DAN PERANCANGAN 32

3.4. Perancangan Sistem

3.4.1. General Architecture

General architecture pada m-learning ini dapat dilihat pada gambar 3.1.

Login Portal

Kehidupan Kampus (Materi)

Adu Pintar (Soal)

Story 1-9

Adu Pintar 1-3 Free

Adu Pintar 4-5 10 Koin

Skoring

Gambar 3.1. General architecture sistem m-learning

Arsitektur umum dari m-learning terdapat 2 fitur utama, yaitu kehidupann kampus (materi) dan adu pintar (soal). Mode kehidupan kampus berisi 9 cerita-materi interaktif yang dapat diselesaikan peserta. Sedangkan mode adu pintar berisi soal-soal yang harus dijawab peserta. Adu pintar 1 sampai 3 tidak memerlukan biaya, sedangkan adu puntar 4 sampai 5 membutuhkan masing-masing 10 koin. Untuk mendapatkan koin, peserta harus menjawab dengan benar soal-soal yang ada di mode adu pintar.

3.4.2. Flowchart

Flowchart pada m-learning ini dapat dilihat pada gambar 3.2. sampai 3.4.

Username Password Nama Username Password Cek login Masukkan username, password, nama Masukkan username dan password Data disimpan kedalam database Ya Benar Salah selesai Menampilkan - halaman login - menu daftar Mulai

Login ? Tidak Registrasi?

Ya

Halaman Utama / tutorial

Tidak

Ya Menampilkan Menu halaman

utama Mulai

Adu Pintar ? Tidak Kehidupan Kampus ?

Ya

Tampil daftar story

Menampilkan soal Ya Pilih story Tidak Jawab ? salah Benar +1 benar tidak ya selesai Jawab ? benar Salah

Hitung skor didapat

ya selesai Story selesai Soal abis ? Tidak Konfirmasi mulai Menampilkan Story Menampilkan Soal Ya Benar +0 Soal 10 ?

Menampilkan Soal secara acak

Mulai

soal Mengacak soal yang

tampil

selesai

Gambar 3.4. Flowchart pengacakan soal dan jawaban

Dari gambar 3.2. dapat dijelaskan bahwa sistem mengharuskan pengguna untuk memiliki akun untuk dapat menggunakan sistem m-learning ini. Apabila sudah memiliki akun, maka pengguna dapat login dengan akun yang sudah dimiliki, dan jika belum ada, maka pengguna dapat registrasi akun baru.

Setelah pengguna login, sistem akan mengecek apakah user tersebut sudah pernah menjalani tutorial atau belum. Apabila belum pernah mengikuti tutorial, pengguna tersebut akan dipaksa untuk membuka halaman tutorial. Apabila pengguna tersebut sudah pernah mengikuti tutorial, maka sistem akan membawa pengguna tersebut ke halaman utama sistem.

Dari gambar 3.3. dapat dijelaskan bahwa terdapat 2 jenis mode permainan, yaitu mode kehidupan kampus dan mode adu pintar. Pada mode adu pintar terdapat 10 batasan soal dan 5 kali kesempatan bermain.. Pada mode kehidupan kampus, pengguna akan mengikuti materi sampai selesai. Di akhir materi, pengguna akan diberikan beberapa pertanyaan mengenai materi yang baru saja diberikan. Apabila pengguna salah dalam menjawab soal di mode kehidupan kampus, pengguna diwajibkan untuk menjawab pertanyaan sampai benar, kemudian pengguna dapat menjawab soal berikutnya. Pengguna diwajibkan mengikuti mode kehidupan kampus secara berurutan dari awal sampai akhir.

Dari gambar 3.4. dapat dilihat setiap soal yang ditampilkan untuk mode adu pintar adalah acak. Setiap pengguna akan mendapatkan soal dengan urutan yang berbeda.

3.4.3. Data flow diagram

DFD level 0 m-Learning yang dibangun ini dapat dilihat pada gambar 3.5.

M-Learning dengan Gamification Administrator Pelajar - Ban user - Mata Pelajaran - Forum - Interest - Belajar - Forum - Interest - Belajar -Abuse -Leaderboard - Profil - Pencapaian - Tutorial -Leaderboard - Profil - Pencapaian - Tutorial

Gambar 3.5. Data Flow Diagram

Gambar 3.5. menjelaskan bahwa terdapat dua buah pengguna, yaitu pelajar, administrator. M-Learning yang dirancang memiliki beberapa proses yang masih dapat dijabarkan lebih lanjut dengan menggunakan use case.

3.4.4. Use case diagram

Use case diagram merupakan pemodelan untuk kelakuan (behavior) sistem infromasi

yang akan dibuat. Use case mendeskripsikan sebuah interaksi anatara satu atau lebih aktor dengan sistem informasi yang akan dibuat (Shalahuddin, 2011). Gambar 3.6.. menggambarkan use case diagram dari sistem yang akan dibuat.

Pelajar Admin Profil Forum Leaderboard Cari pengguna Pelajaran Admin module Laporan Penyalahgunaan Interest Belajar Quest/ Turnamen Pencapaian Tutorial Blok pengguna

Set Level User

Gambar 3.6. Use Case Diagram

3.4.5. Use case Specification

Use case spesifikasi merupakan perkembangan atau deskripsi dari use case diagram untuk setiap use case, use case spesification menjelaskan bagaimana sebuah use case

itu bekerja (Muchtar & Sani 2011). Berikut ini adalah use case specification dari sistem yang akan dibangun berdasarkan use case diagram pada gambar 3.6.

Tabel 3.1. Use Case Spesifikasi untuk Use Case Mata Pelajaran

Tipe Use Case Penjelasan

Nama use case Mata Pelajaran

Aktor Admin

Deskripsi Use case ini digunakan oleh admin untuk menambah, mengedit atau menghapus mata pelajaran.

Pre condition Admin harus memiliki username dan password

untuk masuk ke sistem

Characteristic of activation Eksekusi dapat dilakukan oleh Administrator

Basic flow 1. Admin mengklik menu mata pelajaran.

3. Admin dapat menambah, mengedit, atau menghapus mata pelajaran. H-1: Mata pelajaran sudah ada di database.

4. Use case ini berakhir ketika sistem telah selesai

menambah, mengedit, atau menghapus mata pelajaran.

Alternative flow H-1: Mata pelajaran sudah ada di database

Sistem akan memberikan pesan bahwa mata pelajaran sudah ada di database apabila admin akan menambah mata pelajaran baru dengan nama yang sama.

Post condition Pada use case ini admin dapat menambah,

mengedit, atau menghapus mata pelajaran.

Limitations -

Tabel 3.2. Use Case Spesifikasi untuk Use Case Laporan Penyalahgunaan

Tipe Use Case Penjelasan

Nama use case Laporan Penyalahgunaan

Aktor Admin

Deskripsi Use case ini digunakan oleh admin untuk melihat laporan dari penyalahgunaan forum.

Pre condition Admin harus memiliki username dan password

untuk masuk ke sistem

Characteristic of activation Eksekusi dapat dilakukan oleh Administrator

Basic flow 1. Admin mengklik menu laporan

penyalahgunaan.

2. Sistem menampilkan daftar pelanggaran yang telah dilaporkan.

3. Admin dapat melihat keterangan pelanggaran berupa posting forum, pelanggar dan pelapor.

4. Admin dapat mengedit posting yang dilaporkan.

menampilkan daftar pelanggaran.

Alternative flow -

Post condition Pada use case ini admin dapat melihat dan mengedit

posting forum yang telah dilaporkan.

Limitations -

Tabel 3.3. Use Case Spesifikasi untuk Use Case Set Level User

Tipe Use Case Penjelasan

Nama use case Set Level User

Aktor Admin

Deskripsi Use case ini digunakan oleh admin untuk mengubah level user pengguna sistem.

Pre condition Admin harus memiliki username dan password

untuk masuk ke sistem

Characteristic of activation Eksekusi dapat dilakukan oleh Administrator

Basic flow 1. Admin membuka profil pengguna.

2. Admin mengklik tombol jadi pelajar/admin. 3. Use case ini berakhir ketika sistem berhasil

menyimpan level user ke database.

Alternative flow -

Post condition Pada use case ini admin dapat mengubah level user

pengguna sistem.

Tabel 3.4. Use Case Spesifikasi untuk Use Case Blok User

Tipe Use Case Penjelasan

Nama use case Blok User

Aktor Administrator

Deskripsi Use case ini digunakan untuk memblokir pengguna untuk menggunakan sistem.

Pre condition Aktor harus memiliki username dan password

untuk masuk ke sistem

Characteristic of activation Eksekusi dapat dilakukan oleh siapapun.

Basic flow 1. Admin membuka profil user yang akan di ban.

2. Sistem menampilkan konfirmasi ban.

3. Admin memilih konfirmasi blokir atau tidak.

4. Use case ini berakhir ketika sistem telah

menampilkan user sudah diblok atau tidak.

Alternative flow -

Post condition Pada use case ini Admin dapat memblokir

pengguna.

Limitations -

Tabel 3.5. Use Case Spesifikasi untuk Use Case Story

Tipe Use Case Penjelasan

Nama use case Story

Aktor Administrator

Deskripsi Use case ini digunakan oleh admin untuk menambah, mengedit, dan menghapus paket soal.

Pre condition Admin harus memiliki username dan password

untuk masuk ke sistem.

Characteristic of activation Eksekusi dapat dilakukan oleh Administrator.

Basic flow 1. Admin mengklik menu admin.

2. Admin klik menu story.

3. Sistem menampilkan daftar story.

4. Admin dapat menambah, mengedit, menghapus, dan publish paket soal.

menampilkan daftar semua story yang ada.

Alternative flow

-Post condition Pada use case ini admin dapat melihat informasi

story yang dipilih.

Limitations -

Tabel 3.6. Use Case Spesifikasi untuk Use Case Cari Pengguna

Tipe Use Case Penjelasan

Nama use case Cari Pengguna

Aktor Semua

Deskripsi Use case ini digunakan untuk mencari pengguna.

Pre condition Aktor harus memiliki username dan password

untuk masuk ke sistem

Characteristic of activation Eksekusi dapat dilakukan oleh siapapun.

Basic flow 1. User mengklik menu Cari pengguna.

2. Sistem menampilkan kotak tempat query

pencarian..

3. Aktor memasukkan query pencarian.

4. Use case ini berakhir ketika sistem telah

menampilkan hasil pencarian user.

Alternative flow -

Post condition Pada use case ini aktor dapat melihat pencarian

user.

Limitations -

Tabel 3.7. Use Case Spesifikasi untuk Use Case Forum

Tipe Use Case Penjelasan

Nama use case Forum

Aktor Semua

Deskripsi Use case ini digunakan untuk kegiatan forum.

Pre condition Aktor harus memiliki username dan password

untuk masuk ke sistem

Basic flow 1. User mengklik menu forum.

2. User mengklik tambah topik untuk memulai topik pembicaraan baru.

3. User mengklik topik yang sudah ada untuk membaca isi topik tersebut.

4. User mengklik tombol jawab untuk melanjutkan topik pembicaraan.

5. Sistem menampilkan isi topik.

6. User dapat mengklik laporkan penyalahgunaan pada setiap post yang ada di forum apabila post tersebut mengandung konten yang tidak pantas. 7. User dapat mengklik vote apabila posting

tersebut bermanfaat untuknya.

8. Use case ini berakhir ketika sistem telah

menampilkan topik pembicaraan yang dipilih.

Alternative flow

-Post condition Pada use case ini user dapat berdiskusi mengenai

pelajaran melalui fasilitas forum.

Limitations -

Tabel 3.8. Use Case Spesifikasi untuk Use Case Leaderboard

Tipe Use Case Penjelasan

Nama use case Leaderboard

Aktor Semua

Deskripsi Use case ini digunakan untuk melihat siapa saja yang mendapatkan skor tertinggi.

Pre condition Aktor harus memiliki username dan password

untuk masuk ke sistem

Characteristic of activation Eksekusi dapat dilakukan oleh siapapun.

Basic flow 1. User mengklik menu Leaderboard.

2. Sistem menampilkan 10 skor tertinggi.

3. Use case ini berakhir ketika sistem telah

Alternative flow -

Post condition Pada use case ini user dapat melihat siapa saja yang

telah mendapatkan skor tertinggi.

Limitations -

Tabel 3.9. Use Case Spesifikasi untuk Use Case Belajar

Tipe Use Case Penjelasan

Nama use case Belajar

Aktor Semua

Deskripsi Use case ini digunakan untuk melakukan kegiatan belajar seperti membaca materi dan menjawab soal.

Pre condition Aktor harus memiliki username dan password

untuk masuk ke sistem

Characteristic of activation Eksekusi dapat dilakukan oleh siapapun.

Basic flow 1. User mengklik menu kehidupan kampus / adu

pintar.

2. Sistem menampilkan peta pelajaran.

3. User mengklik salah satu materi pelajaran di peta pelajaran, kemudian sistem menampilkan materi pelajaran tersebut dalam bentuk dialog cerita.

4. User menjawab soal pada akhir cerita. 5. User mendapat skor.

6. Use case ini berakhir ketika sistem telah

memberi skor kepada user.

Alternative flow -

Post condition Pada use case ini user mendapatkan bahan materi

pelajaran yang diinginkan serta soal latihannya.

Tabel 3.10. Use Case Spesifikasi untuk Use Case Tutorial

Tipe Use Case Penjelasan

Nama use case Tutorial

Aktor Semua

Deskripsi Use case ini digunakan untuk memberikan informasi kepada user bagaimana sistem bekerja.

Pre condition Aktor harus memiliki username dan password

untuk masuk ke sistem

Characteristic of activation Eksekusi dapat dilakukan oleh siapapun.

Basic flow 1. User login untuk pertama kali.

2. Sistem akan mengecek apakah user sudah menyelesaikan tutorial atau belum. H-1: Tutorial sudah selesai.

3. User mengikuti tutorial sampai selesai. 4. User di kembalikan ke halaman utama

5. Use case ini berakhir ketika user telah sampai di halaman utama.

Alternative flow H-1: Tutorial sudah selesai.

Sistem tidak akan menampilkan tutorial lagi.

Post condition Pada use case ini user mengikuti tutorial sampai

selesai.

Limitations -

Tabel 3.11. Use Case Spesifikasi untuk Use Case Profil

Tipe Use Case Penjelasan

Nama use case Profil

Aktor Semua

Deskripsi Use case ini digunakan untuk melihat profil pengguna.

Pre condition Aktor harus memiliki username dan password

untuk masuk ke sistem.

Characteristic of activation Eksekusi dapat dilakukan oleh siapapun.

2. User mengklik link nama pengguna lain dari forum.

3. Sistem menampilkan profil. H-1 : My Profile

4. Use case ini berakhir ketika sistem telah

menampilkan profil.

Alternative flow H-1 : My Profile

Sistem mengijinkan pengguna untuk mengubah

interest.

Post condition Pada use case ini user dapat melihat informasi

profil yang terpilih.

3.4.6. Gamification

Gamification adalah pengimplementasian elemen yang ada pada game dan teknik

desain game pada konteks yang bukan game. Gamification dapat memotivasi orang untuk melakukan sesuatu yang biasanya tidak dilakukan menjadi mau untuk terus melakukan kegiatan tersebut (Werbach & Hunter 2012).

Berikut ini adalah aspek gamification yang diimplementasi dalam sistem m-learning ini :

1. Point

Sistem poin yang digunakan pada m-learning ini adalah skor. Skor dapat dikumpulkan dari menyelesai materi atau menjawab soal atau login setiap hari. Skor yang didapat dari menyelesaikan materi pada mode kehidupan kampus adalah 10 skor, menjawab soal dari mode adu pintar adalah 10 skor setiap soal, dan skor dari login harian adalah 10 dan terus meningkat sampai 5 hari kedepan sebanyak 20, setelah 3 hari, skor yang didapat dari login, diulang kembali dari 10.

2. Leaderboard

Leaderboard atau papan ranking menampilkan 20 pengguna dengan skor

tertinggi. Terdapat 2 daftar ranking, yaitu total skor, dan skor tertinggi yang pernah didapat dari mode adu pintar.

3. Badges

Elemen badges tidak dipakai dalam m-learning ini. 4. Challenge and quest

Terdapat 2 mode permainan yang dapat di selesaikan pada m-learning ini. Yaitu mode kehidupan kampus, dimana pengguna sistem mendapatkan materi pembelajaran dengan dialog interaktif disertai kuis setelah materi selesai, atau mode adu pintar, dimana pengguna menjawab deretan soal yang diberikan untuk mendapatkan skor tertinggi.

5. Onboarding

Onboarding adalah pengenalan dalam menggunakan sistem. Sebelum

pengguna memulai m-learning, pengguna dipaksa untuk mengikuti pengenalan/tutorial singkat mengenai sistem m-learning ini sendiri. Tutorial ini hanya akan dipaksa ditampilkan apabila pengguna baru pertama login. Apabila pengguna sudah pernah mengikuti tutorial satu kali

saja, maka tutorial tidak akan ditampilkan kembali, namum tetap dapat diakses kapan saja.

6. Social engagement loop.

Terdapat beberapa efek sosial berulang yang ditargetkan dalam penggunaan metode gamification, diantaranya :

a) Motivasi

Pengguna memiliki motivasi untuk mendapatkan bahan edukasi tambahan.

b) Panggilan untuk melakukan kegiatan

Forum diskusi menjadi pusat kegiatan online setelah mendapatkan bahan edukasi tambahan, pengguna juga dapat bertemu secara offline

untuk diskusi lebih jauh. c) Penyelesaian kegiatan

Setelah berdiskusi dan membaca materi, pengguna menyelesaikan kuis yang ada pada sistem.

d) Progress yang tampak / hadiah

Membaca materi, badge, mengikuti kuis, dan login harian menghasilkan skor. Melalui skor yang ada di papan ranking, penyelenggara m-learning dapat memberikan hadiah kepada peserta bila ada. Selain hadiah, pemahaman kelas yang diikuti, dan interaksi sosial antar pengguna dalam sistem merupakan progres yang tampak dari mengikuti m-learning yang telah digamifikasi. Diharapkan pengguna sistem kembali memiliki motivasi untuk mendapatkan bahan edukasi tambahan.

3.5. Perancangan antarmuka sistem

Antarmuka m-learning ini dirancang khusus untuk perangkat bergerak, karena target

m-learning ini akan dijalankan pada perangkat bergerak. Walaupun demikian, sistem

juga dapat dijalankan pada perangkat desktop. Berikut ini adalah beberapa rancangan

A. Halaman login M-Learning Username : Password: Login Register Teknologi Informasi 2013

Gambar 3.7. Rancangan halaman login

Gambar 3.7. adalah halaman login. Apabila pengguna sudah memiliki akun, pengguna dapat login. Terdapat 4 elemen yang dengan rincian sebagai berikut :

1. Username merupakan nama unik untuk masuk kedalam sistem.

2. Password merupakan kata kunci yang berkaitan dengan username untuk

masuk kedalam sistem.

3. Tombol login merupakan tombol untuk login.

4. Tombol registrasi merupakan tombol untuk membuka halaman registrasi.

B. Halaman registrasi M-Learning Username : Password: Register Teknologi Informasi 2013 Nama :

Gambar 3.8. Rancangan halaman registrasi

Gambar 3.8. adalah halaman registrasi. Pengguna dapat registrasi melalui halaman ini. Terdapat 4 elemen yang dengan rincian sebagai berikut :

1. Username merupakan nama unik untuk masuk kedalam sistem.

1 2 3 4 1 2 3 4

2. Password merupakan kata kunci yang berkaitan dengan username untuk masuk kedalam sistem.

3. Nama merupakan nama asli atau alias yang akan ditampilkan.

4. Tombol register adalah tombol untuk registrasi.

C. Halaman utama

Konten M-Learning

Teknologi Informasi 2013 Navigasi masukPesan

M-Learning

Teknologi Informasi

2015 Level user | nama user

Skor : 99999 menu menu menu menu logout

Gambar 3.9. Rancangan halaman utama

Gambar 3.9. adalah rancangan antarmuka utama yang akan menjadi kerangka tampilan untuk poin-poin berikutnya. Berikut adalah rincian elemen dari halaman utama:

1. Tombol navigasi adalah tombol untuk navigasi. Dengan mengklik tombol ini

akan membuka panel navigasi.

2. Notifikasi pesan masuk adalah notifikasi yang akan tampil apabila ada pesan masuk dari pengguna lain.

3. Panel konten letak konten untuk poin berikutnya.

4. Level pengguna dan nama pengguna yang sedang login. 5. Jumlah skor yang dimiliki pengguna yang sedang login. 6. Tombol untuk memilih modul konten.

7. Tombol logout. 1 2 3 4 5 6 7

D. Halaman profil M-Learning Teknologi Informasi 2013 Navigasi Update status Teks status foto Rincian profil Profil umum Tambah ketertarikan Hapus ketertarikan

Gambar 3.10. Rancangan halaman profil

Gambar 3.10. adalah rancangan antarmuka halaman profil. Halaman profil menampilkan sekilas info dari pengguna yang bersangkutan. Berikut adalah rincian elemen dari halaman profil:

1. Box status menampilkan foto pengguna dan status pengguna layaknya sosial

media, namun status ini tidak dapat dikomentari. 2. Rincian umum profil pengguna.

3. Pengguna dapat menambah bidang ketertarikan. 4. Pengguna juga dapat menghapus bidang ketertarikan.

1

2 3 4

E. Halaman mode belajar Dialog Materi Ilustrasi penjelasan avatar Tombol restart Tombol BGM

Gambar 3.11. Rancangan halaman belajar

Gambar 3.11. adalah rancangan antarmuka halaman belajar. Khusus mode adu pintar, tidak ada materi yang diberikan, hanya soal yang tersimpan dalam sistem yang diberikan. Halaman ini adalah halaman utama dari aktifitas m-learning, dimana pengguna dapat membaca materi dan mengerjakan soal. Berikut adalah rincian elemen dari halaman belajar:

1. Ilustrasi pelajaran yang sedang dijelaskan, baik gambar, soal, maupun koding. 2. Foto karakter yang sedang berdialog.

3. Dialog dari karakter mengenai penjelasan materi. 4. Tombol untuk mengulang pelajaran dari awal. 5. Tombol hidup-mati musik pengiring.

1

2

3

F. Halaman leaderboard

M-Learning

Teknologi Informasi 2013 Navigasi

Leaderboard

Total Skor tertinggi

nama Skor

………….. …………..

Gambar 3.12. Rancangan halaman leaderboard

Gambar 3.12. adalah rancangan antarmuka halaman leaderboard. Halaman ini menampilkan pengguna yang memiliki poin paling banyak. Berikut adalah rincian elemen dari halaman leaderboard:

1. Navigasi untuk melihat total skor dan skor adu pintar tertinggi. 2. 20 pengguna dengan nilai tertinggi.

G. Halaman pesan M-Learning Teknologi Informasi 2013 Navigasi Papan pesan Pengirim . Foto judul Potongan isi waktu Pengirim . Foto judul Potongan isi waktu M-Learning Teknologi Informasi 2013 Navigasi Pengirim / penerima judul Potongan isi Balas Pengirim / penerima judul Potongan isi 1 2 1 2 3

M-Learning

Teknologi Informasi 2013 Navigasi

Kirim pesan Penerima : nama penerima Judul pesan :

Isi pesan :

Wysiwyg editor

Kirim pesan

Gambar 3.13. Rancangan halaman pesan

Gambar 3.13. adalah rancangan antarmuka halaman pesan. Halaman ini berfungsi untuk bertukar pesan antar pengguna. Berikut adalah rincian elemen dari halaman pesan:

1. Kotak pilihan pesan dari pengirim yang berbeda dapat di klik untuk melihat isi percakapan.

2. Tombol untuk membalas. 3. Isi percakapan.

4. Nama penerima. 5. Kotak teks judul pesan. 6. Kotak teks isi pesan.

7. Tombol kirim pesan / balas pesan.

4

5

6 7

H. Halaman forum M-Learning Teknologi Informasi 2013 Navigasi Papan Forum Tambah kategori/topik Hapus kategori/topik Ganti nama Cari Forum/topik 1 Forum/topik 2 …... M-Learning Teknologi Informasi 2013 Navigasi Vote Hapus topik kb Nama . Nama Forum foto Isi post Nama . foto Vote Waktu post Vote power : Isi komentar balas

Vote Lih. profil komentari

Gambar 3.14. Rancangan halaman forum

Gambar 3.14. adalah rancangan antarmuka halaman forum. Halaman forum merupakah halaman untuk berdiskusi antar pengguna. Berikut adalah rincian elemen dari halaman forum:

1. Kotak aksi untuk menambah/hapus/ganti nama kategori/topik dan mencari kategori/topik. Tambah, hapus dan ganti nama merupakan fitur admin. Tombol ini tidak akan terlihat pada pengguna biasa.

2. Daftar kategori / topik.

3. Tombol hapus kategori / topik. Hanya dapat diakses oleh admin. 4. Tombol vote untuk memberi rating topik.

5. Tombol lihat profil pengguna yang membuat topik. 6. Tombol untuk mengomentari topik.

7. Tombol untuk membalas komentar.

1 2 3 4 5 6 7

I. Halaman cari pengguna

M-Learning

Teknologi Informasi 2013 Navigasi

Cari

Gambar 3.15. Rancangan halaman cari pengguna

Gambar 3.15. adalah rancangan antarmuka halaman cari pengguna. Halaman ini berfungsi untuk mencari pengguna sesuai kata kunci yang dimasukkan. Berikut adalah rincian elemen dari halaman cari pengguna:

1. Kotak teks pengguna yang akan dicari. 2. Tombol untuk memulai pencarian.

J. Halaman Tutorial

Dialog Tutorial Ilustrasi penjelasan

avatar

Gambar 3.16. Rancangan halaman tutorial

Gambar 3.16. adalah rancangan antarmuka halaman tutorial. Halaman ini merupakan halaman penjelasan dari semua fitur yang ada pada m-learning ini. Berikut

Dokumen terkait