Designing Interfaces

Spoiler of the post
What you should know

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/ writting

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)

Basic theories and concepts

"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 at the bottom 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¡

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.

See Jeff Johnson book for more information

Now applying usability concepts
Steve Krug "Dont make me think"
  
This part is in the Designing Interfaces tab