PPT - Perancangan Antarmuka Pengguna

7/24/2019 PPT - Perancangan Antarmuka Pengguna

1/29

PerancanganAntarmuka Pengguna

FATHURAHMA, ST


2/29

Perancangan Antarmuka

Membuat perancangan interaktif untuk

mendukung pengguna dalam pekerjaan dan

kehidupan seharihari mereka

Perancangan ruang untuk k!munikasi

manusia dan interaksi


3/29

Mengapa"

#ebutuhan antarmuka $ang baik

Pembeli adalah raja


4/29

Faktan$a%


5/29

Prinsip Antarmuka

#eberagaman

Pencegahan er!r


6/29

Aturan Perancangan

#!nsistensi

Memungkinkan penggunaan sh!rtcuts

Feedback $ang inf!rmatif

Rancangan dial!g $ang terarah

Pencegahan dan penanganan er!r

#emudahan &re'ersal !f acti!n( Supp!rt internal l!cus !f c!ntr!l

Mengurangi isi sh!rt term mem!r$


7/29

Tujuann$a) #ebergunaan

#ebergunaan adalah mengukur kualitas

pengalaman pengguna ketika berinteraksi

dengan sistem * +ebsite, s!ft+are

aplikasi, tekn!l!gi m!bile, atau perangkat

pengguna lainn$a $ang di!perasikan


8/29

#!mp!nen Antarmuka


9/29

#ecenderungan dalam

Antarmuka


10/29

Pelaku Antarmuka


11/29

M!del Siklus Hidup

Menunjukkan bagaimana aktifitas $ang

berelasi satu sama lain

M!del siklus hidup terdiri dari)

* T!!ls manajemen

* Pen$ederhanaan 'ersi realitas


12/29

M!del Siklus Hidup

!nt!h m!del siklus hidup)

* -erdasarkan Rancang bangun s!ft+are ..

+aterfall, spiral, star, micr!s!ft

* -erdasarkan /M# .. rancang bangun

kebergunaan


13/29

M!del Perancangan /nteraksi

Sederhana


14/29

0aterfall M!del

Analisa

#ebutuhan

Perancangan

Peng!dean

Pengujian

Pera+atan


15/29

Spirall M!del


16/29

Star M!del


17/29

Penting11

Antarmuka 2 k!munikasi

#!munikasi 3 Satu Arah


18/29

Penting11

Antarmuka Pengguna 2 4alur 5 Arah

-agaimana berk!munikasi dengan

pengguna anda


19/29

Membangun #!munikasi 5 Arah

/ntruksi $ang jelas


20/29

Membangun%

Tiap aksi ada reaksi


21/29

Membangun%

Hindari Ambiguitas


22/29

06S/067

Menampilkan

sesuatu apa adan$a

A+al 89an peng!lah

kata 06S/067

menjadi standar

!nt!h) Ms 0!rd,

:!tus 0!rdPr!,!rel(s 0!rd Perfect


23/29

#euntungan 06S/067

Tampilan teks la$ar penuh

Tampilan d!kumen 2 hasil cetak

-entukbentuk kurs!r mengindikasikanpr!ses $ang jelas

Pengendalian kurs!r jelas dan alamiah

/k!n berlabel untuk aksi cepat Feedback $ang cepat

Pen$ediaan fungsi pembalik ;und! dapat menarik perhatian, namun bisa juga

mengganggu

Pastikan ik!n $ang dipilih terlihat dengan jelasketika dikelilingi !leh ik!nik!n $ang tidak terpilih

-uatlah setiap ik!n berbeda


26/29

Petunjuk%

Pastikan keselarasan dari setiap ik!n

sebagai bagian dari keluarga ik!n

Rancanglah animasi pergerakan

Tambahkan inf!rmasi detail, misal dengan

ba$angan, ketebalan, +arna atau animasi

?kspl!rasi penggunaan k!mbinasi daribeberapa ik!n untuk membuat aksi baru


27/29

Tingkatan Perancangan /k!n

:eksik) tanda $ang dibangkitkan mesin *

bentuk piksel, +arna, kecerlangan, kedap

kedip

Sintaktik) kemunculan dan perpindahan *

garis, p!la, bagian m!duler, ukuran,

bentuk


28/29

Tingkatan%

Semantik) represntasi !bjek * k!ngkrit 's

abstrak, bagian 's keseluruhan

Pragmatik) dapat dibaca, digunakan,

diidentifikasi, diingat, dan dinikmati

>inamik) resp!n ketika diklik *

highlighting, dragging, atau

pengk!mbinasian


29/29

Ped!man untuk Tampilan >ata

#!nsistensi untuk semua aspek

F!rmat $ang sudah dikenal

Mengurangi mem!ri jangka pendekpengguna

PPT - Perancangan Antarmuka Pengguna

Documents

Transcript of PPT - Perancangan Antarmuka Pengguna