LAPORAN

“ANALISA WEBSITE ARNGREN”

DISUSUN OLEH :

REZA SAPITRI (20420072)

MESSI MARLIZA (20420073)
ANGGELA FITRIANI (20420068)

DOSEN PENGAMPUH :
ALFIS ARIF M.KOM

PROGRAM STUDI TEKNIK

INFORMATIKA INSTITUT TEKNOLOGI
PAGARALAM 2022
 KATA PENGANTAR

Puji syukur penulis panjatkan kehadirat Tuhan Yang Maha Esa yang telah memberikan
limpahan rahmat,hidayah,sert inayah-Nya,sehingga penulis dapat menyusun laporan
berjudul”Laporan Hasil Analisa Website Arngren” mulai dari menganalisa website,use case
diagram sampai dengan mendesain website

Laporan Analisa Website Arngren ini disusun dalam rangka memenuhi salah satu persyaratan
dalan menyelesaikan tugas besar analisa perancangan aplikasi .Proses Penyusunan Laporan Analisa
ini tak luput dari hambatan,tantangan dan permasalahan yang dihadapi.Tetapi, berkat petunjuk dan
bimbingan Tuhan Yang MahaEsa,Kerjasama,dorongan,arahan,

Bantuan,saran dan kritik yang bersifat konstruktif dari berbagai pihak sangat membantu penulis
sehingga laporan ini dapat membantu penulis selesaikan tepat waktunya.

Penulis menyadari bahwa laporan yang penulis buat ini tidak luput dari kesalahan dan
kekurangan oleh karena itu,segala kerendahan hati,penulis sangat mengharapkan saran dan kritik
yang bersifat membangun. Penulis berharap semoga Laporan prnulis ini dapat memberikan manfaat
bagi pembaca dan bagi kita semua.
 DAFTAR ISI

HALAMAN JUDUL...................................................................................................................................................1

KATA PENGANTAR................................................................................................................................................2

DAFTAR ISI..................................................................................................................................................................3

BAB I PENDAHULUAN..........................................................................................................................................4

1.1 Latar Belakang.............................................................................................................................................5

1.2 Rumusan Masalah.......................................................................................................................................6
1.3 Batasan Masalah..........................................................................................................................................6
1.4 Tujuan..............................................................................................................................................................6
BAB II TINJAUAN PUSTAKA............................................................................................................................7
2.1 Usability...........................................................................................................................................................7
2.2 Fleksibilitas.....................................................................................................................................................7
2.3 Use Interface..................................................................................................................................................7
2.4 Use Case Diagram........................................................................................................................................8
2.5 Rancangan Antar Muka.........................................................................................................................10
BAB III KESIMPULAN DAN SARAN.........................................................................................................20
3.1 Kesimpulan................................................................................................................................................20
3.2 Saran............................................................................................................................................................20

DAFTAR PUSTAKA.............................................................................................................................................21
 BAB I

PENDAHULUAN

1.1 LATAR BELAKANG

Website arngren adalah website perusahaan Norwegia bernama Arngren yang menjual
berbagai macam barang elektronik mulai dari drone hingga ATV.Saking banyak nya jenis dan
tipe barang yang dijual,desain website-nya dibuat seperti katalog/brosur dengan thumbnail
produk yang kecil mulai dari atas sampai bawah.Pengguna mengunjungi website ini pasti akan
mengerutkan dahi ketika harus bekerja keras mencari barang yang diinginkan.
Dalam hal desain visual,aspek terpenting adalah konsistensi,keterbacaan,dan estetika
umum.Arngren entah bagaimana berhasil meleset dari sasaran pada semua ini, halaman beranda
berantakan dan kacau.Thumbnail item disatukan sedemikian rupa sehingga menyerupai
kolase(ini yang membuat pengguna harus berpikir). Teksnya tumpang tindih dan memiliki
berbagai ukuran dan warna serta latar belakan yang merupakan perpaduan antara
hijau,putih,kuning, dan ungu ditambah dengan kurangnya ruang putih. (mzhasanah, 2020)
Tampilan website arngren

Gambar 1.Tampilan Website

1.2 Rumusan masalah
Dari latar belakang yang telah diuraikan sebelumnya,ini rumusan masalah dalam laporan
analisa website arngren adalah:
Bagaimana membuat desain website arngren menjadi website yang baik?

1.3 Batasan Masalah

Berdasarkan Permasalahan pada latar belakang ,maka batasan masalah dalam website ini
yaitu:
1.Pembuatan desain website hanya dibatasi pada tampilan interface/tatap muka.

1.4 Tujuan
Berdasarkan Rumusan masalah dan batasan maslah diatas,tujuannya yaitu untuk
mendesain website Arngren menjadi website yang baik
 BAB II
TINJAUAN PUSTAKA

2.1 Usability
Usability atau ketergunaan adalah ukuran atau derajat pengalaman pengguna saat

berinteraksi dengan produk atau sebuah sistem, aplikasi, teknologi maupun peralatan yang

dioperasikan secara efektif dan efisien dalam ruang lingkup penggunanya. Usability menunjuk

pada tingkat sebuah produk yang dapat digunakan oleh pengguna tertentu untuk mencapai

tujuan spesifik dengan efektif (effectiveness), efisien (efficiency) dan memuaskan (satisfaction)

dalam sebuah konteks penggunaan. (Riadi, 2021)

1.Learnability
Tidak mudah dipelajari terlalu banyak gambar dan penempatannya yang amburadul
website tidak responsive,font terlalu kecil,layout yang berantakan dan hamper tidak ada
whiterpace karena semua terisi dengan gambar dan tulisan.
2. Efficiency
Website ini tidak efisien karena tidak tersedia short cut pada menu dan juga tidak tersedia
menu back hal ini akan membuat user untuk kembali ke halaman utama.
3. Memorability
Website ini terlalu banyak menu untuk mencari apa yang kita ingin, membuat orang tidak
mudah diingat .kita harus tampilkan menu sedikit untuk pencari lebih mudah cari dan ingat apa
yang mereka inginkan .Barang-barang yang ditampilkan tidak rapi dan tidak masuk katagori
masing-masing.
4. Error
-
5. Satisfaction
Website ini kurang menyenangkan kaena diwebsite tersebut banyak sekali kekurangan
sehngga user bingung untuk melihat dan memilih barang yang dicari.

2.2 Fleksibilitas

Usability juga mempunyai suatu hubungan dengan fleksibilitas dalam disain.Secara umum

Ketika fleksibilitas dari suatu desain meningkat, usabilitas nya berkurang.Desain fleksibilitas

dapat melakukan banyak fungsi dibandung desain khusus, tapi kurang efisien,hal ini membuat

desain lebih kompleks.Fleksibilitas membuat para pemakai tidak bisa dengan jelas

mengatisipasi system kebutuhan mereka yang akan datang.Kemudian pada akhirnya

 fleksibilitas ininakan mengakibtkan suatu pengurangan usabilitas ,sehingga perlu

dipertimbangan.

2.3 Uer Interface

Antarmuka pemakai adalah bagian system computer yang memungkinkan manusi berinteraksi

dengan computer.Desai antar muka yang baik memiliki karakteristik di berikut ini :

• Standardisasi : keseragaman sifat sifat antarmuka pemakai pada aplikasi yang berbeda

• Integrasi : keterpaduan antar paket aplikasi dan softaware tools

• Konsisten: keseragaman dalam suatu program aplikasi

• Portabilitas: dimungkinkanya data dikoversi pada berbagai hardware dan software

2.4 Use Case Diagram
use case adalah sebuah kegiatan atau interaksi yang saling berkaitan antara aktor dan

sistem. Atau secara umum, dapat diartikan sebagai sebuah teknik untuk yang dimanfaatkan

untuk pengembangan perangkat lunak (software), guna mengetahui kebutuhan fungsional dari

sistem tersebut.

Definisi dari use case diagram sendiri adalah proses penggambaran yang dilakukan untuk

menunjukkan hubungan antara pengguna dengan sistem yang dirancang. Hasil representasi dari

skema tersebut dibuat secara sederhana dan bertujuan untuk memudahkan user dalam membaca

informasi yang diberikan. Secara kasar, use case digunakan untuk mengetahui fungsi apa saja

yang ada di dalam sebuah sistem informasi dan siapa saja yang berhak menggunakan fungsi-

fungsiitu.(Arifkha,2021)

Tabel 1.Simbol Use Case Diagram

No Simbol Nama Keterangan
1 Use case Fungsionalitas yang disediakan
sistem sebagai unit-unit yang saling
bertukar pesan antara unit atau aktor,
biasanya dinyatakan dengan menggunakan
kata kerja diawal frase nama use case

2 Actor Orang, proses, atau sistem yang lain

3 Association
<<extend>>
4 Extend
5 Generalization
jj
berinteraksi dengan sistem informasi yang
akan dibuat di luar sistem informasi yang
akan dibuat itu sendiri, Jadi walaupun
simbol dari aktor adalah gambar orang, tapi
aktor belum tentu merupakan orang;
biasanya dinyatakan menggunakan kata
benda di awal frase nama actor
komunikasi antara aktor dan
Usecase yang berpartisipasi pada use case
atau use case memiliki interaksi dengan
aktor.
tambahan itu, mirip dengan prinsip
inheritance pada pemrograman berorientasi
objek, biasanya use case tambahan
memiliki nama depan yang sama dengan
use case yang ditambahkan.
Hubungan generalisai dan spesialisasi
(umum-khusus) antara dua buah usecase
6 Include
<<include>>
Relasi use case tambahan ke sebuah use
case dimana use case yang ditambahkan
memerlukan use case ini untuk
menjalankan fungsinya atau sebagai syarat
dijalankan use case ini.

Gambar 2.use case diagram website

2.5 Rancangan Antar Muka
1. Axure Rp
Axure RP atau Axure adalah solusi terbaik untuk Anda sang desainer UI/UX pemula

yang ingin bekerja secara cepat, praktis, dan tanpa ngoding. Axure adalah software pembuat dan

editing prototype software interaktif termudah sebab bisa dijalankan dengan drag and drop saja.

Pun Axure adalah software yang banyak digunakan oleh desainer UI/UX di kalangan

industri kreatif. Ini dikarenakan Axure bisa digunakan untuk membuat aneka mockup, flow

diagrams, dokumentasi web dan app, serta wireframe interaktif untuk keperluan uji testing

software sekaligus memperoleh feedback user.

Kecanggihan lainnya yang menjadikan Axure favorit di kalangan desainer adalah

kemampuan untuk menambahkan fitur berdaya guna di dalam desan. Alhasil, Anda bisa

membuat aneka tombol atau menu slide di dalam desain Axure dan sungguh-sungguh dapat

menjalankannya seolah-olah sedang menggunakan aplikasi sungguhan. Canggih!

Axure adalah aplikasi yang bisa Anda jalankan pada PC berbasis Windows ataupun Mac,

sementara hasilnya dapat di-export menjadi file HTML untuk dijalankan pada browser. Akan

tetapi, Axure mempunyai spesifikasi yang berbeda-beda untuk PC Windows dan Mac. (appkey,

2020)
Gambar 3.Aplikasi Axuare rp
2.Rancangan Halaman Login
Halaman ini merupakan halaman untuk admin dan user,sebelum masuk ke sisstem
teutama admin memasukkan Email dan Password. Adapun tampilan hlaman login seperti
dibawah ini.

Gambar 4.Tampilan login admin Website

3.Rancangan Halaman Dashboard Admin
Halaman ini merupakan halaman untuk menu admin setelah masuk ke sistem untuk
mengolah semua data-data yang ada disistem.adapun tampilan halaman menu admin seperti
dibawah ini.

Gambar 5.Tampilan Dasboard admin Website

4 Rancangan Halaman Data Barang
Halaman ini merupakan halaman untuk admin melihat data barang dan mengelola data
barang.serta terdapat tombol tambah,edit dan hapus.Adapu tampilan Halaman Data
Mahasiswa seperti di bawah ini.

Gambar 6.Tampilan Data Barang

5.Rancangan Halaman Tambah Data Barang

Halaman ini merupakan halaman untuk admin menambah data barang yang terdiri
dari penginputan id barang,nama barang,jumlah barang,harga barang.adapun tampilan
halaman tambah seperti dibawah ini.

Gambar 7.Tampilan Tambah Data Barang

6.Rancangan Halaman Edit Data Barang
Halaman ini merupakan halaman untuk admin mengedit data barang yang terdiri dari
id barang,nama barang,jumlah barang,harga barang.adapun tampilan halaman edit seperti
dibawah ini.

Gambar 8.Tampilan Edit Data

Barang 7 Rancangan Halaman Data Pembelian
Halaman ini merupakan halaman admin melihat data pembelian serta terdapat tombol
tambah,edit dan hapus.adapun tampilan halaman Data Pembelian seperti dibawah ini.

Gambar 9.Tampilan Halaman Data Pembelian

8. Rancangan Halaman Edit Data Pembelian
Halaman ini merupakan halaman untuk admin mengedit data pembelian yang terdiri
dari id barang,nama barang,jumlah barang,harga barang.adapun tampilan halaman edit
seperti dibawah ini

Gambar 10.Tampilan Halaman Edit Data Pembelian

9. Rancangan Halaman Laporan Data Penjualan

Halaman ini merupakan halaman untuk admin melihatlaporan penjualan yang terdiri
dari id barang,nama pembeli,nama barang ,jumlah barang,harga barang.adapun tampilan
halaman edit seperti dibawah ini.

Gambar 11.Tampilan Halaman Laporan Pembelian

 10.Rancangan Halaman Cetak Laporan Penjualan
Halaman ini merupakan halaman untuk admin mencetak laporan penjualan yang
terdiri dari id barang,nama pembeli,nama barang ,jumlah barang dan harga barang.

Gambar 12.Tampilan Halaman Cetak Laporan Pembelian

12.Rancangan Halaman Kelola Data User

Halaman ini merupakan halaman untuk admin mengelolah data user yang
mendaftar.adapun gambar dibawah ini.

Gambar 13.Tampilan Halaman Kelola Data User

12.Rancangan Halaman Daftar User Untuk Login
Halaman ini merupakan halaman untuk user mendaftar untuk login ke website
dengan memasukan nama,email dan password yang langsung di kelola oleh admin.

Gambar 14.Tampilan Halaman Daftar User Untuk login

13. Rancangan Halaman LoginUser
Halaman ini merupakan halaman untuk user,sebelum masuk ke sistem terutama
user memasukkan emaildan password.Adapun tampilan halaman login seperti dibawah
ini.

Gambar 15.Tampilan Halaman User Untuk login

14.Rancangan Halaman Dashboard User
Halaman ini merupakan halaman untuk menu user setelah masuk ke sistem untuk
mengolah semua data-data yang ada disistem.Adapun tampilan halaman menu user
seperti dibawah ini

Gambar 16.Tampilan Halaman Dasboard

User 15.Rancangan Halaman Data Barang
Halaman ini merupakan halaman untuk usermelihat data barang .Adapun
tampilan Data barang seperti dibawah ini

Gambar 17.Tampilan Data Barang

 15.Rancangan Halaman Pembelian Barang
Halaman ini merupakan halaman untuk usermembeli barang yang kemudian
dikelolah oleh admin .Adapun tampilan Data barang seperti dibawah ini

Gambar 18.Tampilan Halaman Pembelian

Barang 17.Rancangan Halaman History Pembelian User
Halaman ini merupakan halaman untuk user melihat data pembelian nya,yang
kemudian dikelolah oleh admin .Adapun tampilan Data barang seperti dibawah ini

Gambar 19.Tampilan Halaman History Pembelian Barang

18.Rancangan Halaman Untuk Logout User
Halaman ini merupakan halaman untuk user logout dari website,Adapun tampilan
dibawah ini

Gambar 20.Tampilan Halaman User logout

 BAB III
KESIMPULAN DAN SARAN
3.1 Kesimpulan
Kesimpulan yang dapat diambil dari analisa yang telah dilakukan adalah sebagai
berikut:
Website yang bagus umumnya memiliki komponen sebagai berikut:
1.PetaSte (site-map)yang jelas
2.Navigator bar yang konsisten dan tidak menyestkan
3.Memiliki tampilan Profile,sehingga situs dapat berkembang
4.memiliki ruang komen sehingga dapat melakkukan pembalikan aksi dan memiliki
umpan balik yang informative.
5.Informasi yang disajikan menarik berbobot sertater-up date
6.konsisten
8.Memudahkan pengunjug misalnya dengan menyediakan search-engine dan adanya
link yang relevan
Kriteri apenilaian bagustidaknya website yang paling utama adalaha tidak nya
kenyamanan yang dirasakan oleh pengunjung

3.2 Saran
Aplikasi ini dapat dikembangkan lagi,sehingga menjadi aplikasi pelayanan yang
lebih sempurna dan optimal lagi.berikut beberapa saran yang bisa dikembangkan pada
analisa website arngren.
sebuah website seharusnya dibangun dengan interface(antarmuka)semenarik mungkin
agar dikunjungi oleh banyak pengunjung dan orang yang mengunjungi juga beta.tapi
ada beberapa website tidak terlalu memperhatikan interface tersebut ,karena mungkin
lebih mementingkan content dari pada interface-nya website ini
 DAFTAR PUSTAKA
appkey. (2020, Desember 17). Retrieved from appkey.id:
https://appkey.id/desain/design-ui/axure-adalah/
Arifkha. (2021 , Desember 23). Retrieved from swissjava.com: https://swissjava.com/use-
case-adalah/
FAUZAN, R. (n.d.). Retrieved from rymetutorial.asia:
http://www.rymetutorial.asia/2015/01/axure-software-mockup-websites-dan.html
mzhasanah. (2020, Oktober 11). Retrieved from blogspot.com:
https://mzhasanah.blogspot.com/2020/10/website-yang-menyebalkan-desain.html
Riadi, M. ( 2021, Januari 13). Retrieved from KAJIANPUSTAKA.COM:
https://www.kajianpustaka.com/2021/01/usability-pengertian-dimensi-prinsip.html