Bureaucrats, emailconfirmed
1,221
edits
mental models
(mockups) |
(mental models) |
||
| Line 197: | Line 197: | ||
[[File:UI-Sketch-Flickr-Kyle_McDonald.jpg|thumb|300]] | [[File:UI-Sketch-Flickr-Kyle_McDonald.jpg|thumb|300]] | ||
==Mockups== | ==Mockups== | ||
Mockups are more advanced than sketches: often cleaner and more carefully crafted. Mockups are used for communicating in a team and to see how the elements of your interface play together in the screen layout. They are a graphic representation of what will be visible on the computers screen. So you can communicate your ideas about an application to your team-mates. It is usually decent to just draw the element's outlines - this type of mockup is known as "wireframe" as well. | Mockups are more advanced than sketches: often cleaner and more carefully crafted. Mockups are used for communicating in a team and to see how the elements of your interface play together in the screen layout. They are a graphic representation of what will be visible on the computers screen. So you can communicate your ideas about an application to your team-mates. It is usually decent to just draw the element's outlines - this type of mockup is known as "wireframe" as well. | ||
[[File:Wireframe_Flickr-JoeCrawford.png|thumb|300]] | |||
Like sketches mockups can be drawn on paper. Chequered sheets are useful here cause they provide a grid so your wireframe will look better and organized. | Like sketches mockups can be drawn on paper. Chequered sheets are useful here cause they provide a grid so your wireframe will look better and organized. | ||
There are a couple of tools for creating Mockups like Balsamique. Many people use Visio or OmniGraffle (two popular diagramming applications) as well. | There are a couple of tools for creating Mockups like Balsamique. Many people use Visio or OmniGraffle (two popular diagramming applications) as well. | ||
For Mockups you use in your team or for trying out screen layouts you don't want to waste time on shiny graphics. In contrast to this you may want to do a Mockup to present it to somebody who does not know about the design process and is just interested in how the finished project looks like. In this case you need to spend more time on graphics. Often you can use "Stencils", pre-created Interface-Element collections that are used with the diagramming applications above or an image-editor like Photoshop. | For Mockups you use in your team or for trying out screen layouts you don't want to waste time on shiny graphics. In contrast to this you may want to do a Mockup to present it to somebody who does not know about the design process and is just interested in how the finished project looks like. In this case you need to spend more time on graphics. Often you can use "Stencils", pre-created Interface-Element collections that are used with the diagramming applications above or an image-editor like Photoshop. | ||
[[File:Mockup_Fennec.jpg|thumb|300]] | [[File:Mockup_Fennec.jpg|thumb|300]] | ||
==Prototypes== | ==Prototypes== | ||
| Line 213: | Line 209: | ||
=Basics of Psychology= | =Basics of Psychology= | ||
Interaction Design is heavily influenced by psychology. No wonder - we are dealing with creating things that are used because of the [http://en.wikipedia.org/wiki/Motivation motivations] of the users and are easy to use because it maches the way they [http://en.wikipedia.org/wiki/Cognitive_science think.] | |||
==Mental Models== | ==Mental Models== | ||
The way real world things work is represented in our mind as a so-called mental model. The whole world with all its properties can't get in our mind. It would be too much data and what we percieve is heavily filtered anyway by our senses. | |||
A "good" mental model maintains - despite of the reduction of the real thing - the things that are relevant for the way we deal with the thing the mental model represents. | |||
Lets take an example: The mental model about what the depicted controls do is the same for the most people. The mental model derives from the way the controls looks like and which effect turning them will have. Truning them more makes the room eventually hotter. Because they are turned we suspect a kind of valve working behind of them: turn more increases some kind of opening that allows more heat to flow through. | |||
Because both controls look almost the same it is absolutly no wonder that we assume they work the same way. But they differ. The first one is really a valve. The second one though is a thermostat. It works in a different way: The user sets a temperature. The heat beginns to flow. There is no valve. Its either that no heat gets in or the maximum. If the temperature reaches the level that was set | |||
=Basic Principles& Best Practices= | =Basic Principles& Best Practices= | ||
==Heuristic Evaluation== | ==Heuristic Evaluation== | ||