Presentasi sedang didownload. Silahkan tunggu

Presentasi sedang didownload. Silahkan tunggu

Dasar Desain Interaksi. Desain: Desain: apa itu, intervensi, tujuan, kendala apa itu, intervensi, tujuan, kendala Proses Desain Proses Desain apa yang.

Presentasi serupa


Presentasi berjudul: "Dasar Desain Interaksi. Desain: Desain: apa itu, intervensi, tujuan, kendala apa itu, intervensi, tujuan, kendala Proses Desain Proses Desain apa yang."— Transcript presentasi:

1 Dasar Desain Interaksi

2 Desain: Desain: apa itu, intervensi, tujuan, kendala apa itu, intervensi, tujuan, kendala Proses Desain Proses Desain apa yang terjadi ketika apa yang terjadi ketika Pengguna Pengguna siapa mereka, apa yang mereka menyukai... siapa mereka, apa yang mereka menyukai... Skenario Skenario kaya cerita desain kaya cerita desain Navigasi Navigasi menemukan jalan sekitar Anda sistem menemukan jalan sekitar Anda sistem Iterasi dan Prototipe Iterasi dan Prototipe tidak pernah benar pertama kalinya! tidak pernah benar pertama kalinya!

3 Apa Itu Desain ? mencapai tujuan dalam keterbatasan Tujuan – Maksud Tujuan – Maksud Untuk siapa?, mengapa mereka menginginkannya Untuk siapa?, mengapa mereka menginginkannya Kendala Kendala bahan, platform bahan, platform Hasil bernilai jual Hasil bernilai jual

4 Aturan Desain Umumnya : Umumnya : Pahami material yang ada Pahami material yang ada Pada IMK : Pada IMK : Pahami komputernya : Pahami komputernya : Kemampuan, tools, kapasitas, platforms Kemampuan, tools, kapasitas, platforms Pahami pengguna : Pahami pengguna : Psikologi, sosial, kesalahan manusia pada sistem Psikologi, sosial, kesalahan manusia pada sistem Dan dari interaksi user terhadap sistem Dan dari interaksi user terhadap sistem

5 Kesalahan Manusia laporan kecelakaan.. laporan kecelakaan.. aircrash, kecelakaan industri, kesalahan rumah sakit aircrash, kecelakaan industri, kesalahan rumah sakit Pertanyaannya, mau menyalahkan manusia? Pertanyaannya, mau menyalahkan manusia? tetapi … tetapi … tiang beton retak karena terlalu banyak beban berat tiang beton retak karena terlalu banyak beban berat menyalahkan tiangnya? Tidak…tetapi…. kesalahan desain menyalahkan tiangnya? Tidak…tetapi…. kesalahan desain kita tahu bagaimana berperilaku beton di bawah tekanan kita tahu bagaimana berperilaku beton di bawah tekanan manusia salah adalah normal manusia salah adalah normal kita tahu bagaimana pengguna berperilaku di bawah tekanan kita tahu bagaimana pengguna berperilaku di bawah tekanan sehingga desain untuk itu! sehingga desain untuk itu! memperlakukan pengguna setidaknya dari bentuk fisik! memperlakukan pengguna setidaknya dari bentuk fisik!

6 Fokus Dari Sistem the user

7 Siklus Hidup Software Dengan Model Air Terjun

8 Waterfall Model

9 Kekurangan Dari Model Ini Adalah Adanya kesulitan dalam mengakomodasi perubahan setelah proses dijalani. Adanya kesulitan dalam mengakomodasi perubahan setelah proses dijalani. Fase sebelumnya harus sudah lengkap dan selesai dikerjakan sebelum ke fase berikutnya. Fase sebelumnya harus sudah lengkap dan selesai dikerjakan sebelum ke fase berikutnya.

10 Masalah Dalam Waterfall Perubahan sulit dilakukan karena sifatnya kaku : Perubahan sulit dilakukan karena sifatnya kaku : Cocok untuk kebutuhan yang dikumpulkan secara lengkap. Cocok untuk kebutuhan yang dikumpulkan secara lengkap. Perubahan ditekan sekecil mungkin. Perubahan ditekan sekecil mungkin. Umumnya digunakan untuk rekayasa sistem yang besar dimana proyek di kerjakan di beberapa tempat. Umumnya digunakan untuk rekayasa sistem yang besar dimana proyek di kerjakan di beberapa tempat.

11 Proses Desain what is wanted analysis design implement and deploy prototype interviews ethnography what is there vs. what is wanted guidelines principles dialogue notations precise specification architectures documentation help evaluation heuristics scenarios task analysis

12 Langkah-langkah Kebutuhan Kebutuhan apa yang ada dan apa yang diinginkan... apa yang ada dan apa yang diinginkan... Analisa Analisa pemesanan dan pemahaman pemesanan dan pemahaman Desain Desain apa yang harus dilakukan dan bagaimana untuk memutuskan apa yang harus dilakukan dan bagaimana untuk memutuskan Iterasi dan prototyping Iterasi dan prototyping mendapatkan sesuatu dengan benar... dan menemukan apa yang benar-benar dibutuhkan! mendapatkan sesuatu dengan benar... dan menemukan apa yang benar-benar dibutuhkan! Implementasi dan penyebaran Implementasi dan penyebaran membuat dan mendapatkan hal itu di luar sana membuat dan mendapatkan hal itu di luar sana

13 … bagaimana bisa dilakukan semuanya ! ! Terbatasnya waktu  design trade-off Terbatasnya waktu  design trade-off Kegunaan? Kegunaan? Menemukan masalah dan memperbaikinya? Menemukan masalah dan memperbaikinya? Memutuskan apa yang harus diperbaiki? Memutuskan apa yang harus diperbaiki? System yang sempurna yang di desain buruk System yang sempurna yang di desain buruk Terlalu baik  terlalu banyak upaya dalam desain Terlalu baik  terlalu banyak upaya dalam desain  

14 Fokus ke User Ketahui siapa pemakainya Ketahui siapa pemakainya Persona (karakter) Persona (karakter) Cari tahu kebiasaan/budayanya Cari tahu kebiasaan/budayanya

15 Ketahui Siapa Pemakainya siapa mereka? siapa mereka? mungkin dia tidak seperti Anda! mungkin dia tidak seperti Anda! berbicara dengan mereka berbicara dengan mereka mengawasi mereka mengawasi mereka menggunakan imajinasi Anda menggunakan imajinasi Anda

16 Persona Menjelaskan contoh user Menjelaskan contoh user Tidak diperlukan user yang nyata Tidak diperlukan user yang nyata Digunakan sebagai pengganti user Digunakan sebagai pengganti user Apa yang dipikirkan Joni Apa yang dipikirkan Joni Rincian masalah Rincian masalah Dibuat se-nyata mungkin Dibuat se-nyata mungkin

17 Cari tahu Kebiasaan/Budayanya pengamatan langsung pengamatan langsung di rumah di rumah psikiatri pasien psikiatri pasien paket probe paket probe item ke prompt tanggapan item ke prompt tanggapan umpamanya kaca untuk mendengarkan pada dinding, kamera, kartu pos umpamanya kaca untuk mendengarkan pada dinding, kamera, kartu pos diberikan kepada orang-orang untuk terbuka di lingkungan mereka sendiri, mereka merekam apa yang bermakna bagi mereka diberikan kepada orang-orang untuk terbuka di lingkungan mereka sendiri, mereka merekam apa yang bermakna bagi mereka digunakan untuk digunakan untuk menginformasikan wawancara, ide-ide prompt, desainer enculture menginformasikan wawancara, ide-ide prompt, desainer enculture

18 navigation design struktur lokal - layar tunggal struktur global - keseluruhan situs start the systems info and helpmanagementmessages add userremove user main screen remove user confirm add user

19 levels widget choice widget choice menus, buttons etc. menus, buttons etc. screen design screen design application navigation design application navigation design environment environment other apps, O/S other apps, O/S

20 the web … widget choice widget choice screen design screen design navigation design navigation design environment environment elements and tags elements and tags page design page design site structure site structure the web, browser, external links the web, browser, external links

21 physical devices widget choice widget choice screen design screen design navigation design navigation design environment environment controls controls buttons, knobs, dials buttons, knobs, dials physical layout physical layout modes of device modes of device the real world the real world

22 think about structure within a screen within a screen later... later... local local looking from this screen out looking from this screen out global global structure of site, movement between screens structure of site, movement between screens wider still wider still relationship with other applications relationship with other applications

23 local from one screen looking out

24 goal seeking goal start

25 goal seeking start goal progress with local knowledge only...

26 goal seeking goal start … but can get to the goal

27 goal seeking … try to avoid these bits! goal start

28 four golden rules knowing where you are knowing where you are knowing what you can do knowing what you can do knowing where you are going knowing where you are going or what will happen or what will happen knowing where you’ve been knowing where you’ve been or what you’ve done or what you’ve done

29 where you are – breadcrumbs shows path through web site hierarchy shows path through web site hierarchy web site top level category sub-category this page live links to higher levels

30 beware the big button trap where do they go? where do they go? lots of room for extra text! lots of room for extra text! things the thing from outer space more things other things

31 modes lock to prevent accidental use … lock to prevent accidental use … remove lock - ‘c’ + ‘yes’ to confirm remove lock - ‘c’ + ‘yes’ to confirm frequent practiced action frequent practiced action if lock forgotten if lock forgotten in pocket ‘yes’ gets pressed in pocket ‘yes’ gets pressed goes to phone book goes to phone book in phone book … ‘c’ – delete entry ‘yes’ – confirm … oops ! in phone book … ‘c’ – delete entry ‘yes’ – confirm … oops !

32 global between screens within the application

33 hierarchical diagrams the system info and helpmanagementmessages add userremove user

34 hierarchical diagrams ctd. parts of application parts of application screens or groups of screens screens or groups of screens typically functional separation typically functional separation the systems info and helpmanagementmessages add userremove user

35 navigating hierarchies deep is difficult! deep is difficult! misuse of Miller’s 7 ± 2 misuse of Miller’s 7 ± 2 short term memory, not menu size short term memory, not menu size optimal? optimal? many items on each screen many items on each screen but structured within screen but structured within screen see /e3/online/menu-breadth/

36 think about dialogue what does it mean in UI design? Minister: do you name take this woman … Man: I do Minister: do you name take this man … Woman: I do Minister: I now pronounce you man and wife

37 think about dialogue what does it mean in UI design? marriage service marriage service general flow, generic – blanks for names general flow, generic – blanks for names pattern of interaction between people pattern of interaction between people computer dialogue computer dialogue pattern of interaction between users and system pattern of interaction between users and system but details differ each time but details differ each time Minister: do you name take this woman …

38 network diagrams show different paths through system show different paths through system main screen remove user confirm add user

39 network diagrams ctd. what leads to what what leads to what what happens when what happens when including branches including branches more task oriented then hierarchy more task oriented then hierarchy main screen remove user confirm add user

40 wider still between applications and beyond...

41 wider still … style issues: style issues: platform standards, consistency platform standards, consistency functional issues functional issues cut and paste cut and paste navigation issues navigation issues embedded applications embedded applications links to other apps … the web links to other apps … the web

42

43 screen design and layout basic principles grouping, structure, order alignment use of white space ABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZ Dix, Alan Finlay, Janet Abowd, Gregory Beale, Russell

44 basic principles ask ask what is the user doing? what is the user doing? think think what information, comparisons, order what information, comparisons, order design design form follows function form follows function

45 available tools grouping of items grouping of items order of items order of items decoration - fonts, boxes etc. decoration - fonts, boxes etc. alignment of items alignment of items white space between items white space between items

46 grouping and structure logically together  physically together Billing details: Name Address: … Credit card no Delivery details: Name Address: … Delivery time Order details: item quantity cost/item cost size 10 screws (boxes) …… … … …

47 order of groups and items think! - what is natural order think! - what is natural order should match screen order! should match screen order! use boxes, space etc. use boxes, space etc. set up tabbing right! set up tabbing right! instructions instructions beware the cake recipie syndrome! … mix milk and flour, add the fruit after beating them beware the cake recipie syndrome! … mix milk and flour, add the fruit after beating them

48 decoration use boxes to group logical items use boxes to group logical items use fonts for emphasis, headings use fonts for emphasis, headings but not too many!! but not too many!! ABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZ

49 alignment - text you read from left to right (English and European) you read from left to right (English and European)  align left hand side Willy Wonka and the Chocolate Factory Winston Churchill - A Biography Wizard of Oz Xena - Warrior Princess Willy Wonka and the Chocolate Factory Winston Churchill - A Biography Wizard of Oz Xena - Warrior Princess fine for special effects but hard to scan boring but readable!

50 alignment - names Usually scanning for surnames  make it easy! Usually scanning for surnames  make it easy! Alan Dix Janet Finlay Gregory Abowd Russell Beale Alan Dix Janet Finlay Gregory Abowd Russell Beale Dix, Alan Finlay, Janet Abowd, Gregory Beale, Russell 

51 alignment - numbers think purpose! which is biggest?

52 alignment - numbers visually: long number = big number long number = big number align decimal points or right align integers

53 multiple columns scanning across gaps hard: (often hard to avoid with large data base fields) scanning across gaps hard: (often hard to avoid with large data base fields) sherbert75 toffee120 chocolate35 fruit gums27 coconut dreams85

54 multiple columns - 2 use leaders use leaders sherbert75 toffee120 chocolate35 fruit gums27 coconut dreams85

55 multiple columns - 3 or greying (vertical too) or greying (vertical too) sherbert75 toffee120 chocolate35 fruit gums27 coconut dreams85

56 multiple columns - 4 or even (with care!) ‘bad’ alignment or even (with care!) ‘bad’ alignment

57 white space - the counter WHAT YOU SEE

58 white space - the counter WHAT YOU SEE THE GAPS BETWEEN

59 space to separate (pemisahan)

60 space to structure

61 space to highlight (menyorot)

62 physical controls grouping of items grouping of items defrost settings defrost settings type of food type of food time to cook time to cook type of food time to cook defrost settings

63 physical controls grouping of items grouping of items order of items order of items 1) type of heating 2) temperature 3) time to cook 4) start 4 2 2)temperature 3 3)time to cook 1 1)type of heating

64 physical controls grouping of items grouping of items order of items order of items decoration decoration different colours for different functions different colours for different functions lines around related buttons lines around related buttons different colours for different functions lines around related buttons (temp up/down)

65 physical controls grouping of items grouping of items order of items order of items decoration decoration alignment alignment centered text in buttons ? easy to scan ? centered text in buttons ? easy to scan ? ? easy to scan ? centred text in buttons

66 physical controls grouping of items grouping of items order of items order of items decoration (hiasan) decoration (hiasan) alignment alignment white space white space gaps to aid grouping gaps to aid grouping gaps to aid grouping

67

68 tindakan pengguna dan kontrol pengguna memasukkan informasi tahu apa yang harus dilakukan affordances (kemampuan)

69 memasukkan informasi forms, dialogue boxes forms, dialogue boxes presentation + data input presentation + data input masalah tata letak yang sama masalah tata letak yang sama alignment - N.B. different label lengths alignment - N.B. different label lengths Layout yang Logis Layout yang Logis Menggunakan analisis tugas Menggunakan analisis tugas Pengelompokan Pengelompokan natural order for entering information natural order for entering information top-bottom, left-right (depending on culture) top-bottom, left-right (depending on culture) set tab order for keyboard entry set tab order for keyboard entry N.B. see extra slides for widget choice Name: Address: Alan Dix Lancaster Name: Address: Alan Dix Lancaster Name: Address: Alan Dix Lancaster ?

70 knowing what to do apa yang aktif apa pasif apa yang aktif apa pasif mana Anda mengklik mana Anda mengklik mana Anda mengetik mana Anda mengetik gaya konsisten membantu gaya konsisten membantu umpamanya digarisbawahi web link umpamanya digarisbawahi web link label dan ikon label dan ikon tindakan standar untuk umum tindakan standar untuk umum bahasa - tebal = arus atau tindakan bahasa - tebal = arus atau tindakan

71 Kemampuan (affordances) psychological term psychological term Untuk obyek fisik Untuk obyek fisik shape and size suggest actions shape and size suggest actions pick up, twist, throw pick up, twist, throw also cultural – buttons ‘afford’ pushing also cultural – buttons ‘afford’ pushing Untuk obyek layar Untuk obyek layar button–like object ‘affords’ mouse click button–like object ‘affords’ mouse click physical-like objects suggest use physical-like objects suggest use culture of computer use culture of computer use icons ‘afford’ clicking icons ‘afford’ clicking or even double clicking … not like real buttons! or even double clicking … not like real buttons! mug handle ‘affords’ grasping (genggaman)

72 sesuai tampilan presenting information aesthetics and utility colour and 3D localisation & internationalisation

73 menyajikan informasi purpose matters –sort urutan (yang kolom, abjad numerik) –text vs. diagram –menyebarkan grafik vs. histogram prinsip-prinsip presentasi kertas digunakan! but add interactivity –softens design choices e.g. re-ordering columns ‘dancing histograms’ (chap 21) chap1 chap10 chap11 chap12 chap13 chap14 … … sizename size chap10 chap5 chap1 chap14 chap20 chap8 … … namesize

74 estetika dan utilitas desain estetika desain estetika meningkatkan kepuasan pengguna dan meningkatkan produktivitas meningkatkan kepuasan pengguna dan meningkatkan produktivitas keindahan dan utilitas mungkin bertentangan keindahan dan utilitas mungkin bertentangan gaya visual terlibat  mudah untuk membedakan gaya visual terlibat  mudah untuk membedakan desain yang bersih– sedikit perbedaan  membingungkan desain yang bersih– sedikit perbedaan  membingungkan latar belakang di balik teks … baik untuk melihat, tapi sulit untuk membaca latar belakang di balik teks … baik untuk melihat, tapi sulit untuk membaca tetapi dapat bekerja sama tetapi dapat bekerja sama misalnya desain meja misalnya desain meja dalam produk konsumen– pembeda utama (misalnya iMac) dalam produk konsumen– pembeda utama (misalnya iMac)

75 colour and 3D keduanya sering digunakan dengan sangat buruk! keduanya sering digunakan dengan sangat buruk! Warna Warna monitor yang lebih tua terbatas palet monitor yang lebih tua terbatas palet berhati-hatilah buta warna! berhati-hatilah buta warna! gunakan hemat untuk memperkuat informasi lainnya gunakan hemat untuk memperkuat informasi lainnya Efek 3D Efek 3D baik untuk informasi fisik dan beberapa grafik baik untuk informasi fisik dan beberapa grafik

76 bad use of colour over use - without very good reason (e.g. kids’ site) over use - without very good reason (e.g. kids’ site) colour blindness colour blindness poor use of contrast poor use of contrast do adjust your set! do adjust your set! adjust your monitor to greys only adjust your monitor to greys only can you still read your screen? can you still read your screen?

77 di seluruh negara dan budaya lokalisasi & internasionalisasi lokalisasi & internasionalisasi mengubah antarmuka untuk budaya tertentu / bahasa mengubah antarmuka untuk budaya tertentu / bahasa globalisasi globalisasi mencoba untuk memilih dll simbol-simbol yang bekerja di mana-mana mencoba untuk memilih dll simbol-simbol yang bekerja di mana-mana hanya mengubah bahasa? hanya mengubah bahasa? menggunakan sumber database bukan teks literal… menggunakan sumber database bukan teks literal… tapi ukuran perubahan, urutan kiri-kanan dll tapi ukuran perubahan, urutan kiri-kanan dll lebih dalam isu-isu lebih dalam isu-isu asumsi dan nilai-nilai budaya asumsi dan nilai-nilai budaya makna simbol makna simbol 

78

79 prototyping

80 iteration and prototyping getting better … … and starting well

81 prototyping anda tidak pernah mendapatkan benar pertama kali anda tidak pernah mendapatkan benar pertama kali jika pada awalnya Anda tidak berhasil... jika pada awalnya Anda tidak berhasil... prototypeevaluatedesign re-design done! OK?

82 Perangkap prototyping bergerak sedikit demi sedikit... tapi ke mana? Malverns or the Matterhorn? 1. membutuhkan titik awal yang baik 2. perlu memahami apa yang salah


Download ppt "Dasar Desain Interaksi. Desain: Desain: apa itu, intervensi, tujuan, kendala apa itu, intervensi, tujuan, kendala Proses Desain Proses Desain apa yang."

Presentasi serupa


Iklan oleh Google