In order to design the body of an application or either the layout for a website, it isn't enough to know about the basic concepts for design like color theory, gestalt laws and some technical skills like illustrator o Dreamweaver. You need to know a variety of concepts and theories of; psychology,Science, basic guidelines, task analysis and other stuff, things in which i will go into more detail ahead.
Well you don't have to be an expert in every single theory or either knows all the the details at once you will get it in the curse. The way i see the digital word that surround us changes sicnificanttly; when i finished the book "design with the mind in mind", i found it to be fun, easy to read and meaningful. Let's see the books used for this post
Table of contents
- Sources(Books)
- Basic theories and concepts
- Steps before sketching the interface
- The eye perceive the brain sees
- Now applying usability concepts
Well you don't have to be an expert in every single theory or either knows all the the details at once you will get it in the curse. The way i see the digital word that surround us changes sicnificanttly; when i finished the book "design with the mind in mind", i found it to be fun, easy to read and meaningful. Let's see the books used for this post
Table of contents
- Sources(Books)
- Basic theories and concepts
- Steps before sketching the interface
- The eye perceive the brain sees
- Now applying usability concepts
Some Book
"Design with the mind in mind"-Jeff Johnson(188pag)
"Psychology for designers"-Joe leech(59page)
"Dont make me thing"-Steve Krug-(203pag)
"Visual thinking for Design"-Colin Ware-(197pag)
"Design with the mind in mind"-Jeff Johnson(188pag)
"Psychology for designers"-Joe leech(59page)
"Dont make me thing"-Steve Krug-(203pag)
"Visual thinking for Design"-Colin Ware-(197pag)
Basic theories and concepts
"Jeff johnson"-Design with the mind in mind-Elseiver 2010 al rigth reserved
Gestal laws
"Jeff johnson"-Design with the mind in mind-Elseiver 2010 al rigth reserved
Gestal laws
- Proximity
- Similarity
- Continuity
- Closure/Complementary
- Symmetry
- Figure/ground
- Common fate
Perception biased on
- The past
- The present
- The Future
The past: our experience- "What you see depends on what you were told to see".johnson book page-1
The present: The current context it is affected by the perception in our senses, recognition, reactivated memories. Johnson book page-4.
The future: our goals-our perception is very influenced in our goals, so we can easily ignore some other things. The brain focused on what we are seeking for. johnson page -5
-to see this check out quickly the image after the jump and search for the hammer, then come back here. try it now."activity by johnson-page-6"
Did you spot the pickax?
- Similarity
- Continuity
- Closure/Complementary
- Symmetry
- Figure/ground
- Common fate
Perception biased on
- The past
- The present
- The Future
The past: our experience- "What you see depends on what you were told to see".johnson book page-1
The present: The current context it is affected by the perception in our senses, recognition, reactivated memories. Johnson book page-4.
The future: our goals-our perception is very influenced in our goals, so we can easily ignore some other things. The brain focused on what we are seeking for. johnson page -5
-to see this check out quickly the image after the jump and search for the hammer, then come back here. try it now."activity by johnson-page-6"
Did you spot the pickax?
Steps before sketching the interface.
-Task analysis
- Conceptual model"task focused"
- Object/action analysis
- Interface based in the results
Task analysis: A series of questions that are related to the users, and the idea of the interface, which are the goals,how many steps,to what target it is.( see my post about task analysis for more of this questions and more info about how to do it).
Conceptual model: A good task focused conceptual model explains the function of the software and what concepts people need to be aware of in order to use it."Jeff Johnson(page-135)".
Usually concept derivate from the task analysis if it's a good analysis.the conceptual model isn't a sketch.
-Object/action analysis: It specify the conceptual objects the interface will have,and actions,Ej: In a calculator interface some object might been Input information, output info, and the action: taping buttons, cheeking feedback and results.
Sketching based on the results. ¡Congrats you have you interface sketch¡
Now applying usability concepts
Steve Krug "Dont make me think"
3 basic laws of Usability
1. Dont make me thing.
2. It dosent matter how many times i have to clikc, as long as each click is a mindless, unambiguos choice.
3. Omit needless words.
Dont make me thing.
A good web page is the one that is self explanatory, that actually make us not to thing how use the web page.
Some things we do (Designers), is because we thing it looks nice or actually we thing adding such things like extra text explaining the action will be better for the users, actually it doesn't it make us thing. Like the example below. Almost it doesn't mean to leave the estetics aside
Making a search button only with text. Search > make us thing if its really a button or only text (almost if its only 2 or 3 segs of doubt)
Adding Ambiguous language or (Geek languages), will make the people doubt about the meaning or even don't understand it. Recognizing what the pages do, where are your interest section what its an add (add= Geek word for publicity) and what are the feature content in a glance is the dream goal. You cant make all to be self explanatory like says Krug but try to the best of you.
-It dosent matter how many times i have to clikc, as long as each click is a mindless, unambiguos choice.
This can be resume like "Much click better than Less clicks", but why?, we maybe thing that if the users have to click less to get to its goal it will be better, but thing if its only 2 click but each click requires thinking and analysis about where this will take to you it will be more exhausting that 4 mindless clicks.
In other sense it will be reduce the risk to commit errors.
-Omit needless words.
The principle thing about this is the happy talk best know like, Introductory talk or Welcome text. Its a long text that have a big space in our home page that people don't read it, maybe after the 2 sentence will be searching about what to do in the page.
Avoiding this will help in such things like, correct use of the web page space, Less home page noise"(Steve Krug)"
- Conceptual model"task focused"
- Object/action analysis
- Interface based in the results
Task analysis: A series of questions that are related to the users, and the idea of the interface, which are the goals,how many steps,to what target it is.( see my post about task analysis for more of this questions and more info about how to do it).
Conceptual model: A good task focused conceptual model explains the function of the software and what concepts people need to be aware of in order to use it."Jeff Johnson(page-135)".
Usually concept derivate from the task analysis if it's a good analysis.the conceptual model isn't a sketch.
-Object/action analysis: It specify the conceptual objects the interface will have,and actions,Ej: In a calculator interface some object might been Input information, output info, and the action: taping buttons, cheeking feedback and results.
Sketching based on the results. ¡Congrats you have you interface sketch¡
The eye perceive the brain sees
The fovea: if you ever had hear about it, well there is always i first time. the fovea is the unique eye spot where we can see at full resolution and it have the size of a coin, the rest peripheral vision is blur.
Peripheral vision: our peripheral vision is like someone with "cataratas", so but it have an important functions movement detection and it helps fovea where to go.
So our peripheral movement detection is good enough to know that someone is coming from the left right so using movements to catch attention is quietly a good tool.
Why we don't have tunnel vision?
We have fast involuntary eye movements, so it seems all things are at full resolution because if we swipe to comprove it we will see it at full resolution.
Why the fovea i so small?
The brain can storage big mental maps about the word that surround us, because is a lot of information, a little spot and a peripheral vision that detect movements and other stuff is enough.
So all this affects a lot our interfaces because in common computer screen the high resolution area is like a circle of 3 cm of its radio, so important things farther we don't see then like errors prompts advertisements or critical information that need to be spotted quickly.
Steve Krug "Dont make me think"
3 basic laws of Usability
1. Dont make me thing.
2. It dosent matter how many times i have to clikc, as long as each click is a mindless, unambiguos choice.
3. Omit needless words.
Dont make me thing.
A good web page is the one that is self explanatory, that actually make us not to thing how use the web page.
Some things we do (Designers), is because we thing it looks nice or actually we thing adding such things like extra text explaining the action will be better for the users, actually it doesn't it make us thing. Like the example below. Almost it doesn't mean to leave the estetics aside
Making a search button only with text. Search > make us thing if its really a button or only text (almost if its only 2 or 3 segs of doubt)
Adding Ambiguous language or (Geek languages), will make the people doubt about the meaning or even don't understand it. Recognizing what the pages do, where are your interest section what its an add (add= Geek word for publicity) and what are the feature content in a glance is the dream goal. You cant make all to be self explanatory like says Krug but try to the best of you.
-It dosent matter how many times i have to clikc, as long as each click is a mindless, unambiguos choice.
This can be resume like "Much click better than Less clicks", but why?, we maybe thing that if the users have to click less to get to its goal it will be better, but thing if its only 2 click but each click requires thinking and analysis about where this will take to you it will be more exhausting that 4 mindless clicks.
In other sense it will be reduce the risk to commit errors.
-Omit needless words.
The principle thing about this is the happy talk best know like, Introductory talk or Welcome text. Its a long text that have a big space in our home page that people don't read it, maybe after the 2 sentence will be searching about what to do in the page.
Avoiding this will help in such things like, correct use of the web page space, Less home page noise"(Steve Krug)"
0 comentarios:
Publicar un comentario