1. INTERAKSI MANUSIA & KOMPUTER
Teknik Informatika
STT Wastukancana

2. Who am I? Meriska Defriani, S.Komp M.defriska@gmail.com
(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

12. IMK
WEB USABILITY

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
It gives us something to hold on to
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 Good 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