Escalar el contenido de la interfaz de usuario: una aproximación al diseño multiplataforma

La información o contenidos son transmitidos al usuario a través de diversos canales. Debemos de tener en cuenta los diversos tamaños de pantalla, por ejemplo (véase la diferencia entre la pantalla de un smartphone, un ordenador portátil o una smart-tv).

Pero hay otros dos canales que afectan de igual modo a la comunicación con el usuario que no son de tipo físico, sino más bien psicológico: la memoria y la atención del usuario, el lugar y el entorno en el que el usuario recibe dicha información.

Hablamos de la  HCI o de Human-computer interaction: El canal de comunicación de la máquina depende, por ejemplo del tamaño de la pantalla. Y la recepción de la persona depende a su vez de la atención y memoria que aplica en ese momento.

Artículo de Raluca Budiu: Scaling User Interfaces: An Information-Processing Approach to Multi-Device Design

Fuente: Nielsen Norman Group

Axure: Repeater con elementos drag-and-drop

Ejemplo de un repeater con elementos (filas en este caso) drag-and-drop. Por lo tanto, podemos prototipar una lista de elementos reordenable.

Ver ejemplo

Widget creado por Gregor incluído en los foros de Axure (Axure Forums).

Agradecimientos a Gregor, Shiraluk y a @AcordeDigital

Fuente: axure.com/forum

Configuración Axure para móvil

Configuración por defecto para móvil con Axure 7.

Auto save - Axure

Did you known that Axure makes auto save of the files you are working on? I usually used Dropbox to recover old versions . Now I´ve just realize I don´t need it, because Axure does it for me.

Toolbar > File > Recover File from Backup

Also, you can customize it, programing the backup intervals.

Toolbar > File >Backup Settings

Enjoy it!

;)

Principio de reciporcidad: Dar antes de pedir

Raluca Budiu es investigadora senior en Nielsen Norman Group y co-autora junto con Jakob Nielsen del libro Mobile Usability (lectura rápida y altamente recomendable).

Raluca publica hoy artículo titulado The Reciprocity Principle: Give Before You Take in Web Design donde nos hace caer en la cuenta de la relación "qui pro quo" entre el cliente y el diseñador de un sitio web o aplicación.

Antes que pedir hay que dar: no podemos recibir a nuestro usuario pidiéndole datos personales o permisos a acceso a su dispositivo nada más aparecer. Para que el usuario confié en nosotros, establecer una relación más amable y transparente, es importante hacer peticiones de forma escalonada, según lo va a necesitar y explicando el beneficio que le reporta a él la interacción.

Artículo completo en Norman Nielsen Group:
The Reciprocity Principle: Give Before You Take in Web Design

Axure: How to show numeric keyboard on iPhone?

The way to do this is to specify the Text Field as "Number" in the Properties tab.

You can read all the different text field types here Text Field | Axure

 

Source: axure.com

3 claves para diseñar 'páginas de búsqueda sin resultados'

Cuando un usuario no encuentra el término que busca, tenemos dos opciones: Indicarle sin más que no hay resultados, sin ofrecerle una ayuda. (Lo que provoca frustación al usaurio y podemos perdemos perderlo) o aprovechar la oportunidad y ayudarle en su búsqueda, demostrándole a usuario que queremos ayudarle. Para ello proponemos tres claves:

1. Mostrarle al usuario claramente que no hay resultados que correspondan con el término buscado, sin intentar endosale temas que nada tienen ver con lo que pide.
    
2. Sugerir métodos sencillos que le ayuden a mejorar su búsqueda, proponiéndole alternativas, términos relacionados, etc.
    
3. No burlarse del usuario... sin prestarle ayuda. Una frase ingeniosa puede crear cierta empatía, pero si a la vez no proporcionamos ayuda, puede provocar frustración en el usuario. 

Artículo completo de Kathryn Whitenton en Nielsen Norman Group

Las 10 mejores intranets de 2014

Los equipos de profesionales desarrollando intranets crece de una forma lenta pero constante. Las empresas pequeñas están diseñando las mejores intranets. Además, que la mayoría utilizan métodos ágiles y prototipado, con lo que acortan los tiempos de entrega. Las metodologías ágiles han reducido el tiempo de produción de 26 semanas a 16 semanas en un sólo año.

Artículo completo en Nielsen Norman Group

Caso real: 10 Normas rotas en un proceso de registro

Nielsen Norman Group nos comparten hoy un fantástico estudio de algo tan sencillo - y transcendente - como el proceso de registro en la healthcare.gov de los EEUU.

Son diez errores -con sus oportunos consejos de mejoras- que marcan la diferencia entre un adecuado o un frustante acceso a una web de servicio gubernamental. Estos errores pueden lelgar a conllevar una frustante experiencia de usario y un previsible gasto económico.

1. Permita al usuario conocer el producto antes de pedir que se registre

El obligar al usuario a registrar antes de conocer los beneficios que pueden proporcionarle nuestro servicio, provoca un gran procentaje de rebote.

2. Keep calls to action (CTAs) and other pertinent information above the fold.

Mantenga las llamadas a la acción y la información más importante a primera vista del usuario. El usuario hará scroll, pero sólo le resulta interesante lo primero que le mostramos.

3. Ayude al usuario

Ser lo más claro y conciso posible, ayudando al usuario a comprender un proceso que necesita realizar

4. Número de pasos

Si hay un proceso, es muy positivo indicar claramente al usuario el tiempo que le va a suponer, el número de pasos y en qué paso se encuentra.

5. Use email address as username.

El uso del email como nombre de usuario, simplifica mucho el registro del mismo, y es fácil de recordar.

6. Simplificar los requerimientos de la contraseña

Clarificar y facilitar que el usuario elija una contraseña segura, pero sin complicaciones.

7. Proporcionar al usuario mensajes claros y específicos cuando éste comete un error.

Un mensaje genérico es menos comprensible y específico que el indicar en qué campo del formulario concreto ha cometido un error y cuál es.

8. Mostrar al usuario la contraseña que está escribiendo

No enmascarar al usuario la contraseña que escribe. Permitir que lo haga, seleccionando un checkbox, si lo desea.

9.Eliminar pasos innecesarios.

En el caso actual del registro, no es crítico el configurar una pregunta de seguridad, por ejemplo, para recuperar la contraseña en caso de olvido. Este es un paso que se puede realizar posteriormente o la primera vez que el usario inicie sesión.

10. Simplificar las instrucciones para que sean comprensibles por cualquier tipo de persona

Las instrucciones deben de ser clara, directas y sencillas. El objetivo es que hasta el usario menos experimentado sea capaz de realizar el proceso con éxito.

Artículo completo de Jen Cardello: nngroup.com

Diseñando un Carrusel de fotos efectivo y no la Casa del Terror

Los carruseles pueden mostrar problemas de usabilidad, puesto que el usuario podrá ver a lo sumo el primer frame o ninguno. Hay que asegurarse de poner el contenido importante en otra página del sitio.
Es mejor considerar la opción de un el carrusel estático o una imágen destacada. 

Si opta finalmente por un carrusel, es importante que los botones y enlaces a los siguientes frames o vistas del carrusel, sean claros de entender y fáciles de visualizar.

Artículo completo de Nielsen Norman Group:
Designing Effective Carousels: Create a Fanciful Amusement, Not a House of Horrors

Website Reading: It (Sometimes) Does Happen

Jakob Nielsen’s Alertbox: June 22, 2013 

When web content helps users focus on sections of interest, users switch from scanning to actually reading the copy.

Putting aside direct transactions (such as online banking), user behavior in relation to Internet content is paradoxical:

• Users go to websites for information.
• Users scarcely read anything during an average website visit.

This second point has been well-supported by tons of research over the years:

• In 1997, the world's first study of how users read web content summarized the findings in two words: they don't. Instead of carefully reading information, users typically scan it.
• In 2006, eyetracking research found that users frequently scan website prose in an F-pattern, focusing on words at the top or left side of the page, while barely glancing at words that appeared elsewhere.
• Recent research quantified this finding: given the duration of an average page view, users have time to read at most 28% of the words on the page.

Such research findings have led us to study nanocontent issues, such as how to cram maximal information into the first two words of headlines and links.
Being concise and frontloading keywords with high information scent remain key web-writing guidelines. Still, users sometimes do read more than the bare minimum, and we wanted to find out why.

When People Read

To investigate this phenomenon, we analyzed 1.5 million eyetracking fixations from hundreds of sites. The very fact that users allocated 1.5 M looks to these sites indicates that people actually do consume information on the web.
Case in point: this visitor to a zoo’s website read one paragraph exhaustively:

Gaze plot from eyetracking:
each dot indicates one fixation (when the user looked at something).

Of course, this example also illustrates the usual finding: the user didn't look at lots of information on the page. This was a well-structured page, with clear headlines delineating various pieces of information about a particular type of duck: its range, habitat, characteristics, behavior, and reproduction. In this case, the user was interested in the duck's behavior, so she read that paragraph in depth, while treating the other paragraphs to ruthlessly abbreviated scanning.
It's good that the user could focus her attention on the information of interest and ignore the rest. When we see people read on websites, it's usually because the site meets two usability goals:

• Good information architecture (IA), with clear navigation that allows users to quickly get to a page that's relevant to their interest. If users are bogged down by slow or misleading navigation, their interest peters out — as does their motivation to read much once they finally arrive on the desired page. Furthermore, each page should be clearly signposted, with a good heading and other design elements that signal that this is indeed the page users need.
• Good page layout that quickly guides the eye to the relevant part of the page, utilizing well-written subheads to summarize the information in each segment (as in the zoo example).

Importance of Being First

In the eyetracking example from the zoo’s website, the user read the page’s 4th paragraph because it contained the target information. In general, though, users pay the most attention to information at the top of the page.
The following table shows the percentage of users who looked at a paragraph relative to its sequential location in the body text:

Position from the start of the text	Users who looked at the paragraph
1	81%
2	71%
3	63%
4	32%

This table counts only whether a user looked at a paragraph — that is, had at least one fixation within it. Quite often, such looks were part of a scanning strategy that didn’t lead to actual reading unless the content was deemed interesting.
As the table shows, the first 3 paragraphs all got a decent amount of attention, but it's striking that only 32% of users looked at the 4th paragraph.

The Value in Being Second on SERPs

Users behave in much the same way when viewing a SERP (search engine results page). It's extremely well documented that the first SERP hit gets disproportionally many clicks; few users ever even go past the first page of results.
Users tend to focus on the top hits, but they do look around a bit more than indicated by their click patterns: 17% of users look only at a single SERP link before they click, yet 42% look at the second and/or third hit.
Of course, looking at 3 hits on a page with 10 organic links and a bunch of ads isn’t much, but that's the majority behavior. To the extent that you believe in the branding value of people seeing your entry even if they don't click it, there's decent branding to be had from appearing as hits #2 and #3 in major search engines.
There's even some branding value in appearing further down the first SERP, because 12% of users look all the way to the bottom of the page. (Only 2% look at search results beyond the initial page, so there's minimal branding to be had — and even fewer clicks — if you're not on the first page.)
As when reading body text, user interest drops off quickly on SERPs: 18% of users look at the 3rd organic link, but only 8% make it to the 4th link. (All these numbers indicate is whether users' eyes fixated on the link, not whether users clicked it; clicks are even more concentrated toward the top.)

Good IA, Good Layout, Good Writing

As I mentioned earlier, helpful IA and effective page layout are key to getting users to read your copy. However, our eyetracking data also detected a third ingredient for converting users from scanners to readers: high-quality writing.
Sorry, no real surprise — although we’ve identified 83 detailed guidelines for web content, they really boil down to that. Having guided people to your content, it must be good.
But good web content isn’t just about excellent prose. Quality digital content goes beyond print needs to include clear headlines and other elements that help users save time by focusing their scanning eyes on information that they actually want to read.

Full Report

Full eyetracking report on how users read on websites is available for download: 355 pages with 83 writing guidelines.

Souce: nngroup.com

Web Form Design: Filling in the Blanks

Web Form Design: Filling in the Blanks
Luke Wroblewski

 Comprado en: amazon.com

The Best Way to Align Buttons on Different Forms

Have you ever wondered how users react to how you’ve placed your buttons at the end of your form? How you design your button is one thing, but where you place it is another thing to think about. When it comes to placing your form buttons, there are three ways you can do it. You can place them to the left, right or center at the bottom of your form. The way you choose to place your form buttons could have an impact on how users feel about submitting their information to you.

Multi-Page Forms

If your form has multiple pages, it’s best to align your buttons to the right. On multi-page forms, you’ll often have more than one button. You have a ‘back’ button that takes the user back to their previous page, and a ‘continue’ button that takes the user to the next page. Because multi-page form buttons basically act as pagination, the buttons need to follow the pagination conventions that users are most familiar with. Users expect buttons that take users back to a previous page on the left. But they expect a button that takes users forward to the next page on the right. This pattern maps to the user’s left to right reading direction.

Multi-Section Forms

On forms with multiple sections, it’s best to align your buttons to the right. Multiple section forms are often long and consist of many fields grouped together. Aligning your button to the right will present your button as an action that affects the entire form, not just a single section on the page. If you align your button to the left, it’s easy for users to mistake the button as an action that only applies to the last section of your form. Placing your button on the right tells users that the button is a system-wide action that applies to every section of the form.

Left and Center Alignment

At this point, you are probably wondering about when you should align your button to the left or center. Left aligned buttons work best for single page forms. Single page forms are often shorter than multi-page and multi-section forms. When you align your button to the left on a single page form, it creates a clear and direct visual path to the button that users can’t miss. The association between the fields and buttons are also strong and easy to see.
Center aligned buttons are usually not recommended because they don’t create a strong association with form fields. They’re in a neutral position that isn’t aligned with the left or right edges of the form. Without alignment to the edges, it’s hard for users to see a strong association with the form fields. This can cause doubt and confusion in users causing them to think twice about submitting their information.
The way you place your buttons at the end of your form is important to consider. That button is responsible for submitting the user’s information to you. If it’s not placed in a way that makes your users comfortable, chances are that your users won’t bother filling out your form. The type of form you’re using determines the proper placement of your buttons. Right aligned buttons work better for multiple page and multiple section forms. But left aligned buttons work better for single page forms. Knowing this difference will help users complete your form with comfort and assurance.

Stop Misusing Select Menus

A form has many user interface elements. If you don’t know how to use them all properly, you could make filling out forms difficult for your users. One interface element that’s commonly misused is the select menu.

When to Use a Select Menu

Sometimes you’ll find a select menu with 2 options and sometimes with over 20 options. In both cases, the select menu is used wrong. When you have less than 5 options for users to select from, you should use radio buttons. This allows users to make their choice faster and easier because all they have to do is look at their options and click once. With a select menu, users have to click the menu, scroll to an option and click again. A select menu also keeps the other options hidden until the user clicks it. When you have less than 5 options, it’s better to visibly lay them all out on the form with radio buttons so that users can scan them quicker.

A select menu with over 15 options is just as bad as one with less than 5. When you put that many options in one menu, you’ll slow users down because they’ll have to scan and scroll through the long list. Sometimes the list of options can get so lengthy that the menu takes up the entire screen. When you have more than 15 options in a menu, you should either lessen the amount of options, or use a text field to allow users to enter their own data. An open text field prevents users from having to fiddle with a giant select menu and makes filling out the form faster and easier.

Labeling Select Menus

Like other form elements, a select menu should always have a label next to it. However, you should also have a label inside the select menu that tells users what they’re selecting. The label should clearly and distinctly describe the group of options. A generic label such as “Please Select” isn’t clear enough for accessibility users who use screen readers to fill out forms. Adding a label outside and inside the select menu allows all users to take action quicker without any confusion.

When to Use a Default Select Menu Option

Most of the time, you should avoid giving users a default menu option. This is because if users fill out the form and accidentally miss the select menu, the wrong option could get submitted. It’s safer for users to get an error message for not selecting an option than to submit the form with the wrong option. The only time you should give users a default menu option is when you are certain that over 90% of your users will use that option. This saves the majority of your users time from having to mess with the select menu.

Grouping Select Menu Options

If the options in your select menu have a hierarchy, you should split them into groups using the optgroup tag. This allows users to find the option they want quicker by scanning the group labels instead of every single option. Users won’t be able to select the group labels. They’re only there to give the menu hierarchy and make scanning options easier. Accessibility users also won’t confuse group labels as options because screen readers can’t read them.

Using Select Menus for Navigation

Select menus are mainly used on forms, but sometimes they’re used for navigation. Some websites will use a select menu to allow users to filter or sort page content. When users select an option, they will navigate to a new page. This approach is accessible to screen readers only if users can tab to the select menu and move through the options with their arrow keys without navigating to a new page. The select menu should only navigate to a new page when the user hits enter. A small minority of screen reader users will have Javascript turned off. In order for select menus to work with Javascript turned off, you need to have a submit button next to it. Users will navigate to a new page after they select an option and hit the button.

Select Menus are Best for Forms, Not Navigation

Although you’ll see select menus used for navigation, it is recommended that you only use them for forms. Mobile websites will often use a select menu for their main navigation to save space. However, there are problems with this approach that affect usability, accessibilty and SEO.

At first glance, a select menu for the main navigation doesn’t cosmetically look right because it doesn’t blend in with the site design. It feels awkward because once you click it, you’ll get the spinning wheel used for picking options on mobile forms. Users have to tap the menu, flick their finger to the right option and press the “Done” button, which is a lot of work. Not to mention, the “Previous”, “Next” and “AutoFill” buttons aren’t even applicable in this situation because you’re not filling out a form.
Users won’t be able to use your select menu navigation if they have Javascript turned off. This is an issue for some screen reader users. A more accessible menu is one that opens the menu when the user tabs to it, and allows them tab through the different options. This can only work if the options in the menu are real links. This is also the same reason select menus don’t offer any search engine optimization benefits. If you want to optimize your navigation for search engines, avoid using a select menu for your navigation and offer users a dropdown menu with real links.

Stop Misusing Select Menus

There are a lot of misused select menus on the web. This happens when people lack a basic of understanding of how to use them. Now that you know, you can help put an end to it by making sure


Source: uxmovement.com

Pass variables a otra página en Axure

Variables Tutorial

Pass Text to Next Page

This Variables tutorial shows you how to pass text input from one page and display it on a linked page.  It uses variables and the OnPageLoad event.

This zip file contains the RP file needed to complete this tutorial

Pass Entered Values from Page to Page

Step 1: Add OnClick case to Submit button 

 

First, open PassTextToNextPage.rp and open the "Pass Text to Next Page” page.

Select the Submit Button in the wireframe and add a case to the OnClick event. This opens the Case Editor dialog.

Step 2: Store Namefield text in a variable

In the Case Editor, add an action to "Set Variable/Widget value(s)" and click Open Set Value Editor.

In the Set Variable and Widget Values dialog, set "value of variable OnLoadVariable equal to text on widget NameField". This stores the value entered in the NameField text field in the variable OnLoadVariable.

Click OK to close dialog


Step 3: Add action to open Page 1
 
 

With the Case Editor still open, add an action to the existing case to "Open Link in Current Window" and choose Page 1. It's important to note here that this action needs to come AFTER setting the variable value--if we opened the page first, the variable value would never be set. Click OK to close the Case Editor dialog.

Clicking the Submit button will now set the variable to whatever the user enters in the text field, and open Page 1.

 Step 4: Add OnPageLoad case to Page 1

Next, open Page 1 from the Sitemap pane. Here, we want to insert the text value stored in the OnLoadVariable into the welcome text on the page.

In the Page Interactions tab of the bottom pane, add a case to the OnPageLoad event.

 Step 5: Set text on Welcome Text Panel widget

 

In the Case Editor, add an action to "Set Variable/Widget value(s)" and click Open Set Value Editor.

In the Set Variable and Widget Values dialog, set "text on widget Welcome Text Panel equal to value" and click Edit Text.

 Step 6: Insert variable value to text

 

In the Enter Text dialog, place your after the "Welcome " text. In the Insert Variable or Function dropdown menu to the right, choose OnLoadVariable. This inserts [[OnLoadVariable]] to the text. Whatever value is stored in the OnLoadVariable will replace this text.

Click OK to close the open dialogs.

 Step 7: Generate the prototype 

 
 Generate your prototype and test it out. Clicking the submit button sets the value of the variable, opens the next page, and inserts the value into the Welcome text.

The Round Up
Did you pass the test for passing text?

Still need help? Check out the forum or drop us a line at support@axure.com.

Vía: @mvertigo
Fuente: axure.com

UX StrategyDesigning For The Multifaceted User

By Stephanie Troeth ,March 12th, 2013

 

Designing with users in mind is a tricky thing. Not only does it require of us a sound understanding of who our users are, but the actual act of translating what we know about them into a well-designed product is not always an obvious or easy path. 

Currently, our user experience tools tend to focus on “who” users are. I believe this is a hangover from how we traditionally approached marketing and market research. A couple of years ago, I stumbled across a somewhat different method, which has proven useful in a few of my own projects. It has been particularly handy for building value propositions and for clarifying assumptions we make about our users’ behaviours. Most of all, I like how it helps with prioritizing product design decisions.
So, first, let me explain where I think our current toolset falls short, and then I’ll walk you through an example that uses this newer technique. By the end of this article, you should be ready to give it a try yourself.

(Smashing’s note: If you enjoy reading our articles, you'll love the Smashing eBook Library. Get immediate access to all Smashing eBooks with 70% discount and vote on the topics you’d like to learn more about. We’ll prepare eBooks that fit your needs best! Subscribe now!)

We Are Multifaceted

Put yourself in the shoes of a user for a moment. Imagine that a friend has introduced you to a new Facebook group about a subject you both like. If you are the shy sort, like me, you would lurk around for a little while. Once you became more familiar with the group’s dynamics, you might gradually become bold enough to post a comment or share an appropriate link.
Imagine also, then, that you’ve stumbled upon a blog post on a topic that you care strongly about. Someone has posted a comment that you completely disagree with — I’ll wager that, if you’re fired up, you would post almost immediately, rather than take the time to absorb previous posts. You remain the same person, yet your reaction to something will depend on what it is and what is happening at the time. This is normal.

Acting differently according to circumstance and context is natural. Image source.
What does this mean for us as designers? For me, it means that our deliverables right now are probably too prescriptive in their details about who the user is. We would probably do better to work towards a clearer understanding of the user’s varying contexts — contexts that would yield different behaviors and decisions.
In short, our current tools tend to focus on the person, not on predicting their reactions and, therefore, what we should effectively be designing for.

Personas, User Journeys, Mental Models?

Personas, when created properly based on research, distill what we know about a few key user profiles. They have many advantages, particularly in enabling a common language among stakeholders about who our users are. User journeys and experience maps show a potential path that a user can take through an application or website. They are great for understanding flows and for mapping user needs to functionality.
However, both of these tools, and others similarly derived, take on a depth-wise view of the user. User journeys can map out specifically what a user may do, too, but not take into account why they make certain decisions. With personas, you garner some degree of knowledge about users’ background contexts and activities, but they might contain more detail about particular user profiles than what you need to design app-wide features.
Consider what is actually involved in your typical design process. At any stage, your design needs to cater to different activity flows. As designers, we often have to collapse a complex range of user behaviors into quantifiable feature sets that could feasibly fit a product management schedule.
Between personas and user journeys, it would get unwieldy to explore and map these complex ranges of behavior in a way that wouldn’t give us a headache. The closest tool we have at our disposal is the mental model, with which you map out a user’s intentions and tasks. However, a generic use of mental models doesn’t always take different contexts into account at a glance.
The question remains, how can we better position a product or design an interface that maps onto users’ decision patterns when their behaviors and motivations span a spectrum?

Modelling User Groups

I finally found a semblance of the method I’d been looking for while gate-crashing a guest lecture by a friend and colleague, David Rollert, a designer with extensive experience.
Holding a roomful of smart design-engineering students at his attention, David showcased a number of user experience tools that day, including a way to model groups of users. Using a dating website as an example, he explained how we can define key “dimensions” of customer groups (figures 1 and 2 below). This first step is not dissimilar to what we often already do when creating personas. The following diagrams are quoted from David’s slide deck, with his blessing.

Figure 1. Demographic dimensions for a dating service.

Figure 2. Psychographic dimensions for a dating service.
This next step is where we start to look for patterns. Then, picking two of these dimensions, he showed an example of a 3 × 3 matrix where you could map someone’s immediate goal relative to the role they preferred to play (figure 3). In order to fill in the matrix, David asked the question, “What does each group need?”

Figure 3. Mapping target customers: What does each group need?
A similar technique of user modelling is mentioned in A Project Guide to UX Design by Russ Unger and Carolyn Chandler (chapter 6, page 90), but it barely spans a page. While emphasizing the need for real user research, this reference still aligns with what we’ve always done — grouping users according to who they are, rather than what the users want to do or what drives them.
I thought it was fascinating. Rather than asking the question of “who” these customer groups are, what if we were to ask different questions? Such as, “What do these groups of users want to do?” or “What do they need to know?” Over my next few projects, I started incorporating this technique into my own work with clients, and it has turned out to be a useful tool on many occasions.
Before getting much further, I want to point out that this method is not a deliverable. It is not something you just draw up and send over to your client or product manager for sign-off. It is a technique that is most effectively used in a workshop format with all stakeholders in the same room.

Exploring Our Assumptions About Users

“User” has become such a loaded word. We pile all our beliefs, interpretations and emotional baggage onto the word “user” and on what they would want. Having been on many teams, I’ve started to realize that it’s a common problem that not all stakeholders and team members understand the word “user” in the same way. This is why having a set of personas internally can help iron out the issue of language.
However, the problem with personas is that they place a particular user on a map discretely, but they are not necessarily the best high-level tool for looking at continuous spectrums of user contexts.
The matrix technique explores what we know and what we don’t know about our users by looking through the lens of contexts for their behaviors and motivations.
I’ve used this method to do the following:

• to establish key audiences;
• to understand or validate value propositions;
• to help prioritize research areas and product features — to identify what we already know and where we lack data;
• to pinpoint which features are vital.

It is essentially a structured brainstorming tool to make sense of user patterns. Best of all, it can be an easy way to unpack assumptions that each stakeholder is making about their users.

Step 1: Draw Your Matrix

In the many times I’ve since done this little thinking process with clients or workshop attendees, a 3 × 3 grid has worked best for me. This is probably because it gives enough variation without being too precise — thereby keeping us from getting analysis-paralysis.

Figure 4. A blank matrix.

Step 2: Identify Important Axes

The next step is to identify how many of these different “selves” of our users can exist in this system we are designing for.
Let’s talk about the example of a potential social app for runners. It’s a straightforward offering with which local runners can post routes and visiting runners can find routes. We could imagine virtual competitive elements; a runner might have previously posted a time that you are trying to beat on the same route. Or you might just want a scenic run as a way to explore a new city’s environments.
What kinds of behavioural attributes can we come up with for runners who would likely use this app? I tend to think in terms of “opposing” attributes. You might end up with a list looking like this and the corresponding user stories:

• explorative
  “I want a new way to experience this city through running.”
• competitive
  “I like to race against someone else, or against myself.”
• frequent
  “I run a lot, several times a week to every day.”
• occasional
  “I run once a week or less.”

Your axes might then look like this:

curious	↔	engaged
social	↔	individual
explorative	↔	competitive
frequent	↔	occasional
visitor	↔	local

Depending on the project you are working on, you may or may not know something about the users you are talking about. The team with which we explored the idea of this social app belonged to a sports shoe company and consisted entirely of runners who travel fairly frequently to run marathons. They had also done studies previously and gotten some ideas of the spectrum of novice runners to advanced runners, and some insight into the kinds of people who use an existing Web app that they produced.
As you go through this exercise, keep in mind what you know about your users and what you are presuming. From the list above, choose two axes that most interest you or that you think are worth exploring. Choosing might be difficult if you are just starting with this method; in which case, the best thing to do is to dive in and see what happens. If it doesn’t work or if ideas don’t seem to flow, change your axes and keep going.

Figure 5. A blank matrix with a pair of key axes.

Step 3: Identify Key Questions

I liken this step to a “magic 8 ball” process. Ask a question! I generally like, “What would these users want to do?” Or, even more simply, “What do they want?” The latter question would cover what users want to know and what they would want to do. You could also ask questions like, “How would they feel?” as a kind of emphatic exercise.
As you think up questions, keep a list handy. You’ll need it later.
In this example, let’s stick with “What can they do?” Or, from a user’s perspective, “What can I do with this app?”

Figure 6. A blank matrix with axes and a question.

Step 4: Fill It Up

Fill in the matrix as best you can. If you already have some insights from research, then mark which things you know for certain, as opposed to things you believe to be true but have nothing yet to back it up.
Generally, by the time you’ve filled the first matrix, you’ll have a fairly good idea of what information you already know about your users and what further research might be required.

Figure 7. Filling in a matrix.

Step 5: Iterate

Once you are done with the first matrix, set that aside, and draw another blank grid.
You can do one of two things:

1. Pick another question from your list, “What do these users need from us?”; or
2. Switch one of your axes to something different, but stick to the same question.

Start filling in the matrix again from the top. Remember, this is a brainstorming process. Putting down ideas that you can refine later is more important, so try to move rapidly through each iteration.
When you have done as much as you can with this iteration of the matrix, do the dance again: pick another question, or switch another axis.
It’s best when your team collectively chooses which questions and spectrums to think about.
Rinse and repeat. You’ll likely find that you can generate a lot of matrices in the space of just an hour, even if it may be a slow start at first.

Analysis And Key Insights

Once you have done a few of these, it is time to sit back and look for patterns. Let’s look at a few things that could emerge.

Assumptions vs. Knowledge

One important thing to remember — I cannot emphasize this enough — is when you and your team sit down and write this all out, what you have is merely a summary of a complex set of assumptions. As you manage your discussions around any insights, keep in mind that you are discussing various degrees of potential truth. This is an handy tactic to avoid getting into fights about too much detail!
With your matrices in hand, now is a very good time to see which set of users we already know about, and how confident we are in stating their needs. Obviously, it is also a very good time to identify which users we know nothing about. Have we already done any research on any of these user groups? Do we have any case studies that back up any of the answers we have listed in the matrices? In short, what do we know, and what don’t we know?
If we don’t have any evidence at hand to back up some of these user needs we have written down, then these are merely assumptions that we need to test. Assumptions are great because they serve as perfect design hypotheses. With this set of matrices, we can now identify what kind of user research we need to undertake to validate our assumptions.

Common Factors

Quite often you’ll notice that some questions generate similar results all the way down one column or one row. For example, in figure 7, we assumed that all “exploring” users would likely be interested in finding new routes regardless of whether they are locals or visitors and, similarly, that all “competitive” users would likely be interested in time-keeping.
Nothing is wrong with this; it just means that when we come to test for these needs, we will have some parameters to decide what kind of users we need to talk to. And when we come to design for these scenarios, these features will likely represent the “baseline” functionality to include in our app.

Priority and Dependencies

Sometimes, when you are trying to prioritize features, the practice of generating these user matrices can help you unpack some clear dependencies. In the case of our app, it became clear very quickly that the type of users who would populate the routes in a meaningful way would be locals — before being used by visitors. This means we needed to make the app attractive to local runners first, from all standpoints: in our feature set, in our communications and in our marketing.

Core Value Proposition

“Value proposition” is just a fancy way of describing the promise of the value you will be providing to customers. When you work through a set of matrices, you might find that you have a clearer view of what you are really promising users by addressing the ranges of users’ needs and contexts.
As for our little example, we had done a handful of matrices in less than an hour. Suddenly, one of the team members shouted excitedly, “‘I wish I knew where to run!’ That is the question we need to answer!”
I handed her the pen, and she scribbled the figure below (8) at the bottom of our last matrix. We knew then that, for this app to succeed, we would have to be able to answer this question, no matter what the user’s context — and that would be our core value proposition at its rawest. With this, we now had an excellent focus on the reasoning behind the design, and we’d just given ourselves a clear fundamental principle through some bottom-up thinking.

Figure 8. Value proposition.

Taking It Further

So, we have a set of matrices on our hands and some high-level analysis and insight. What next?
First, as with many workshop tools that encourage structured brainstorming, the process is as important as the result itself, possibly more so. As I stated in the beginning, this process doesn’t generate a pretty formatted deliverable — rather, it clarifies how we really think about our users.
Having gone through the process of generating these matrices and analyzing them, you should find that you can take on subsequent challenges with more clarity:

• Decide which user groups require more research, from which you can generate personas, mental models and user journeys for more detailed tasks, if required.
• Establish a product road map based on having identified which needs should be met across user groups, so that you can decide which features to design and build together.

One happy little byproduct of expressing user needs through such matrices is that you can delineate each of them into a corresponding user story, which fits nicely into an agile methodology. Using our app again as an example, we can create a user story like, “As a local runner, I want to find new routes to run.” You could then decide whether that user story is a validated user need; if so, you could transfer it into a design-then-build process.

When Does It Work Best?

I’ve successfully used this method in conjunction with others when I help startups figure out how to approach their user base, and also what they ought to build first. It fits neatly into methodologies such as the Lean Startup because it creates a structured basis for generating hypotheses. I’ve found it to be excellent both as a preliminary thinking tool to facilitate design decisions and as a synthesizing tool in the process of user research.
No doubt, as you explore this method, you may find other ways it works for you, or not at all. You could say that there is the right tool for every job, but sometimes the best tool is the one that gets the job done in the simplest and quickest way.
In this case, we have a very simple way to enable us to think about the ranges of user behaviors and motivations — while keeping their contexts in mind.

Further Reading

• Mental Models: Aligning Design Strategy With Human Behavior, Indy Young
• A Project Guide to UX Design, Russ Unger and Carolyn Chandler
• “User Stories: A Strategic Design Tool,” Penny Hagen and Michelle Gilmore
• User Stories Applied for Agile Software Development, Mike Cohn
• The Lean Startup, Eric Ries

Acknowledgements

Many thanks to David Rollert, who sparked the idea for the approach described in this article, and who I hold wholly responsible for opening my eyes to better ways to achieve great user experiences.
(al)

Tags: GuidelinesProcessUser Research

Stephanie Troeth User experience strategist, designer/researcher. Jewellery artist, photographer, improvisation musician, urban gardener, slow food aficionada, polyglot. Independent researcher on the perception of immigration and cultural bias. Lived on four continents, on four islands. Currently living in London, UK.

Source: uxdesign.smashingmagazine.com

Banner Blindness: Old and New Findings

Jakob Nielsen’s Alertbox: August 20, 2007

Summary: Users rarely look at display advertisements on websites. Of the 4 design elements that do attract a few ad fixations, one is unethical and reduces the value of advertising networks.

I've been reluctant to discuss one of the findings from our eyetracking research because the conclusion is that unethical design pays off .
In 1997, I chose to suppress a similar finding : users tend to click on banner ads that look like dialog boxes, complete with fake OK and Cancel buttons. Of course, instead of being an actual system message — such as "Your Internet Connection Is Not Optimized" — the banner is just a picture of a dialog box, and clicking its close box doesn't dismiss it, but rather takes users to the advertiser's site. Deceptive, unethical, and #3 among the most-hated advertising techniques . Still, fake dialog boxes got many more clicks than regular banners, which users had already started to ignore in 1997 .

Can't Hide Usability Findings

After much soul-searching, I've now decided to take a different approach and publish our new findings, despite their ethical implications. In reality, it's not possible to suppress research results because anybody who bothers to run the study will get the same findings. There are no secrets of usability any more than there are secrets of astronomy. If you point your telescope at Saturn, you will see that it has rings. And, if you conduct a series of usability studies, you will discover the same insights as we do — assuming you employ the correct methodology.
Many people without a grounding in behavioral user-research principles use bogus methodology and thus get misleading findings. Poor methodology is especially common for eyetracking studies , and thus most published studies in this area are wrong.
For example, unskilled researchers often ask users to simply look at a page, rather than have them encounter it as part of a task flow. Users naturally look at things differently depending on the context. For example, if you want to know how users look at the elements of a form, you can't just present the form on a stand-alone page and ask them to fill it out. Instead, you have to present the form in the context of a meaningful task that they might attempt in the real world. That is, users should encounter the form in response to particular actions, such as deciding to check out from an e-commerce site.
Still, even though most eyetracking studies are misleading, some studies do produce valid results. Trying to keep any results a secret is thus a lost cause.
Most of our eyetracking findings on Web advertising present no ethical dilemmas. For example, we know that there are 3 design elements that are most effective at attracting eyeballs :

• Plain text
• Faces
• Cleavage and other "private" body parts

I don't have a problem presenting details of these findings in the seminar on Fundamental Guidelines for Web Usability ; it's important that all Web designers know where users look on pages.

Banner Blindness

The most prominent result from the new eyetracking studies is not actually new. We simply confirmed for the umpteenth time that banner blindness is real . Users almost never look at anything that looks like an advertisement , whether or not it's actually an ad. (Indeed, banner blindness is moving beyond the online realm, for example into ballot design .)
On hundreds of pages, users didn't fixate on ads. The following heatmaps show three examples that cover a range of user engagement with the content: quick scanning , partial reading , and thorough reading . Scanning is more common than reading , but users will sometimes dig into an article if they really care about it.

Heatmaps from eyetracking studies: The areas where users looked the most are colored red ; the yellow areas indicate fewer views, followed by the least-viewed blue areas. Gray areas didn't attract any fixations. Green boxes were drawn on top of the images after the study to highlight the advertisements.

At all levels of user engagement, the finding is the same regarding banners (outlined with green boxes in the above illustration): almost no fixations within advertisements . If users are looking for a quick fact, they want to get done and aren't diverted by banners; and if users are engrossed in a story, they're not going to look away from the content.
The heatmaps also show how users don't fixate within design elements that resemble ads , even if they aren't ads (and thus aren't shown within green boxes above).
Even when we did record a fixation within a banner, users typically didn't engage with the advertisement. Often, users didn't even see the advertiser's logo or name, even when they glanced at one or two design elements elsewhere inside an ad.
The following video clips show a gaze replay of one user's eye movements while looking for advice on how to invest for retirement. (The moving blue dot shows where the user is looking.) The page contains an ad for retirement accounts at Fidelity Investments, a site that offers good advice on the target topic and might therefore help users who click the ad.
Real-time speed (19 seconds — and yes, the eye really does move this fast when users view web pages):

Slow-motion replay (1 minute — slowing things down is the only way to really follow users' gaze patterns):

As the replay shows, the user did fixate once within the ad, but at that moment, the ad is obscured by a pull-down menu. In reality, the user couldn't see the message; the fixation was clearly a mistake that occurred while she was trying to reacquire the menu after briefly looking away from the screen. All of this occurs so quickly that you probably need to review the slow-motion replay to follow the action. (This is typical for eyetracking: the eye moves so fast that our best insights come from watching slow-motion replays.)
(Several readers have asked whether banner blindness extends to search engine ads. It doesn't: text ads on a SERP get a decent number of fixations. The other exception is classified ads. Finally, it's possible that commercials that are embedded within a video stream get viewed; we haven't researched this yet. So there are either 2 or 3 exceptions to the general rule that users avoid looking at ads on websites.)

The Fourth, Unethical, Path to Ad Fixations

In addition to the three main design elements that occasionally attract fixations in online ads, we discovered a fourth approach that breaks one of publishing's main ethical principles by making the ad look like content :

• The more an ad looks like a native site component , the more users will look at it.
• Not only should the ad look like the site's other design elements, it should appear to be part of the specific page section in which it's displayed.

This overtly violates publishing's principle of separating "church and state" — that is, the distinction between editorial content and paid advertisements should always be clear. Reputable newspapers don't allow advertisers to mimic their branded typefaces or other layout elements. But, to maximize fixations, that's exactly what you should do in a Web ad.
A specific ad may or may not be ethical, depending on how closely it masquerades as content. I caution against going too far, because it can backfire and mislead users . Unethical ads will get you more fixations, but ethical business practices will attract more loyal customers in the long run.
Now the truth is out. As far as I'm concerned, speaking the truth is my highest ethical calling, and it's better that the facts be known to everyone than that they remain a secret abused by a few.
Ultimately, the fact that online ads get viewed more when they match surrounding content is a strike against the tendency to build advertising networks . If advertising spots are simply auctioned off, then you can't design an optimized ad for each placement.
When you advertise through an advertising network, your ads will get fewer fixations than if you contract directly with the publisher for a specific placement and design your creative to fit that spot. As a result, you should bid less for network ads than for customized ads that you place yourself.

Topics:

• Advertising
• Eyetracking

Learn More

Articles

• Search Engines as Leeches on the Web
• The Most Hated Advertising Techniques
• 8 Steps to Prepare for the Holiday Shopping Season
• Making Web Advertisements Work
• Will Plain-Text Ads Continue to Rule?

Source: nngroup.com

You look where they look

People look at other people’s faces.


In this video I showed that even my 11 month old son, Benjamin James Breeze, looks straight at faces shown to him in Facebook! It is habitual.
Did you know that the images of faces that capture people’s attention can be used to guide people around a website or an ad? I thought it was obvious! However, when I was representing Objective Digital at ad:tech Sydney 09 last week I mentioned it to people, and they were amazed! I realised it was worth posting about it!
Here’s a little experiment with 106 people that I’ve demonstrated the Tobii T60 eye tracker to over the last month or so.
The image below is a sample gaze path of one person looking at a baby in a product ad:

The blobs are where the person has fixated on the image. You’ll notice the person starts looking in the middle of the page (we planned it that way by using a fixation cross between each stimuli)  and then goes straight to the baby face.  He focusses on it a few times then moves his attention over to the text by his 7th fixation.
And here’s an image of that same baby looking up and toward the main content heading. Notice the person fixates less on the baby’s face and then he quickly looks straight over to the text at the 5th fixation.

One person you say?
Well, here’s a combined heat map of 106 people looking at the first image. The redder the spot, the more time people looked at it.

There is heaps of focus on the baby’s face and relatively little on the text.
Here’s the same 106 people looking at the second image for  the same amount of time (The images were shown in a to everyone in a random order on Tobii Studio software running with a Tobii T60 eye tracker).

Notice how many more people are actually reading the text that the baby is looking at in the above image? Not to mention the increased attention on the brand!
In advertising we will look at what the person we see in an ad is looking at.  If they are looking out at us we will simply look back at them and not really anywhere else.
Faces can be used to guide a person’s attention to key content and make sure they actually read it.
What are you looking at?

Source: usableworld.com.au

Axure: como hacer que se borre el texto predefinido en un formulario cuando el usuario empieze a escribir en él

El ejemplo más común es cuando creamos un formulario de búsqueda, por ejemplo. El campo del formulario tiene escrito 'Buscar' por defecto. Pero queremos que cuando el usario comience a escribir en el mismo, desaparezca el texto 'Buscar' y aparezca sólo lo que el usuario escriba.
Para ello el formaulario debe de ser un dinamic panel y le damos la siguiente orden en el 'onKeyUp':

set text on widget (nombre de nuetro formulario) equal to ""

Free Wireframing Kits, UI Design Kits, PDFs and Resources

To mock-up the user interface of a website, software or any other product, you’ll need some basic UI elements. And this is where wireframing kits and UI design kits come in handy. When you want to create a low-fidelity prototype for your projects, you can use these kits to give your idea a certain shape, keeping it abstract and not losing yourself in details.
In this post, we’ve prepared an overview of useful web and mobile user interface kits, handy PDFs and resources that you can use in your projects. We’ve carefully selected the most useful kits and resources to get you going in the early stages of a project.

(Smashing’s note: If you are looking for a good book on mobile, this is the one. Our brand new book on best design and coding practices for mobile, Responsive Web design and UX design for mobile. Get it now!)

Free Mobile GUI PSD

Android GUI PSD
This Android GUI PSD is based on elements of the Android 1.5 GUI and was made to help the open-source community with its Android application mock-ups. Most of the elements and phone illustrations are done in vector paths and so are easily resizable. Android Sans was used for the text.

RIM Blackberry PSD
A complete PSD file with layer styles, this has 135 layers of Photoshop goodness.

Android Sketch Stencil Version 1.0
A Sketch-style Android OmniGraffle template. The purpose of the sketch style wireframe is to prevent the audience from thinking about visual design and encourage them to focus instead on functionality and behavior.

All elements of Maemo 5 GUI in PSD
This downloadable PSD file contains GUI template elements for the Maemo platform. These are indispensable for prototyping GUI applications running on Maemo devices.

iPhone 4 GUI PSD (Retina Display)
GUI PSD kit for creatives who design for the retina display (640×960). The file is huge, both in file size (62.7MB) and dimension (4074×2986). You’ll need to work at 25% – 50% even on the largest screens to roughly grab elements before zooming into 100% for the actual work.

iPad GUI Kit in PSD
This version offers a canvas size true to the iPad at 768×1024. In addition, most of the graphical elements are provided in vector format, allowing you a lot of room to scale up for high-resolution presentations. This version is layered in Photoshop, making it easy for you to go nuts with your mock-ups and client presentations.

Android 1.6 Wireframe stencil for Omnigraffle
Download this beautiful wireframe stencil add-on for OmniGraffle 5.x. Use this toolkit to wireframe Android-based apps and websites on the 1.6 Donut SDK.

Google Android GUI PSD
Here are the GUI elements of Android, built using vectors to scale.

iPad GUI PSD Kit
This pack includes full size graphics, as well as 256, 128 and 64 pixel icon sizes. The pack includes four sizes of the iPad graphic in PSD, PNG and Mac ICNS formats.

Google Android PSD
A stencil set for Google Android prototyping.

Fireworks template for Android
In this Fireworks template, Android UI elements have been redrawn as vector images. In the folders, the elements have been mostly labeled according to the Android vocabulary.

Sexy Vector Cell Phone
This phone can be scaled to any size. Easily add your own image to the screen with the included object mask. All objects are layered, grouped and labeled for easy customization.

iPad Stencil for Omnigraffle
Contains backgrounds, title bars, buttons, selectors and other iPhone UI elements. The text is fully editable in lists, title bars, buttons and scroll wheels.

iPhone App Wireframe Template

Mobile – iPhone

iPhone GUI Elements
Some beautiful iPhone elements. All graphics are layered Photoshop files.

iPad and iPhone Design
Design your application for the iPhone, iPod Touch and iPad with this exhaustive set of stencils. All stencils were created by hand with native OmniGraffle shapes, and groups and can be scaled, resized and exported to other vector formats in Graffle.

Design Stencil for iPhone and iPad
A stencil for designing OS applications for the iPhone, iPod Touch and iPad. The stencil for now is targeted at developers familiar with the default characteristics of the views and controls provided by UIKit.

Apple iPad fully editable PSD
A fully editable Apple iPad in PSD format. Every element you see is editable via vector masks, and everything is scaleable.

Palm Pre GUI PSD
This set contains a PSD to help designers pitch and develop polished concepts using Photoshop.

iPhone UI Vector Elements
Most visuals for applications start out as vector mock-ups in Adobe Illustrator. So, here are some cool iPhone UI vector elements. And there are even a few good Photoshop resources and even a nice OmniGraffle iPhone UI file or two in there.

iPad Vector GUI Elements: tabs buttons menus icons
This set contains almost all of the iPad UI elements, including buttons, tabs, menus, keyboard and balloons. Useful for designers and developers, it includes scalable and totally editable vector versions (AI).

Free Social Networking GUI PSD Kits

Free Full-Layered Facebook GUI PSD Kit
The idea behind this kit is to speed up the prototyping of Facebook application UIs and Facebook fan pages, sparing you from drawing all the comps and letting you customize all the text, buttons and data as you need. The kit is free to use in all projects, without any restrictions.

Facebook GUI Free PSD Resource
A Facebook graphic user interface (FBGUI) resource kit for Photoshop to make your work easier.

Facebook Applications
A sizable collection of elements for creating wireframes for Facebook applications.

Omnigraffle Twitter Widget Stencil
This set includes a selection of useful Twitter widgets and badges.

Wireframing Kits

Best Practice UX Forms Stencil v1.1
A comprehensive release of stencil that follows best practices for UX form design, providing three different ways to lay out forms, each with its own benefits. This version also provides different button layouts, a progress indicator, a Captcha code input field, labels and more.

Form Elements UI Kit
Form elements stencil from the Design Stencil kit in the Yahoo! Design Pattern Library.

Wireframe Shapes
Here is a set of shapes for making wireframes in OmniGraffle version 5.x ( forMac OS X). It consists of most of the basic elements you’ll need to create user interface specifications.

Wireframe kit for UI Designers
A set of various wireframes, such as product details, list of items, front page, mobile phone.

MBTI sketching paper for ideation
MBTI sketching paper for ideation sessions. It helps you think inside the box of four personality traits. Describe a design challenge and the problem to solve on every piece of paper. There’s also space for annotations.

A4 sketching paper
This sketching paper can be used after generating ideas for functionality. Design preliminary screens based on the ideas you come up with.

Wireframe Magnets (DIY Kit)
This DIY magnet template is based on the Konigi wireframe stencils, and it includes three sheets of elements that might be useful for whiteboard prototyping. Simply download and print the PDFs onto magnet sheets, optionally laminate them if you intend to use with dry-erase markers, and then cut them out.

Paper wireframe templates
The finished product include seven variations, as well as PSDs.

Wireframe template
A useful print-and-sketch template available for downloading.

iPad Idea Sheet
A total of three sheets: one full size (landscape), one at 70% reduction (vertical) and one at 50% reduction (landscape). The 80 tiny dots make it easy to split the screen horizontally and vertically.

Scenario, Taskflow and Grid Sketch Sheets
A set of beautiful printable sheets for ideas and sketching

Free Photoshop browser template
Need a clean browser screenshot for a design presentation? Look no further. These free professional Photoshop browser templates come in 1024×768 and 800×600 pixel sizes and all kinds of flavors.

Interactive Sketching Notation 0.1
The idea behind this notation is to visualize user interface states as well as user actions in a clear and rapid manner.

MobileMe Full iPhone GUI
For use with WinterBoard, this is a beta release, so there may be unthemed elements.

Android Wireframe Templates (PDF)

Free Keynote UX Stencils

Advertising Stencil Kit
A set of very useful advertising stencils.

Dragnet website wireframes kit v 0.9
Dragnet website wireframes kit v0.9 is a common library for Adobe Fireworks and contains over 25 objects that are useful for rapid prototyping of websites. It is completely free to download and use. The kit contains common Web design elements, such as scrollbars, buttons, menus and alerts.

User Interface Design Framework
This pretty and comprehensive design framework contains a GUI library of hundreds of vector elements for interface design. This minimal UI icon set has 260 vector icons and a library of 200 styles for Illustrator.

Browser Form Elements PSD
Included here is a set for Firefox 3 for Mac and another for IE7 on Vista.

Sketching and Wireframing Kit
Here is a free set of elements for sketching and wireframing. It consists of form elements, icons, indicators, feedback messages, tooltips, navigation elements, image placeholders, embedded videos, sliders and common ad banners.

Photoshop Form Element Templates
This set includes all common form fields and mouse and link pointers, optimized for ease of use.

Web Browser Elements
This excellent and useful kit contains pull-down menus, input fields, radio buttons, check boxes, buttons, text fields and scroll bars, all in an easily editable PSD file.

UI Design Kit
This Web UI template kit is made completely with shape objects, which in some cases convert to SmartObjects, so they’re totally scalable.

Wireframe Symbols
This download contains a symbols library and a full Adobe Illustrator file, with all of the elements spread out on the art board. To install this library, just drag and drop the Wireframe Symbols.ai file into your Illustrator Symbols directory. Once you are in Illustrator, go to your Symbols palette, and load the library.

Web UI Element Pack
This pack, in PSD format, contains 19 elements including loading bar, default and clicked-state buttons, button toggle, icons for “Close,” “Next” and “Previous,” paging icon and slider.

Wireframe Kit for Google Drawings

OmniGraffle Stencil for Ext JS v3.0
This updated version of Ext JS Omnigraffle stencil contains many improvements and additions, namely the recreation of most Ext JS elements as Graffletopia shapes or groups, especially helpful for resizing titles, tables cells and so on.

Flex 3 Stencil
Includes all Flex components from the Flex 3 Style Guide: panels, data grid, buttons, fields, links, toggle, menu, scrolls, accordion, tabs, list, data picker, tooltips and errors.

Aqua GUI
A series of elements inspired by the GUI Design Palette 1.2 and the Mac OS X interface stencils, based on Aqua, and mainly intended to make simple window designs.

Flex Darkskin PSD UI
A beautiful set of 16 PSD files.

Web Wireframe Kit
Here is a simple way to plan a layout and a cost-effective, time-saving wireframe kit for Web designers.

UI Buttons and Icons
This set contains 165 high-quality UI icons and buttons in five different colors. Available in AI, JPEG and SVG formats.

Quommunication Stencil Kit
This beautiful set contains design elements for wireframing, RSS feeds, colors, advertising units, browser windows and grids.

Mac OS X Interface 2
A Leopard-y interface stencil kit that makes extensive use of tables for maximum flexibility while maintaining pixel precision.

OmniGraffle UX Template
The OmniGraffle Pro (v. 5) template for interface design. Includes shared layers for basic UX document needs (e.g. title page, wireframes, storyboards).

Template for Blueprint CSS Comps
This template allows you to create visual design comps to be implemented using a CSS layout framework. The Adobe Illustrator document features a 24-column grid for CSS frameworks such as Blueprint.

Apple Elements for OmniGraffle
Stencils of Apple hardware and miscellaneous networking components. Excellent for creating physical diagrams.

DeviantART ID PSD Kit
These 15 professionally designed, fully customizable templates include MINI and Original ID templates.

Browser Screens and Website Elements
Here is a useful set of vector assets you can use to mock up client projects, present your work or get a quick visual while laying out a website.

960 Grid Template for OmniGraffle

Control of different browsers for designers (download link)
A PSD library of controls in browser interfaces of Mozilla Firefox, Opera, Internet Explorer and Safari.

Useful Articles

• The Importance of Wireframing
  A comprehensive article on how wireframing plays an important role in information architecture
• The Future of Wireframes
  As we move into the next decade of Web design, it’s time to re-evaluate our understanding of wireframes, a tried and tested user experience staple.
  
• Wireframing Is Not a Religion
  Wireframes are an indispensable tool for design thinking, a digital sketch pad ready to be drawn and erased, scrapped or resurrected at any moment.
• Five Commandments for Wireframing
  Paul Boag is a wireframes fanatic and believes they are an indispensable part of the development process. He espouses five unbreakable rules.
• 20 Steps to Better Wireframing
  Possibly the biggest mistake made in any development project is failing to plan. This article goes over why.

Resources and Round-Ups

• I Love Wireframes
  A tumblog dedicated to wireframes, prototypes and mock-ups.
• Wireframe Showcase
  This site is a place to look at websites based on wireframes and analyze how the designers transformed mock-ups into working designs. Because the wireframes and designs were submitted by their creators, Wireframe Showcase includes a short explanation of each piece. Most of the websites grew out of digital mock-ups, which have the advantage of being easy to tweak and rearrange. The result is a pleasing and informative collection of wireframes.
  
• Standard Screen Patterns for Web Interface Design
  Here are some principles and patterns for rich interactions.
• 50 Free UI and Web Design Wireframing Kits and Resources
  This post focuses on wireframing tools and standalone applications, as well as resources you need to build your own wireframe: wireframing kits, browser windows, form elements, grids, Mac OS X elements and mobile elements, which you can use in any graphics editor such as Photoshop or Illustrator, or with pen and paper.
• A Collection of Printable Sketch Templates and Sketch Books for Wireframing
  Here are 20 resources that you can use in the sketching phase of application development.
• A Collection of Printable Web Browser Sketching and Wireframe Templates
  All of these printable sketching templates have all been designed especially for Web designers. Each has an imprint of a Web browser (either Safari, Chrome or Firefox).
• Useful (Offline) Utensils and Toolkits for Designers
  Why start completely from scratch when you can use one of these pre-made guides to save time and better direct your creative energies? In this article, you will find a great list of free downloadable tools, as well as a collection of notepads and other products to purchase for offline planning and design.

Related Posts

• 35 Excellent Wireframing Resources
  Here are more than 35 resources for creating better wireframes, including tutorials on different methods and a variety of tools available.
• Free Printable Sketching, Wireframing and Note-Taking PDFs
  In this article, you will find a concise collection of ready-to-print sketching, wireframing and note-taking templates. Most are geared to the design community, but some could be used in any industry for any purpose.

Fuente: smashingmagazine.com