martes, 28 de abril de 2015

Detailed Interaction Design

Dariel Fitzkee, the famous magician’s magician once stated, “Magic is both in the details and in the performance”. Interaction design is just like that. It is in reality creating a user illusion out of many tiny nuanced, interesting moments. [1]
Today I begin the post with this quote about the book Microinteractions. A recommended book for designers of user experiences which focuses on the little things that turn a good software product into a great one (into a great "user illusion" in the words of Bill).


Once seen the usability requirements, in this step "Produce design solutions to meet user requirements" we have to design interactive products which support a sustainable communication/interaction between people and their daily tasks. This approach focuses on organizing, structuring, and labeling content in an effective and sustainable way. The goal is to help users find information and complete tasks. To do this, you need to understand how the pieces fit together...and for the best placement of these pieces in the system we can use any of these techniques/tools:
Menu trees: Represent the menu navigation structure, the navigation between dialogue boxes or the information architecture of a website. Information architects typically visualize the results of their efforts in a site map diagram (another way to call it).


Navigation Maps: More or less the same concept as in the last case, but this time it is simply used to represent the structure of the different screens (interaction contexts) that an application has. These maps show the potential navigation paths between screens, do not include all possible paths, they are confined to logical and expected paths.  Below an example of a navigation map I did for an iOS app.


Screen Layouts diagrams: Definition of the elements that compose an interaction context and their distribution in the screen, this allocation follows a logical distribution in areas. These diagrams are useful if a platform is strict, as it can be iOS. The figure below shows the interaction contexts of the iOS app.


Card sorting: Technique useful for understanding how users organize the information in their minds (related with the mental model of the user). It works by asking representative users to rank a list of terms in order to know how items relate to each other within the system.
There are two common card sorting techniques: the open and the close card sort. Although card sorting is a very simple and cheap technique you can use, it has some pros and cons, explained here.



Product style guide: Document compiling all the information concerning a software product UI. Detailed design should adhere to a product (GUI or web) style guide.

I can say the more centered detailed UI, the more useful these techniques. You choose which one to use! :-)

[1] Bill Scott, Sr.Director, Paypal 

No hay comentarios:

Publicar un comentario