MAKALAH HCI

cats: Uncategorizeddate: June 3rd, 2017Author: malda29

DAFTAR ISI

 

  1. PENDAHULUAN
    • Latar Belakang………………………………………………………………………2
    • Tujuan……………………………………………………………………………………3
    • Manfaat…………………………………………………………………………………3

 

  1. PEMBAHASAN
    • Konsep User Interface………………………………………………………………………4
      • Pengertian User Interface………………………………………………………4
      • Teknik antar muka / Interface…………………………………………………4
      • Jenis-jenis User Interface……………………………………………………….5
      • Bahasa dalam User Interface……………………………………………………6
    • Unicloth User Interface………………………………………………………………7
      • Loading Page……………………………………………………………………7
      • Sign Up…………………………………………………………………….8
      • Login……………………………………………………………………….9
      • Forgot Password…………………………………………………………9
      • Homepage……………………………………………………………………….11
        • Tote Bage………………………………………………………………11
        • T-shirt…………………………………………………………………12
        • Shoes…………………………………………………………………….14
        • Sale………………………………………………………………………15
        • My Profile………………………………………………………………16
        • My Cart…………………………………………………………………16
        • Information……………………………………………………………18
        • Payment………………………………………………………………18

 

  1. PENUTUP
    • Kesimpulan……………………………………………………………………………20
    • Saran………………………………………………………………………………….20

 

BAB I

PENDAHULUAN

1.1   Latar Belakang

Perkembangan internet menyebabkan terbentuknya dunia baru yang disebut  dunia maya. Di  dunia maya,setiap individu memiliki hak dan kemampuan untuk   berinteraksi dengan individu lain tanpa batasan apapun. Globalisasi yang sempurna sebenarnya telah berjalan di dunia maya yang menghubungkan seluruh komunitas digital. Dari seluruh aspek kehidupan manusia yang terkena dampak kehadiran internet, sektor bisnis merupakan sektor  yang  paling  terkena  dampak  dari  perkembangan  teknologi  informasi  dan telekomunikasi serta paling cepat tumbuh.  Mobilitas manusia yang tinggi menuntut dunia perdagangan mampu menyediakan layanan jasa dan barang dengan cepat sesuai permintaan konsumen. Untuk mengatasi masalah tersebut, kini muncul transaksi yang menggunakan media internet untuk menghubungkan produsen dan konsumen. Transaksi bisnis melalui internet lebih dikenal dengan nama e-commerce. Melalui e-commerce, seluruh manusia di muka bumi memiliki kesempatan dan peluang yang sama untuk bersaing dan berhasil berbisnis di dunia maya.

Mengetahui hal ini, banyak para technopreneur berlomba-lomba membuat aplikasi-aplikasi maupun website e-commerce yang inovatif. Selain pengembangan fungsi, tampilan sebuah website juga menjadi aspek yang sangat penting. Cara sebuah website menyajikan apa yang ingin disampaikan kepada user sangat berpengaruh terhadap jumlah user yang akan mengakses website tersebut. Penyajian ini terdiri dari UI dan UX. UI atau User Interface yang baik menampilkan interface yang memiliki keseragaman yang baik dari segi warna, font, gambar, dan lain-lain agar website mudah digunakan oleh target penggunanya. UX atau User Experience memiliki ranah yang lebih luas dari UI. UI yang dibuat sedemikian rupa, adalah hasil akhir dari User Experience. Ranah UX ini dimulai dengan riset market-user atau pengalaman user yang kemudian diimplementasikan kedalam sebuah interface.

Setelah belajar dari pengalaman user terhadap sebuah interface dan mempelajari bagaimana UI yang diinginkan banyak user, melalui makalah ini kami ingin memperkenalkan sebuah website e-commerce bernama Unicloth yang dapat memenuhi kebutuhan belanja pakaian Anda sehari-hari.

 

 

 

 

  • Tujuan
  1. Menjelaskan tentang UNICLOTH.
  2. Menjelaskan tujuan dibuatnya UNICLOTH.
  3. Menjelaskan User Interface dari UNICLOTH.
  4. Menjelaskan User Experience dari UNICLOTH.

 

  • Manfaat
  1. Mengetahui tentang UNICLOTH.
  2. Mengetahui tujuan dibuatnya UNICLOTH.
  3. Mengetahui User Interface dari UNICLOTH.
  4. Mengetahui User Experience dari UNICLOTH.

 

BAB II

PEMBAHASAN

 

            2.1 Konsep User Interface

                        2.1.1 Pengertian User Interface

User interface adalah cara program dan user berkomunikasi. Istilah user interface atau interface kadang-kadang digunakan sebagai penggati istilah HCI (Human Computer Interaction). HCI (Human Computer Interaction) adalah semua aspek dari interaksi pengguna dan computer, tidak hanya hardware. Semuanya yang terlhat dilayar, membaca dalam dokumentasi dan dimanipulasi dengan keyboard (atau mouse) merupaka bagian dari user interface.

User Interface berfungsi untuk menghubungkan atau penterjemah informasi antara pengguna dengan sistem operasi, sehingga komputer dapat digunakan. Dengan demikian, user interface bisa juga diartikan sebagai mekanisme inter-relasi atau integrasi total dari perangkat keras dan lunak yang membentuk pengalaman berkomputer. User interface dari sisi software bias berbentuk Graphical User Interface (GUI) atau Command Line Interfae (CLI), sedangkan dari sisi hardware bias berbentuk Aplle Desktop Bus (ADB), USB, dan fire wire.

Mengkonsep user interface secara benar tidaklah mudah. Terdapat begitu banyak aspek yang pelu diperhatikan. User interface akan mengacu pada beragam aplikasi teknologi mulai dari electronic display, software aplikasi komputer, aplikasi web, aplikasi mobile, hingga aplikasi kiosk Informasi public. Kioks adalah peralatan sistem informasi publik yang dirancang sedemikian rupa yang ditujukan untuk beragam kondisi user, baik secara usia, gender, latar belakang kultural, tingkat pemahaman dan pendidikan bahkan kondisi keterbatasan fisik yang berbeda.

 

2.1.2 Teknik Antar Muka / Interface

Terdapat tiga teknik antar muka / interface:

  1. Linguistic styles

Linguistic styles adalah penyampaian “aksi” melalui bahasa yang dimengerti oleh komputer. Ciri teknik ini antara lain:

  • Masukan aksi melalui papan ketik alphabet yang ditulis atau diketik.
  • Bahasa yang dimengerti oleh computer merupakan bagian kecil dari bahasa manusia
  • Adanya aturan penulisan (syntax) dan semantic untuk menyatakan perintah
  1. Key Modals Style

Key Modals Style adalah penyampaian aksi melalui penekanan tombol-tombol yang deprogram sebelumnya untuk menjalankan fungsi-fungsi. Ciri teknik ini antara lain:

  • Masukan aksi melalui tombol fungsi atau tombol alphabet
  • Instruksi langkah demi langkah
  • Digunakan dalam system berjalan
  1. Direct Manipulation Style

Direct Manipulation Style adalah penyampaian perintah melalui manipulas objek tertentu. Ciri teknik ini antara lain:

  • Ditampilkannya objek untuk interaksi pengguna
  • Ditampilkannya penunjuk untuk memanipulasi objek
  • Perintah diterapkan langsung pada objek
  • Respon seketika pada fungsi objek

 

2.1.3 Jenis-jenis User Interface

Ada dua jenis user interface, yaitu:

  1. Command Line Inteface (CLI) :

CLI (Command Line Interface) adalah tipe antarmuka dimana pengguna berinteraksi dengan sistem operasi melalui text terminal. CLI adalah sebuah bentuk antarmuka antara sistem operasi dan pemakai dimana pemakai mengetikkan perintah-perintah dengan menggunakan perintah dalam bentuk teks dan sebuah metode untuk memasukinya.

Pengguna CLI biasanya adalah administrator sistem berbasis sistem operasi LINUX. Setiap sistem operasi memberi nama CLI- nya berbeda-beda. Unix member nama CLI-nya sebagai bash, ash, ksh, dan lain sebagainya. Ms-Dos memberi nama CLI-nya command.com atau command prompt. Sedangkan Windows Vista, Microsoft menamakannya Powershell. Pengguna Linux mengenal CLI pada Linux sebagai Terminal, sedangkan pada Apple atau machintosh namanya adalah commandshell.

 

 

  1. Graphical User Interface (GUI)

Saat ini interface yang banyak digunakan dalam software adalah GUI (Graphical User Interface). Penganut GUI biasanya adalah mereka yang sudah terbiasa dengan system operasi Wndows. Bagi mereka, GUI adalah harga mati yang tidak bisa ditawar lagi.

GUI adalah tipe antarmuka yang digunakan oleh pengguna untuk berinteraksi dengan system operasi melalui gambar-gambar grafik, kon, dan menggunakan perangkat penunjuk (pointing device) seperti mouse atau track ball.

Sama seperti CL, tiap-tiap siste operasi memiliki nama tersendiri untuk komponen GUI-nya. Pada Apple Mac OS X, GUI-nya disebut Aqua. Microsoft member nama GUI pada Windows XP sebagai Lunar dan GUI Windows Vista sebagai Aero. Pada Linux, ada dua pengembangan utama desktop environment, yang masing-masing menghasilkan roduk KDE (K Desktop Environment) dan GNOME.

 

2.1.4 Bahasa dalam User Interface

Tujuan sebuah user interface adalah mengkomunikasikan fitur-fitur sistem yang tersedia agar user mengerti dan dapat menggunakan sistem tersebut. Dalam hal ini penggunaan bahasa amat efektif untuk membantu pengertian, karena bahasa merupakan alat tertua yang dipakai orang untuk berkomunikasi sehari-harinya. Praktis semua pengguna komputer dan Interface dapat mengerti tulisan.

Meski pada umumnya panduan user interface menyarankan agar ikon tidak diberi tulisan supaya tetap mandiri dari bahasa, namun elemen user interface lain seperti teks pada tombol, caption window, atau teks-teks singkat di sebelah kotak input dan tombol pilihan semua menggunakan bahasa. Tanpa bahasa pun kadang ikon bisa tidak jelas maknanya, sebab tidak semua lambang ikon bisa bersifat universal.

Meskipun penting, namun sayangnya kadang penggunaan bahasa, seperti pemilihan istilah, sering sekali dianggap kurang begitu penting. Terlebih dari itu dalam dunia desain situs Web yang serba grafis, bahasa sering menjadi sesuatu yang nomor dua ketimbang elemen-elemen interface lainnya. Artikel ini akan mencoba memberikan beberapa pertimbangan pemilihan bahasa dan istilah untuk meningkatkan usability melalui perbaikan komunikasi dengan user.

 

  • UNICLOTH User Interface

 

UNICLOTH merupakan sebuah toko online yang menyediakan kebutuhan busana harian dengan harga yang terjangkau. Unicloth menyediakan baju, sepatu dan tote bag yang berbasis pada kanvas dimana sudah terjamin kualitasnya. Kami memberikan produk-produk yang menyesuaikan dengan tren terbaru. Kami memberikan layanan secara nasional di Indonesia untuk kenyamanan customer dan untuk meningkatkan layanan serta memudahkan customer Unicloth maka kami merancang User Interface yang berbasis pada Mobile User Interface.

  • Loading Page

Halaman yang pertama kali akan muncul apabila customer mengklik mobile apps dari Unicloth adalah logo dari Unicloth, yakni sebagai berikut:

 

  • Tampilan Awal – Logo Unicloth

 

Lalu, setelah beberapa saat, akan muncul tampilan homepage yang berisi pilihan untuk “Sign Up” atau “Login”. Sign Up dipergunakan untuk user yang belum memiliki akun/ belum menjadi member di Unicloth.

 

1.1 Tampilan Homepage awal

 

2.2.2 Sign Up

Bila tombol “Sign up” diklik, maka akan muncul tampilan sebagai berikut.

  • Tampilan Register

Akan muncul tampilan registrasi seperti pada gambar 1.2, dimana user diminta untuk mengisi nama, email, gender, password, number phone, serta address. Setelah user mengisi seluruh data diri. Maka user dapat melanjutkan registrasi dengan mengklik tombol “Register”. Apabila user sudah pernah mendaftarkan diri menjadi member, maka user dapat langsung mengklik tombol “Member Login”.

2.2.3 Login

Bila user mengklik tombol “Login”, maka tampilan yang akan muncul adalah sebagai berikut.

1.3 Tampilan Login

User akan diminta menginput email dan password yang sudah pernah didaftarkan sebelumnya seperti pada gambar 1.3. Lalu user dapat melanjutkan ke halaman berikutnya dengan mengklik tombol “Login”.

2.2.4 Forgot Password

Kami juga menyediakan layanan “Forgot Password” untuk user yang lupa akan password yang pernah didaftarkan. Tampilan yang akan muncul adalah sebagai berikut.

  • Tampilan Forgot Password

User harus mengisi email yang sudah pernah didaftarkan untuk menjadi member Unicloth. Lalu klik tombol “Reset Password”, password akan dikirimkan ke email user. Tampilan selanjutnya adalah page konfirmasi bahwa kami telah mengirimkan sebuah link untuk me-reset password user, didalam page tersebut user dapat langsung mengklik tombol “Login” kembali dan memasukan email beserta password baru yang telah di-reset.

1.5 Tampilan konfirmasi pengiriman email

 

2.2.5 Homepage

Tampilan yang muncul setelah user melakukan registrasi/login adalah tampilan homepage. Homepage terdiri dari beberapa pilihan yakni my profile, cart, payment, information, tote bag, shoes, t-shirt, dan sale.

 

1.6 Tampilan Homepage

             2.2.5.1 Tote Bag

User dapat mengklik kotak yang bertuliskan “Tote bag”. Setelah diklik, maka akan muncul tampilan sebagai berikut.

 

1.7 Tampilan Tote Bag 1

 

1.8 Tampilan Tote Bag 2

Terdapat berbagai macam pilihan warna, serta design untuk tote bag. User dapat memilih sesuai dengan keinginan, dan apabila user ingin membuat tote bag  dengan gambar custom, user harus memilih tote bag polos dan nantinya user akan diminta untuk mengupload gambar tersebut. User dapat mengklik tombol panah yang ada di bagian bawah apabila ingin melihat ke bagian selanjutnya seperti pada gambar 1.7. Apabila user mengklik gambar produk, maka akan muncul tampilan seperti pada gambar 1.8, dimana akan muncul gambar dari produk yang diklik, harga produk, size dari produk, serta user diminta untuk mengiisi quantity yang diinginkan. Setelah itu, user dapat mengklik tombol “Add To Cart” jika ingin menambahkan produk tersebut ke keranjang belanjaan mereka.

 

             2.2.5.2 T-shirt

User dapat mengklik kotak yang bertuliskan “T-shirt”. Setelah diklik, maka akan muncul tampilan sebagai berikut.

 

1.9 Tampilan T-Shirt 1

 

2.0 Tampilan T-Shirt 2

Terdapat berbagai macam pilihan warna, serta design untuk T-shirt. User dapat memilih sesuai dengan keinginan, dan apabila user ingin membuat T-shirt dengan gambar custom, user harus memilih T-shirt polos dan nantinya user akan diminta untuk mengupload gambar tersebut. User dapat mengklik tombol panah yang ada di bagian bawah apabila ingin melihat ke bagian selanjutnya seperti pada gambar 1.9. Apabila user mengklik gambar produk, maka akan muncul tampilan seperti pada gambar 2.0, dimana akan muncul gambar dari produk yang diklik, harga produk, size dari produk, serta user diminta untuk mengiisi quantity yang diinginkan. Setelah itu, user dapat mengklik tombol “Add To Cart” jika ingin menambahkan produk tersebut ke keranjang belanjaan mereka.

2.2.5.3 Shoes

User dapat mengklik kotak yang bertuliskan “Shoes”. Setelah diklik, maka akan muncul tampilan sebagai berikut.

 

2.1 Tampilan Shoes 1

 

2.2 Tampilan Shoes 2

Terdapat berbagai macam pilihan warna, serta design untuk shoes. User dapat memilih sesuai dengan keinginan, dan apabila user ingin membuat shoes dengan gambar custom, user harus memilih tote bag polos dan nantinya user akan diminta untuk mengupload gambar tersebut. User dapat mengklik tombol panah yang ada di bagian bawah apabila ingin melihat ke bagian selanjutnya seperti pada gambar 2.1 Apabila user mengklik gambar produk, maka akan muncul tampilan seperti pada gambar 2.2, dimana akan muncul gambar dari produk yang diklik,harga produk, size dari produk, serta user diminta untuk mengiisi quantity yang diinginkan. Setelah itu, user dapat mengklik tombol “Add To Cart” jika ingin menambahkan produk tersebut ke keranjang belanjaan mereka.

2.2.5.4 Sale

Unicloth juga menyediakan halaman khusus yang berisi produk dengan harga yang harganya telah didiskon. Setelah user mengklik tombol sale pada homepage, maka akan muncul tampilan sebagai berikut.

 

2.3 Tampilan Sale 1                  2.4 Tampilan Sale 2

Produk yang terdapat didalam sale, merupakan produk yang telah didiskon oleh Unicloth, user bisa memilih produk mana yang ingin untuk dibeli. Setelah user memilih produk, maka akan muncul gambar dari produk yang diklik, harga asli produk, harga produk setelah didiskon, size dari produk, serta user diminta untuk mengiisi quantity yang diinginkan. Setelah itu, user dapat mengklik tombol “Add To Cart” jika ingin menambahkan produk tersebut ke keranjang belanjaan mereka.

 

2.2.5.5 My Profile

My profile berisikan tentang data diri user yang telah didaftarkan pada saat registrasi. User dapat pula melihat informasi data diri mereka seperti name, email, gender, password, number phone, dan address. Apabila ada perubahan, maka user dapat mengklik tombol “Edit Profile”. User juga dapat mengganti foto profile mereka. Setelah user selesai mengganti data, maka mereka harus mengklik tombol “Save” agar data yang diganti tersimpan. Tampilan yang akan muncul adalah sebagai berikut.

 

2.3 Tampilan My Profile           2.4 Tampilan Edit Profile

 

             2.2.5.6 My Cart

Bagian homepage juga memuat My cart, cart merupakan keranjang belanja user. Produk-produk yang telah dipilih untuk dibeli akan masuk kedalam cart. Apabila kita sudah selesai memilih kita dapat melihat produk apa saja yang telah dipilih, quantity dari produk yang dibeli, serta harga total. Unicloth juga menyediakan layanan custom picture. User dapat mengklik tombol “Upload” dan memilih foto mana yang diinginkan. User juga dapat me-remove produk apabila tiba-tiba user tidak jadi membeli produk tersebut. User juga dapat langsung mengosongkan cart mereka, apabila mereka membatalkan semua yang telah dimasukkan kedalam cart. Terdapat pula tombol “Add Item” apabila user ingin menambahkan produk yang ingin dibeli kedalam cart mereka.

 

  • Tampilan My Cart (Produk) 7 Tampilan My Cart (Kosong)

 

2.8 Tampilan My Cart Final   2.9 Tampilan konfirmasi order

 

Setelah user mengklik tombol “Next” pada gambar 2.6, maka halaman selanjutnya adalah akan muncul tampilan seperti pada gambar 2.8, dimana user dapat melihat kembali produk yang dipesan, dan memeriksa alamat pengiriman serta terdapat sub total yang merupakan total dari produk yang dibeli, akan dikenakan biaya shipping sesuai dengan wilayah pengantaran. Apabila user membeli produk custom maka akan dikenakan biaya custom pada produk tersebut. Setelah user memastikan bahwa semua data tersebut benar, maka user mengklik tombol “Checkout”. Tampilan yang akan muncul adalah tampilan ucapan terima kasih dari Unicloth kepada user karena telah berbelanja di Unicloth, dan juga menginformasikan user agar memeriksa kode order user yang akan dikirimkan oleh Unicloth ke email user.

 

             2.2.5.7 Information

Bagian information berisi mengenai informasi ukuran dari baju serta sepatu yang Unicloth jual, dan memuat informasi tentang hal-hal yang harus diperhatikan seperti resolusi gambar untuk custom, ukuran gambar, lama pengerjaan, serta informasi nomor rekening apabila ingin melakukan pembayaran. Tampilan yang muncul adalah sebagai berikut.

  • Tampilan Information

 

             2.2.5.8 Payment

Homepage juga memuat tombol “Payment” dimana user harus melakukan konfirmasi pembayaran, apabila telah melakukan pembayaran melalui nomor rekening yang telah diinformasikan. Dalam bagian payment seperti pada gambar 3.1, user diminta untuk menginput code order yaitu kode yang telah dikirimkan sebelumnya kepada user setelah melakukan checkout dari cart, nama dari orang yang melakukan pemesanan, transfer amount yaitu jumlah uang yang ditransfer. Lalu user juga diminta untuk mengupload bukti transfer. Setelah itu, user dapat mengklik tombol “Confirm”. Tampilan selanjutnya adalah tampilan konfirmasi pembayaran, dan Unicloth akan mengirimkan konfirmasi pembayaran dimana user harus memeriksa email mereka.

 

3.1 Tampilan Payment 1        3.2 Tampilan Konfirmasi Payment

 

 

 

 

 

 

BAB III

PENUTUP

 

3.1    Kesimpulan

Berdasarkan uraian di atas, dapat disimpulkan bahwa selain berfokus pada fungsi, Unicloth juga memiliki desain aplikasi yang up-to-date terhadap gaya remaja masa kini disertai dengan kemudahan-kemudahan penggunaan fiturnya dalam bertransaksi. Dengan menggunakan Unicloth sebagai aplikasi belanja online, user dapat dipastikan merasakan kenyamanan dan kesan yang berbeda karena keunikannya dari sisi design.

  • Saran

Dari makalah ini kami menyadari bahwa masih ada kekurangan –kekurangan yang mungkin kurang berkenan bagi para pembaca, oleh karena itu kami menerima segala saran dan kritik yang membangun, demi perbaikan dimasa mendatang.

 

 

DAFTAR PUSTAKA

 

 

 

http://spao.elandmall.com/shop/initPlanShop.action?disp_ctg_no=1703313817

http://senalastiansah.blogspot.co.id/2012/10/pengertian-user-interface-user.html?m=1

 

Leave a Reply