INTERAKSI MANUSIA & KOMPUTER

1. INTERAKSI MANUSIA & KOMPUTER Teknik Informatika STT Wastukancana

2. Who am I? • Meriska Defriani, S.Komp • M.defriska@gmail.com • 085215956400 (sms only ) • Defriska.wordpress.com/lecture/imk

3. Class Rule • Be ON TIME • NO SANDAL • Silent or Turn Off HP • Candy OK, Drink Water OK, NO Heavy Food • Update the Task

4. Persentase • Kehadiran 10% • Tugas 20% • UTS 30% • UAS 40%

5. Range Huruf Mutu • >= 75 : A • >= 65 - < 75 : B • >= 55 - < 65 : C • >=45 - < 55 : D • <45 : E

6. Things that don’t work the way you expect How do you open the refrigerator?

7. Things that don’t work well together

8. Things that get in your way

9. Things that are hard to handle

10. Displays that look like controls

11. Beberapa bidang studi yang berkaitan dengan Desain Interaksi • Ilmu komputer • Psikologi • Perancangan grafis dan tipografi • Ergonomik • Liguistik

13. Bahan bacaan • Don’t make me think • Guidelines book ^ ^ ^ bisa di-download di defriska.wordpress.com/imk

14. Don’t Make Me Think

17. How we really use the web?

18. Facts of life • We don’t read pages.We scan them • We’re usually in hurry • We know we don’t need to read everythings • We’re good at it

19. We don’t make optimal choices. We satisfice • We don’t figure out how things work. We muddle through • It’s not important to us • If we find something that works, we stick to it

20. So, what must we do? • Create a clear visual hierarchy • The more important something is, the more prominent it is • Things are related logically are also related visually • Things are nested visually to show what’s part of what • Break up pages into clearly defined areas

21. Make it obvious what’s clickable • Keep the noise down to a dull roar • Bussy-ness • Background noise • Happy talk must die • Instruction must die

22. Navigation and breadcrumb • Navigation • It gives us something to hold onto • It tells us what’s here • It tell us how to use the site • It give us confidence in the people who built it • 5 basic elements of navigation • Site ID • A way home • A way to search • Section • Utilities

24. Page name • Every page has a name • The name needs to be in right place • The name needs to be prominent • The name needs to match what i clicked

26. Breadcrumbs • Show you the path from home page to where you are • About.com has best breadcrumbs • Put them at the top • Use “>” between levels • Use tiny type • Use the words “you are here” • Boldface the last item • Don’t use them instead of a page name

27. Tabs

28. Tabs • They’re self-evident • They hard to miss • They’re slick • They suggest a physical space • Good tabs • They drawn correctly

29. They were color coded • Ther was a tab selected when you enter the site