Human - Computer Interactionstaffnew.uny.ac.id/.../HCI-4+Desain+User+Interface.pdf · Kriteria yang...

Human - Computer Interaction

Desain Tampilan

Karakteristik Kriteria yang penting dari sebuah UI

adalah tampilan yang menarik Desainer UI : harus punya jiwa seni, selera

pengguna dan dapat meyakinkan programer bahwa rancangannya dapat diimplementasikan dengan tools

Desainer harus membuat dokumentasi rancangannya. 4 cara dokumentasi : – Sketsa pada kertas – Penggunaan piranti prototype GUI – Penjelasan tekstual – Menggunakan CASE

Dokumentasi Rancangan

Storyboards

http://www.storyboards-east.com/sb_dismoi.htm

Dokumentasi Rancangan Storyboards

– Workflow

– Obyek yang terlibat,

tanggungjawab, dll

Storyboards view – obyek yang terlibat

http://www.mindspring.com/~bryce_g/projects/lo

_fi.html

Pendekatan

User-Centered Design Approach – Fokus pada tujuan dan tasks pengguna

melibatkan pengguna dalam perancangan UI

– Digunakan pada special purpose software

– Tidak difokuskan pada • Teknologi

• Programmer

• Prioritas organisasi

– Software engineering • Dititikberatkan pada analisis user/interface

• Penekanan pada dokumentasi IMK, bukan coding

Pendekatan

User-Centered Design Approach

Pendekatan

User Design Approach – Pengguna yang menentukan “wajah” UI yang

diinginkan

– Digunakan pada general purpose software

– Kadang-kadang memberatkan programer dalam implementasinya

– Customization untuk setting UI oleh pengguna

Prinsip Desain UI

Komponen UI :

– Model pengguna : model konseptual yang diinginkan pengguna untuk memanipulasi dan memproses informasi

– Bahasa perintah : piranti yang digunakan untuk memanipulasi model

– Umpan balik : kemampuan program yg membantu pengguna dalam pengoperasian program berupa pesan penerimaan perintah, indikasi adanya obyek terpilih dll

– Penampilan Informasi : komponen untuk menunjukkan status informasi atau program ketika pengguna memberikan instruksi

Urutan Desain Pemilihan ragam dialog

– Karakteristik pengguna

– Tipe dialog yang diperlukan

– Kendala teknologi untuk implementasi

Desain struktur dialog

– Analisis tugas dan penentuan model penggunanya

– Libatkan pengguna untuk mendapatkan umpan balik

Desain format pesan

– Tata letak tampilan dan keterangan tekstual

– Efisiensi entry data bagi pengguna

Urutan Desain Desain penanganan kesalahan

– Validasi pemasukan data ada mekanisme pengulangan pemasukan data

– Proteksi pengguna ada peringatan

– Pemulihan dari kesalahan ada mekanisme untuk membatalkan

– Penampilan pesan kesalahan

Urutan Desain Desain struktur data

– Menentukan struktur data yg digunakan untuk menyajikan dan mendukung fungsionalitas komponen UI

– Memetakan struktur data ke model pengguna yg dibuat

– Diturunkan dari spesifikasi UI

Desain Tampilan berbasis Teks

Urutan penyajian – Disesuaikan dengan model pengguna

Kelonggaran – Penyusunan tata letak

Pengelompokan – Data yg berkaitan dikelompokkan untuk memudahkan

penstrukturan layar tampilan

Relevansi – Tampilkan pesan yang sesuai

Konsistensi – Konsistensi dalam penngunaan ruang tampilan

Kesederhanaan – Kemudahan dalam menyajikan aras informasi

Desain Tampilan berbasis Grafis

Ilusi pada obyek yg dimanipulasi – Kumpulan obyek yg disesuaikan dg aplikasi yg dibuat – Tampilan obyek grafis harus mudah dimengerti – Gunakan mekanisme yg konsisten untuk manipulasi obyek

Urutan visual dan fokus pengguna – Gunakan rangsangan visual tertentu untuk maksud

tertentu Struktur internal

– Mengarahkan pengguna dalam memanipulasi obyek

Kosakata grafis yg konsisten dan sesuai – Gunakan simbol yg sama untuk tujuan yg sama

Kesesuaian dg media – Sesuaikan dg teknologi layar tampilan (bitmap, raster

display)

Prinsip-prinsip Graphical Design

Perlu diperhatikan bagaimana cara kerja sistem visual manusia

Prinsip tsb berkaitan dg ;

– Seberapa sulit memproses suatu visualisasi

– Berapa banyak layar yang dapat dicocokkan dengan visual yang ada di memori

Prinsip-prinsip Graphical Design

Disorganized

Visual noise

Organisasi elemen layar

Keseimbangan

simetri

keteraturan

Dpt diprediksi

keterurutan

Ekonomi

Kesatuan

Proporsi

Kesederhanaan

Pengelompokan

Keseimbangan

Keseimbangan elemen dalam layar

– Kiri ke kanan, atas ke bawah

Seimbang

Tidak stabil

Keseimbangan

Kolom kiri – kanan mestinya dibuat sama

Kedua kolom diusahakan memiliki elemen yang seimbang

Simetri

jumlah element kiri dan kanan terhadap garis tengah

Simetris

asimetris

Simetri

Kolom kiri dan kanan diproses secara sama

Pemrosesan kedua kolom ditambah relasi antara kanan dan kiri

Keteraturan

Buat spasi standar dan konsisten secara horisontal maupun vertikal

Teratur

Tak teratur

Two-level Hierarchy

•indentation

•contrast

Grouping

by white

Alignment connects

visual elements in a

sequence

Logic of organizational

Keteraturan

Ketiga kolom diproses dg cara sama

Pemrosesan lokasi dan ukuran untuk setiap objek

Dapat Diprediksi

Tempatkan objek pada lokasi yang mudah diprediksi pada layar

Dapat Diprediksi

Spontan

File Edit View Insert Window Help

Kung Foo

Search for Movies

Cancel OK

Enter Keywords:

Grasshopper Old blind guy

Kung Foo

Search for Movies Cancel

Enter Keywords:

Grasshopper Old blind guy

Dapat Diprediksi

User lebih menyukai judul & menu bar di layar atas

Layar harus diproses scr lengkap – objek tidak berada pada tempat yg diharapkan

Kung Foo

Search for Movies

Cancel OK

Enter Keywords: Grasshopper Old blind guy

Kung Foo

Search for Movies Cancel

Enter Keywords: Grasshopper Old blind guy

Keterurutan

Membantu mata bekerja scr wajar

– Mata tertarik pada: • Elemen yg lebih terang dari elemen lain

• Elemen yg terpisah dari suatu kelompok

• Gambar sebelum teks

• Warna sebelum monokrom

• Warna variasi vs. warna konstan

• Daerah yang lebih gelap

• Elemen besar vs. elemen kecil

• Bentuk-bentuk yang tak biasa

Sequential

Random

Membership Form

Address:

State:

Total:

OK Cancel

Membership Form Name:

Address:

State:

Total:

OK Cancel

Ekonomis

Gunakan beberapa style, font, warna, teknik display, dialog style, dll

ekonomis

Terlalu ramai

Membership Form

Address:

State:

Total:

OK Cancel

Address: City: State: Zip:

Dues: Pubs: Total:

OK Cancel

Kesatuan

Buat item-item muncul sebagai satu kesatuan

– Gunakan bentuk, ukuran dan warna yang sama

– Berikan sedikit tempat kosong antar elemen

Fragmentation

Proporsi

Buat pengelompokan data atau teks secara proporsional

Square - 1:1 Square Root of 2 - 1:1.414 Golden Triangle - 1:1.618

Square Root of 3 - 1:1.732 Double Square - 1:2

Proporsional

Kesederhanaan

Kurangi jumlah pengelompokan

– Gunakan sedikit kolom untuk menampilkan elemen dalam layar

Simple

Complex

Name: Address:

City: State: Zip:

Dues: Pubs: Total:

OK Cancel

Membership Form

Address: City:

State: Zip:

Pubs: Total:

OK Cancel

Kesederhanaan

Hanya 4 penjajaran yg perlu diproses

Ada 9 penjajaran yg perlu diproses

Name: Address:

State: Zip:

Dues: Pubs:

Total:

OK Cancel

Membership Form

Address:

City: State:

Total:

Cancel

Kesederhanaan

Kombinasikan elemen untuk meminimalkan jumlah objek layar

– Dalam pembatasan yang tetap jelas

Simple

Complex

Uniformity:

Height:

Width:

Preserve Proportions

% of original

Size::

Preserve Proportions

% of original height

% of original width

Pengelompokan

Gunakan pengaturan visual untuk pengelompokan elemen layar

– Jajarkan elemen dalam group

– Ratakan spasi antar elemen dlm group

– Berikan pemisahan antar group

Gunakan group elemen tamabahn scr hemat

– warna & batas menambah kompleksitas

Membership Form

Address:

State:

Total:

OK Cancel

Simple Grouping

Elemen yang sama ditata scr vertikal

Jarak vertikal antar objek kecil

Membership Form

Name: Address:

City: State: Zip:

Dues: Pubs: Total:

OK Cancel

Boxed Grouping

Kotak memberi tambahan kompleksitas suatu isian / form

Pengaturan spasial scr memadai

Background Grouping

Membership Form

Name: Address:

City: State: Zip:

Dues: Pubs: Total:

OK Cancel

Warna memberi tambahan kompleksitas visual

Pengaturan spasial scr memadai

Design Specification 1. Narrative overview

a. Interface/Dialogue Name

b. User characteristics

c. Task characteristics

d. System characteristics

2. Interface/Dialogue Design

a. Form/Report Design

b. Dialogue Sequence Diagram and Narrative Description

3. Testing and Usability Assessment

a. Testing objective

b. Testing procedure

c. Testing result

i. Time to learn

ii. Speed performance

iii. Rate of errors

iv. Retention overtime

v. User satisfaction and other perceptions

Questions?

Human - Computer Interactionstaffnew.uny.ac.id/.../HCI-4+Desain+User+Interface.pdf · Kriteria yang...

Documents

Transcript of Human - Computer Interactionstaffnew.uny.ac.id/.../HCI-4+Desain+User+Interface.pdf · Kriteria yang...

BAB 5 PEMBAHASAN DESAIN 5.1 Konsep Visual a. Visuallibrary.binus.ac.id/eColls/eThesisdoc/Bab5/2007-3-00130-DS-Bab 5.pdf34 BAB 5 PEMBAHASAN DESAIN 5.1 Konsep Visual a. Visual Tampilan

BAB V HASIL DAN PEMBAHASAN - sir.stikom.edusir.stikom.edu/id/eprint/965/8/BAB V.pdf · Gambar 5.12 Final desain tampilan halaman web . Layout desain dibuat menggunakan adobe Photoshop

Mengatur Tampilan

Ekologi Arsitektur Desain Dengan Alam Dan Tampilan Alam Pada Desain

332-1260 Cover - KTSP 2006 & Buku Literasi Sekolahdesain pada buku pelajaran. Lihatlah desain pada cover buku Anda dan desain layout setiap lembar buku, agar memberikan tampilan yang

BAB 2 PENGENALAN ARCGIS · database spasial yang baru, memilih (query), editing, menciptakan desain-desain peta, analisis dan pembuatan tampilan akhir dalam laporan-laporan kegiatan.

CRAYONPEDIA EDUCATION ECOSYSTEM PADA SISTEM …pfigshare-u-files.s3.amazonaws.com/5609495/IrmaRismayanti_03214064.pdf · desain tampilan pengguna web berbasis desktop program studi

Perancangan Tampilan

JURUSAN TEKNIK SIPIL FAKULTAS TEKNIK ...Tampilan Menu Konstruksi Tangga ..... 26 3.1. Tampilan Gambar Rencana Tangga ..... 27 4.1. Tampilan Menu Konstruksi4.2. Tampilan Menu 4.3. Tampilan

Tampilan Produk A. Tampilan Produk

BAB III SURABAYAsir.stikom.edu/376/6/BAB III.pdfSumber wawancara adalah manager perusahaan PT. ... tampilan desain website yang paling interaktif dengan menggunakan bahasa . pemrograman

DESAIN TAMPILAN SISTEM INFORMASI TUGAS AKHIR ...repository.dinamika.ac.id/id/eprint/4931/1/06390160025...Tantangan yang paling menarik dari desain grafis ialah ketiadaan aturan yang

BAB IV HASIL DAN PEMBAHASANrepository.unj.ac.id/107/9/16. Tesis_bab_4.pdf · 7) Memiliki tampilan yang menarik. Desain tampilan media harus menarik, memiliki kesan yang baru, mengikuti

PEMROGRAMAN II DESAIN FORM Pertemuan 9 IF 9 - Desain Form.pdf · Dalam melakukan perancangan dan design tampilan, Anda diharuskan membuat tampilan form yang tidak membosankan dan

Desain Grafis - liyantanto.files.wordpress.com · Di dalam CSS terdapat banyak style. ... Properti-properti elemen font mengatur tampilan teks dalam dokumen web. ... dilakukan di

PERTEMUAN 3 MERANCANG DAN MEMBANGUN WEB · 2018. 5. 21. · web. Desain web terdiri dari 2 bagian yaitu desain front-end dan desain back-end. Bagian front-end adalah tampilan web

BAB III METODE PENELITIAN A. Metode dan Desain Penelitianrepository.upi.edu/28322/6/S_PLB_1204413_Chapter3.pdf · penilaian sikap pada kurikulum 2013 dengan tampilan sebagai berikut.

Layouting Tampilan

SISTEM PENGENDALIAN PERSEDIAAN JUMLAH VAKSIN …eprints.undip.ac.id/66146/1/A._COVER.pdf · DAFTAR ISI Halaman HALAMAN ... Gambar 3.15 Desain Tampilan Pengaturan Akun ... sedangkan

RANCANG BANGUN SISTEM INFORMASI ...Gambar 3.53 Desain Tampilan Arsip Surat Keluar ..... 91 Gambar 3.54 Desain Tampilan Menu Data Arsip Surat Masuk ..... 92 Gambar 3.55 Desain Tampilan