jueves, 30 de abril de 2015

Visual Design

We communicate using verbal communication (that can be read or heard) as well as non-verbal (that can be seen). In our world the second one could be called visual communication, a good visual design makes a difference, this mean create a good "visual" communication with the viewer.
For example if you want to buy a magazine, when you come in the newsstand, would you rather buy a magazine that looks nice with an organized content cover, layout colors, etc or would you buy the one that has a simple white cover with an impossible to read typography?
The answer to this question is easy,  the human eye is all around the visual appeal that leaves the audience an impact in their mind, so the one which looks nice. 



'Visual design focuses on the aesthetics of a site and its related materials by strategically implementing images, colors, fonts, and other elements.  A successful visual design does not take away from the content on the page or function.  Instead, it enhances it by engaging users and helping to build trust and interest in the brand' [1].

After reading the above definition from Visual Design Basics (usability.gov), I can say visual design offers a way to utilize every possible visual means to communicate effectively with the intended audience. It relies on the aesthetic values to pass a clear message to the viewer.

As any designer should know, the design doesn't have rules or recipes, you have to think about it a lot depending on each system. Each case require the use of creative thinking to solve visual communication problems, potential points to take into account are: Simplicity, visual consistency, visual metaphors, organization, colour and typography.

SIMPLICITY
"Everything should be as simple as it is, but not simpler." - Albert Einstein

There’s something inherent in human beings that prefers the simple to the complex, something free from complexity or division into parts, subtracting the obvious and adding the meaningful. This point of view is about making something easier to understand.
There is a book which uses a remote control to illustrate four strategies to simplify a product [2].


Remove: Get rid of anything that isn’t essential to the remote.
Organize: Arrange the elements of the remote so that they fit into logical parts based on the person’s mental model.
Hide: Place the most important elements within reach, and hide the others, making them accessible through a cover.
Displace: Pushing some of the functionality to another device, so that the remote isn’t responsible for displaying every possibility.
Also you can see John Maeda's ten laws to test and create an idea of simplicity.

VISUAL CONSISTENCY
From a broader perspective of the visual design of something it is important to maintain consistency and common style among all pages. To ensure that this consistency is met, it is useful to develop a style guide book or to serve as a reference document for the entire development team.

VISUAL METAPHORS
A visual metaphor is the representation of something by way of a visual image that suggests a particular association for a human beign. Humans understand metaphors by intuition, for instance... 

the action of throwing something to the trash is associated by this icon suggesting the trash itself and the action of remove an item from your hard drive.






There is a very widespread questioned issue related with this concept. This issue is the difference between skeuomorph and visual metaphor, What does this strange word means? definition  A classical example of skeuomorphism: Apple’s iCal mimicks texture and layout of a paper calendar, including torn edges, which do not have any function or interactivity. [3] check it in the image below:

Skeuomorphism means an aesthetic overload becoming cheesy and non-functional, that is exactly the opposite of visual metaphors which are useful regarding the mental model of the user.

The skeuomorph paradigm started by Apple has already been abandoned by the major companies over the years.



ORGANIZATION
In order to avoid information overload, the design of each interface should consider user behavior in the visual sweep of the page, distributing information and navigation elements according to their importance in areas of varying visual hierarchy - for example, the upper regions of an interface have more visual hierarchy than the lower ones.

COLOUR / TYPOGRAPHY
Besides the position of each element in the interface, there are other techniques to prioritize information such as: use of size and space occupied by each element to give importance to the visual hierarchy, use of color contrast to discriminate and distribute information, use of typographic effects to emphasize content and use of relief/depth effects to highlight items, etc.

Another important visual aspect of the design is accessibility. In the use of colors, concerning to the last point, must offer sufficient contrast between text and background not difficult to read, and also select color combinations taking into account the visually impaired color perception which might present our users. Another example, by using images in the design for accessibility and comprehensibility, it should take care of their resolution and size in order not to lose context, for instance by minimizing an image excessively.


[1] http://www.usability.gov/what-and-why/visual-design.html
[2] Giles Colborne, Simple and Usable.
[3] Thomas Zhaler, The Truth about Skeuomorphism vs. Flat Design.

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 

lunes, 27 de abril de 2015

Usability Requirements

Within the iterative process, in this post is discussed the step "Specify the user requirements". The user requirements analysis, is the stage where failure occurs most commonly, get right requirements is crucial. Unfortunately, usability requirements are rarely identified by organizations purchasing or developing software. The purpose of this step is to establish usability requirements which can be tested later in the development process. With this goal in mind these requirements can be defined in sufficient detail following different specifications available, such as CISU-R (Common Industry Specification for Usability - Requirements) developed by the USA National Institute of Standards and Technology. (NIST), the PDF version of the specification can be found here.


Talking about quality, there is a concept called "Quality in use", this type of quality is measurable during the effective use of the software product by its users. It is defined as the capability of the software to allow meeting specific goals with effectiveness, efficiency and satisfaction.
With usability specifications can be provided concrete objectives for usability plus usability criteria that can be tested. More information on setting criteria for effectiveness, efficiency and satisfaction can be found in ISO 9241-11: Guidance on usability, and ISO/IEC 9126-4: Quality in use metrics ("Quality in use" is defined in a similar way to "usability" in ISO 9241-11).