DESAIN USER INTERFACE DAN USER EXPERIENCE APLIKASI REKOMENDASI FASHION

Transkripsi

1 TUGAS AKHIR DESAIN USER INTERFACE DAN USER EXPERIENCE APLIKASI REKOMENDASI FASHION (PROTOTYPE APLIKASI STYYLI DI IPHONE) Oleh: Tubagus Salamudin Alamin NIM Program Studi Desain Produk dan Multimedia Dosen Pembimbing: Heriyanto Atmojo, S.Sn, M.Sn FAKULTAS DESAIN DAN SENI KREATIF UNIVERSITAS MERCU BUANA JAKARTA 2015

2 ii

3 iii

4 iv

5 DAFTAR ISI COVER DALAM... HALAMAN PERNYATAAN... i HALAMAN PENGESAHAN... ii A B S T R A K... iii A B S T R A C T... iv KATA PENGANTAR... iv DAFTAR ISI... vi DAFTAR GAMBAR... ix 1.1 Latar Belakang Pemilihan Studi Orisinalitas (State Of The Art) Tujuan perancangan Manfaat Tujuan Peluang dan Tantangan Studi Peluang Studi Tantangan Studi Relevansi dan konsekuensi studi Relevansi dan konsekuensi studi Kerangka Berfikir Studi Tataran lingkungan Tataran Sistem Tataran Produk Tataran Elemen... 6 A. Perencanaan... 6 B. Analisis... 6 C. Perancangan ). Warna ). Huruf... 7 v

6 3). Visual Proses perancangan Konsep Requirement Struktur Wireframe Viseual Design Data Kuantitatif Data Fakta Pengguna Smartphone Peluang bisnis online berdasarkan internet user Data Kualitatif Tabel Perancangan Ide Desain Inovasi Desain Teori user interface dan user experience User Compability Product Compability Task Compability Work flow Compability Consistency Familiarity Simplicity Direct Manipulation Control WYSIMG Flexibility Responsiveness Invisible Technology Robustness Protection Ease of learning and Ease to use Clarity is job Interface exit to enable interaction vi

7 Conserve attention at all costs User Interface Lima lapisan dalam user experience Strategy Scope Stucture Skeleton Surface Perancangan Wireframe Basic Color (warna utama) Secondary Color (Warna pelengkap dari warna utama) Typography Icons Pembuatan mockup di photoshop Prototyping Ulasan karya perancangan Kesimpulan Saran Data Nara Sumber Lampiran DAFTAR PUSTAKA vii

8 DAFTAR GAMBAR Gambar. 2. Kerangka berfikir Dokumen Pribadi... 5 Gambar Wireframe Dokumen Pribadi... 9 Gambar. 3. Smartphone user Dokumen 11 Gambar Smartphone platform Sumber: 11 Gambar Presentase Sumber 11 Gambar Operating System Sumber 11 Gambar 3.4. Smartphone Demographic sumber: 12 Gambar 3.5. Smartphone owner by age Sumber: 12 Gambar 3.6. Smartphone penetration by age Sumber: 12 Gambar 3.7. Smartphone data owner consumption Sumber: 12 Gambar 3.8. Popular Data Usage Activities Sumber: 12 Gambar 3.9. Top 10 Countries Smartphone Penetration Sumber: 12 Gambar Indonesia internet user Sumber: bisnisrumahpemula.com Gambar Pengguna Online Shop viii

9 Sumber: bisnisrumahpemula.com Gambar 4. Lima lapisan user experience Sumber: 22 Gambar 4.1. Sketsa Wireframe Sumber: Dokumen Pribadi Gambar 4.2. Look end feel Sumber: Dokumen Pribadi Gambar 4.3. Warna merah Sumber: Dokumen Pribadi Gambar 4.4. Warna biru toska Sumber: Dokumen Pribadi Gambar 4.5. Warna Hitam Sumber: Dokumen Pribadi Gambar 4.6. Warna abu abu gelap Sumber: Dokumen Pribadi Gambar 4.7. Warna briru Sumber: Dokumen Pribadi Gambar 4.8. Typography Sumber: Dokumen Pribadi Gambar 4.9. Icon Aplikasi Sumber: Dokumen Pribadi Gambar Icon Camera Sumber: Dokumen Pribadi Gambar Icon Home Sumber: Dokumen Pribadi Gambar Icon Shop Sumber: Dokumen Pribadi Gambar Icon Timeline Sumber: Dokumen Pribadi Gambar Icon Tag Sumber: Dokumen Pribadi Gambar Icon Sttings Sumber: Dokumen Pribadi ix

10 Gambar Icon Search Sumber: Dokumen Pribadi Gambar Icon Like Sumber: Dokumen Pribadi Gambar Icon Komentar Sumber: Dokumen Pribadi Gambar Desain User Interface di Adobe Photoshop Sumber: Dokumen Pribadi Gambar Prototyping Flinto Sumber: Dokumen Pribadi Gambar 5.1. Splashcreen Sumber: Dokumen Pribadi Gambar 5.2. Opening fashion history Sumber: Dokumen Pribadi Gambar 5.3. Halaman Depan Sumber: Dokumen Pribadi Gambar 5.4. Masuk Aplikasi Sumber: Dokumen Pribadi Gambar 5.5. Daftar Sumber: Dokumen Pribadi Gambar 5.6. Lupa Password Sumber: Dokumen Pribadi Gambar 5.7. Halaman Utama Sumber: Dokumen Pribadi Gambar 5.8. Timeline Sumber: Dokumen Pribadi Gambar 5.9. Timeline Swipe Sumber: Dokumen Pribadi Gambar Komentar Sumber: Dokumen Pribadi Gambar Suka Sumber: Dokumen Pribadi Gambar Menu Utama x

11 Sumber: Dokumen Pribadi Gambar Berita Sumber: Dokumen Pribadi Gambar Peringatan Sumber: Dokumen Pribadi Gambar Profile end User Sumber: Dokumen Pribadi Gambar Profile Pengguna Sumber: Dokumen Pribadi Gambar Belanja Sumber: Dokumen Pribadi Gambar Kategori belanja wanita Sumber: Dokumen Pribadi Gambar Kategori Belanja Pria Sumber: Dokumen Pribadi Gambar Kategori belanja Pria bagian bawah Sumber: Dokumen Pribadi Gambar Item Detail Sumber: Dokumen Pribadi Gambar Redirect ke website Sumber: Dokumen Pribadi Gambar Filter Sumber: Dokumen Pribadi Gambar Diskon potongan harga Sumber: Dokumen Pribadi Gambar Kamera Sumber: Dokumen Pribadi Gambar Filter Photo Sumber: Dokumen Pribadi Gambar Menambahkan Tag Sumber: Dokumen Pribadi Gambar Daftar list kategori Sumber: Dokumen Pribadi xi

12 Gambar List Brand Sumber: Dokumen Pribadi Gambar Kolom list brand Sumber: Dokumen Pribadi Gambar Review Deskripsi Produk Sumber: Dokumen Pribadi Gambar Pengaturan Sumber: Dokumen Pribadi Gambar Merubah Profile Sumber: Dokumen Pribadi Gambar Diagram Proses Kerja Sumber: Dokumen Pribadi KATA PENGANTAR xii

13 Dengan mengucap puji dan syukur kehadirat Allah SWT, karena atas ridho dan hidayah-nya penulis dapat menyelesaikan laporan tugas akhir yang berjudul user interface dan user experience aplikasi rekomendasi fashion (Prototype aplikasi fashion di iphone), sebagai salah satu syarat kelulusan pada Jurusan Desain Grafis dan Multimedia, Fakutas Teknik Desain dan Perencanaan, Universitas Mercu Buana Jakarta. Penulis menyadari penyusunan laporan ini tidak lepas dari bantuan berbagai pihak, Oleh karena itu pada kesempatan kali ini penulis hendak menyampaikan rasa terimakasih kepada : 1. Allah SWT atas segala rahmat dan karunia-nya yang telah memberikan kemampuan peneliti dalam melakukan kegiatan maupun menyelesaikan laporan tugas akhir ini. 2. Ir. Edy Muladi, M.Si. selaku Dekan FDSK, Jurusan Desain Produk, Universitas Mercu Buana, Jakarta. 3. Hady Soedarwanto, ST. M.Ds, selaku Kepala Program Studi Jurusan Desain Produk, Universitas Mercu Buana, Jakarta. 4. Heriyanto Atmojo, S.Sn, M, Sn selaku dosen Pembimbing yang telah bersedia untuk meluangkan waktu untuk membimbing, memeriksa, serta memberikan petunjuk-petunjuk serta saran dalam penyusunan laporan tugas akhir ini. Terima kasih untuk bimbingan dan arahan selama ini. Tanpa peranan beliau, tugas akhir ini tidak akan mungkin terselesaikan dengan baik 5. Kedua Penguji Tugas Akhir Penulis, Agus budi setyawan dan Ibu Lukman Arief, S.Ds, M.Sn, yang telah memberikan perbaikan-perbaikan yang begitu berarti terhadap tugas akhir penulis 6. Keluarga peneliti, khususnya kedua orang tua (Alm) Bapak dan Ibu 7. Seluruh teman-teman se-angkatan, khususnya Desain Grafis 17 yang turut saling membantu, memberikan semangat, dan bertukar pikiran dalam mencari referensi-referensi untuk pengerjaan Tugas Akhir ini. 8. Segenap staff pengajar pada program studi Desain Produk, Universitas Mercu Buana, Jakarta. Yang telah berbagi ilmu selama perkuliahan berlangsung. xiii

14 Penulis menyadari masih banyak yang dapat dikembangkan pada tugas akhir ini. Oleh karena itu penulis menerima setiap masukan dan kritik yang diberikan. Akhir kata, semoga Allah SWT senantiasa melimpahkan karunia-nya dan membalas segala amal budi serta kebaikan pihak-pihak yang telah membantu penulis dalam penyusunan laporan tugas akhir ini dan dapat bermanfaat bagi pihak-pihak yang membutuhkan. Jakarta, 28 Januari 2015 Penulis xiv