Scribd Logo
Unggah

Selamat datang di Scribd!

  • 20 tayangan

    Asis 1 B Farhan Saidi Modul 4

    Diunggah oleh

    Farhan Saidi
    Laporan ini membahas desain user interface untuk sistem informasi persediaan barang di gudang sebuah perusahaan. Terdapat penjelasan tentang tujuan, teori dasar desain user interface dan user experience, serta prosedur pembuatan desain menggunakan Mockflow. Dilakukan perancangan sistem berdasarkan studi kasus perusahaan dan ditampilkan desain antarmuka pengguna untuk berbagai form aplikasi.

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai PDF, TXT atau baca online dari Scribd

    Asis 1 B Farhan Saidi Modul 4

    Diunggah oleh

    Farhan Saidi
    20 tayangan10 halaman
    Laporan ini membahas desain user interface untuk sistem informasi persediaan barang di gudang sebuah perusahaan. Terdapat penjelasan tentang tujuan, teori dasar desain user interface dan user experience, serta prosedur pembuatan desain menggunakan Mockflow. Dilakukan perancangan sistem berdasarkan studi kasus perusahaan dan ditampilkan desain antarmuka pengguna untuk berbagai form aplikasi.

    Deskripsi Asli:

    Hak Cipta

    © © All Rights Reserved

    Format Tersedia

    PDF, TXT atau baca online dari Scribd

    Apakah menurut Anda dokumen ini bermanfaat?

    Apakah konten ini tidak pantas?

    Laporan ini membahas desain user interface untuk sistem informasi persediaan barang di gudang sebuah perusahaan. Terdapat penjelasan tentang tujuan, teori dasar desain user interface dan user experience, serta prosedur pembuatan desain menggunakan Mockflow. Dilakukan perancangan sistem berdasarkan studi kasus perusahaan dan ditampilkan desain antarmuka pengguna untuk berbagai form aplikasi.

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai PDF, TXT atau baca online dari Scribd
    Unduh sebagai pdf atau txt
    20 tayangan10 halaman

    Asis 1 B Farhan Saidi Modul 4

    Diunggah oleh

    Farhan Saidi
    Laporan ini membahas desain user interface untuk sistem informasi persediaan barang di gudang sebuah perusahaan. Terdapat penjelasan tentang tujuan, teori dasar desain user interface dan user experience, serta prosedur pembuatan desain menggunakan Mockflow. Dilakukan perancangan sistem berdasarkan studi kasus perusahaan dan ditampilkan desain antarmuka pengguna untuk berbagai form aplikasi.

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai PDF, TXT atau baca online dari Scribd
    Unduh sebagai pdf atau txt
    dari 10

    LAPORAN SEMENTARA

    PRAKTIKUM ANALISIS DAN PERANCANGAN SISTEM INFORMASI


    BAB IV
    DESAIN USER INTERFACE

    Disusun oleh:
    PLUG B

    Farhan Saidi
    122200101

    LABORATORIUM
    ANALISIS DAN PERANCANGAN SISTEM INFORMASI
    PROGRAM STUDI TEKNIK INDUSTRI
    JURUSAN TEKNIK INDUSTRI
    FAKULTAS TEKNIK INDUSTRI
    UNIVERSITAS PEMBANGUNAN NASIONAL “VETERAN”
    YOGYAKARTA
    2022
    LEMBAR ORISINALITAS

    Saya yang bertanda tangan di bawah ini:


    Nama : Farhan Saidi
    NPM : 122200101

    menyatakan bahwa Laporan Praktikum Analisis dan Perancangan Sistem Informasi


    Bab IV merupakan hasil karya saya sendiri.
    Apabila pernyataan ini terbukti tidak benar, saya bersedia untuk
    mempertanggungjawabkan dan menerima sanksi sesuai hukum yang berlaku.

    Demikian pernyataan ini saya buat dengan sebenar-benarnya dan tanpa paksaan
    dari pihak mana pun.

    Yogyakarta, 13 September 2022


    Yang menyatakan

    Farhan Saidi
    122200101
    BAB IV
    DESAIN USER INTERFACE

    4.1 Tujuan Praktikum


    Tujuan praktikum pada Bab IV adalah:
    1. Mengetahui dan memahami desain user interface.
    2. Memahami desain konseptual.
    3. Membuat desain user interface dengan menggunakan Mockflow.

    4.2 Dasar Teori


    4.2.1 User Interface
    ISO menetapkan standar definisi untuk user interface (UI) yaitu semua
    komponen sistem interaktif (software maupun hardware) yang menyediakan
    informasi dan kontrol kepada pengguna untuk menyelesaikan tugas tertentu dengan
    sistem interaktif. Beberapa elemen yang termasuk dalam UI adalah window, icon,
    menu, pointer. Selain aspek estetika yang tampak secara visual, desain user
    interface harus dapat menyampaikan fungsinya. Menurut studi Nielsen, usability
    adalah tujuan akhir dari desain user interface. Komponen yang menentukan
    usability sebuah desain adalah kemudahan untuk dipelajari, efisiensi, ingatan
    pengguna terkait fungsi aplikasi setelah beberapa kali menggunakan, kesalahan
    yang dilakukan pengguna, dan kepuasan pengguna.
    4.2.2 User Experience
    User Experience (UX) adalah persepsi dan tanggapan masyarakat terhadap
    penggunaan produk, sistem, atau layanan. User Experience (UX) mengevaluasi
    kepuasan dan kenyamanan seseorang terhadap produk, sistem, dan layanan. Salah
    satu prinsip dalam membangun pengalaman pengguna adalah bahwa publik berhak
    menentukan sendiri kepuasannya (costumer rule). Seberapa pun bagusnya fungsi
    produk, sistem atau layanan, jika audiens target tidak dapat memperoleh kepuasan,
    aturan dan kenyamanan dalam interaksi, tingkat pengalaman pengguna akan sangat

    Laporan Sementara Praktikum Analisis dan Perancangan Sistem Informasi 2022 IV-2
    rendah. Perkembangan dunia digital dan mobile membuat UX semakin kompleks
    dan multidimensi.
    4.2.3 Desain User Interface
    Desain user interface (UI) merupakan komponen penyusun aplikasi seluler,
    bersama dengan desain user experience (UX). Pengalaman yang dirasakan audiens
    setelah menggunakan aplikasi seluler disebut desain UX. Sedangkan, tampilan
    visual yang dilihat audiens ketika sedang berinteraksi dengan aplikasi seluler
    disebut desain UI. Tujuan desain UI adalah memudahkan segala aktivitas
    mengoperasikan media-media digital tersebut agar menjadi lebih produktif dan
    dapat dinikmati. Peran desain UI yang sangat penting menyebabkan interaksi antara
    audiens dengan aplikasi seluler menjadi sangat rentan. Oleh karena itu, desain UI
    harus estetis dan mengikuti perkembangan tren gaya visual agar audiens
    mendapatkan kenyamanan, kemudahan, dan menimbulkan keberlanjutan dalam
    menggunakan aplikasi seluler.

    4.3 Prosedur Praktikum


    Prosedur praktikum pada Bab IV adalah:
    1. Membuka aplikasi Mockflow dengan double click pada icon atau dengan
    mengunjungi situs https://wireframepro.mockflow.com/ pada browser.
    2. Membuat akun pada aplikasi dengan memilih Create Account atau
    dengan memilih Sign Up apabila melalui website.
    3. Memilih Sign-up for Mockflow atau dengan memilih Log in directly
    apabila ingin menggunakan akun Google.
    4. Membuat workspace baru dengan memilih tanda plus. Lalu mengisikan
    nama space dan memilih Create.
    5. Memilih tanda plus pada UI Drawings untuk membuat project baru.
    6. Membuat project dengan nama Project 1 kemudian memilih Common
    pada tipe UI.
    7. Menggeser Rectangle ke workspace dan mengatur size sesuai selera.
    Mengubah warna background pada Rectangle 1 menjadi warna

    Laporan Sementara Praktikum Analisis dan Perancangan Sistem Informasi 2022 IV-3
    heksadesimal dengan kode #00205b dan Rectangle 2 dengan kode
    #e7eaec. Kemudian pada Rectangle 2, mengatur Corner Radius menjadi
    8.
    8. Menggeser Image ke workspace dan double click untuk memasukkan
    gambar, mengatur size sesuai selera. Kemudian Menggeser Label untuk
    memberi keterangan pada setiap gambar.
    9. Memilih icon Page lalu klik Edit Name dan memilih Rename. Kemudian
    memberi nama Form Login untuk page 1.
    10. Memilih tanda plus “+” di pojok kiri atas. Kemudian membuat page 2
    dengan nama Form Staff GBB & RnD.
    11. Membuat page 3 dengan nama Form Staff Produksi dan GBJ.

    4.4 Perancangan Sistem


    4.4.1 Studi Kasus
    PT.Alaisys merupakan perusahaan yang bergerak di bidang usaha
    perdagangan, perindustrian, dan jasa. Di bidang perdagangan meliputi kegiatan
    import dan perdagangan peralatan-peralatan pada bagian multimedia, listrik,
    elektronik, distributor, agen dan sebagai perwakilan dari badan-badan perusahaan.
    Di Bidang perindustrian meliputi berbagai macam industri antara lain alat ukur dan
    perakitan komputer. Sementara itu, di bidang jasa antara lain jasa instalasi dan
    perawatan pada maintenance komputer.
    Sebagai perusahaan teknologi distributor, PT.Alaisys selalu melakukan
    pengawasan dan Pencatatan terhadap barang persediaan. Pelaporan dari gudang ke
    kantor pusat dilakukan dengan cara menyalin data dari kartu ke dalam microsoft
    office excel. Laporan dalam format excel tersebut kemudian harus dikirim via email
    atau Gadget. Sistem tersebut menjadikan pihak kantor pusat tidak dapat mengetahui
    data dari gudang dengan efisien. Dari permasalahan tersebut, PT.Alaisys
    memerlukan adanya aplikasi sistem inventory gudang berbasis web. Aplikasi dapat
    digunakan dalam menginventariskan produk yang ada pada stok-stok di gudang
    yang meliputi pencatatan, pengolahan, dan pelaporan data-data pada persediaan

    Laporan Sementara Praktikum Analisis dan Perancangan Sistem Informasi 2022 IV-4
    gudang. Dengan adanya Aplikasi berbasis web, kantor pusat dapat melihat laporan
    dari gudang dengan tepat sasaran, akurat, dan efisien.
    4.4.2 Mockflow
    Tampilan dari mockflow form login pada program sistem informasi
    pembelian, penjualan, dan persediaan barang dalam gudang dapat dilihat pada
    Gambar 4.1.

    Gambar 4.1 mockflow form login pada program sistem informasi pembelian,
    penjualan, dan persediaan barang dalam gudang

    Laporan Sementara Praktikum Analisis dan Perancangan Sistem Informasi 2022 IV-5
    Tampilan dari mockflow form admin gudang pada program sistem informasi
    pembelian, penjualan, dan persediaan barang dalam gudang dapat dilihat pada
    Gambar 4.2.

    Gambar 4.2 mockflow form admin gudang pada program sistem informasi
    pembelian, penjualan, dan persediaan barang dalam gudang

    Tampilan dari mockflow form bagian pembelian pada program sistem


    informasi pembelian, penjualan, dan persediaan barang dalam gudang dapat dilihat
    pada Gambar 4.3.

    Laporan Sementara Praktikum Analisis dan Perancangan Sistem Informasi 2022 IV-6
    Gambar 4.3 mockflow form bagian pembelian pada program sistem
    informasi pembelian, penjualan, dan persediaan barang dalam gudang

    Tampilan dari mockflow form bagian penjualan pada program sistem


    informasi pembelian, penjualan, dan persediaan barang dalam gudang dapat dilihat
    pada Gambar 4.4.

    Laporan Sementara Praktikum Analisis dan Perancangan Sistem Informasi 2022 IV-7
    Gambar 4.4 mockflow form bagian penjualan pada program sistem informasi
    penjua, penjualan, dan persediaan barang dalam gudang

    Tampilan dari mockflow form direktur pada program sistem informasi


    pembelian, penjualan, dan persediaan barang dalam gudang dapat dilihat pada
    Gambar 4.5.

    Gambar 4.5 mockflow form direktur pada program sistem informasi


    pembelian, penjualan, dan persediaan barang dalam gudang
    Laporan Sementara Praktikum Analisis dan Perancangan Sistem Informasi 2022 IV-8
    DAFTAR PUSTAKA

    Fariyanto, F., Suaidah, & Ulum, F. (2021). PERANCANGAN APLIKASI


    PEMILIHAN KEPALA DESA DENGAN METODE UX DESIGN
    THINKING (STUDI KASUS: KAMPUNG KURIPAN). Jurnal Teknologi
    dan Sistem Informasi (JTSI), 2(2), 52-60.
    Hartadi, M. G., Swandi, I. W., & Mudra, I. W. (2020). WARNA DAN PRINSIP
    DESAIN USER INTERFACE (UI) DALAM APLIKASI SELULER
    “BUKALOKA". Jurnal Dimensi DKV Seni Rupa dan Desain, 5(1), 105-
    119.
    Rianingtyas, A. K., & Wardani, K. K. (2018). Perancangan User Interface Aplikasi
    Mobile Sebagai Media Promosi Digital UMKM Tour dan Travel. Jurnal
    Sains dan Seni ITS, 7(2), 118-123.

    Anda mungkin juga menyukai