This is the P2PU Archive. If you want the current site, go to www.p2pu.org!

User Experience Design | ENG PT ESP

My recent threads

You haven't posted any discussions yet.

Recently updated threads

[W3] Usability

Go back to: General discussion

[ENG]
W3 | User-centered Design

"User-centered design (UCD)  is an approach to design that grounds the process in information about  the people who will use the product. UCD processes focus on users  through the planning, design and development of a product." - Usability Professionals Association (UPA)
Last week we started talking about social aspects that designers have to consider while working on projects. We emphasized the 'power' of stimulating and simulating emotions. To this process of managing feelings and offering the best experience to the user, associated with graphical or physical presentations, we gave the name of User Experience Design.
Usability (a field belonging to UX domain) is, in a nutshell, a quality attribute that allows us to know how easy to use are the interfaces. It refers to how well users can learn and use a product to achieve their goals and how satisfied they are with that process. Of course, there are many benefits when you insert usability in the development process of a product [See 8].
As further reading about Usability and User-centered design, we recommend these links:
[1] UPA - Usability Professionals Association: What is UCD?
[2] NASA: User Centered Design process
[3] NASA: User Centered methods

W3 | Composition and navigation
The term 'composition', applied to Graphic Design and directly related to the Visual Arts, defines the way information is displayed and organized on a platform or support. It's interesting to analyze contrasts of compositions when studying Art History: medieval paintings tended to display people on complementing movement patterns, as to give an idea of continuity or depth of action. The futuristic composition, with repetitive patterns describing angular positions, had as an objective transmit the idea of speed and technology.
Navigating on the web follows some commom sense concepts firstly implemented as metaphors (as the Xerox Starr project we talked earlier), and later tweaked or evolved. These are some "non-official standards" worth paying attention to:
- Consider the reading direction (left or right, depending on the culture);
- Avoid too long text boxes [4];
- Facilitate skimming [5];
- Provide seach options [6].
Do you have any other commom recommendations to web layouts? Please post about it.

W3 | Testing the user flow
User testing is a very important part of the Interaction Design process [7]. Testing a product with real users is the most fundamental usability method and is in some sense irreplaceable, since it provides direct feedback about how people use our products and what their exact
problems are with the concrete interface being tested. There are also usability heuristics that are general principles for user interface design.
The usability testing must be preceded by a checking process of these heuristics [8]. By this way, we can avoid facing basic usability problems while doing the usability testing.
Too often, people think that a usability testing session must be a process with a big budget, big laboratories, latest technology, etc. but there is also a faster way to do it (and to obtain really good feedback from our users) called "guerrilla" style.
We recommend you to read some of these links to know more about it.

- Jakob Nielsen - Usability 101: Introduction to Usability [9]
- Lower-Literacy Users: Writing for a Broad Consumer Audience [10]
- Usability.gov: Very useful website with a lot of material and templates about usability [11]
- BOOK: "Handbook of usability testing" Dana Chisnell. A very complete book about usability testing [12]
- BOOK: "Don't make me think". Steve Krug, has a great chapter about fast usability test and it is a usability book in general. Easy reading. [13]
- ESPAÑOL: Errores frecuentes en los test de usuarios [14]
- Usability Testing Demystified [15]
- BLOG: Usability Testing: How to plan, design, and conduct effective tests [16]
- SLIDES: Quick Cheap Insightful: Usability testing in the wild [17]

W3 | Activity
1) Read Jakob Nielsen's list of usability heuristics;
2) Choose a website from the list below and post your opinion about which usability principles it follows (or it doesn't).

List:
Creative with aK - http://www.creativewithak.com/
Econtent - http://www.econtent.hu/flash_version/index.html
Prism Girl - http://prismgirl.org/
On Toyota's mind - http://demo.northkingdom.com/ihuvudetpatoyota/index_en.html
Theologos - http://www.theologos.gr/en.html
Grip Limited - http://www.griplimited.com/
Kyle Tezak - http://www.kyletezak.com/
Real Casual - http://realcasual.com.ua/
Lego click - http://www.legoclick.com/#/
Content Of - http://contentof.com/
There Studio - http://www.therestudio.com/
Coke light - http://www.gringo.nu/projects/cokelight-worldflavours/#/world
Design sul - http://www.designsul.pt/
Marc Ecko - http://www.marcecko.com/#/
Journey to zero - http://journey-to-zero.com/#
Faub - http://www.faub.org/two.html
Uniqlo - http://www.uniqlo.com/us/
Bio Bak - http://bio-bak.nl/
Nicola Walbeck - http://www.nicolawalbeck.com/#
Self titled - http://www.selftitled.ca/
Vanalen - http://www.vanalen.org/

W3 | References
[1] http://www.upassoc.org/usability_resources/about_usability/what_is_ucd.html
[2] http://www.hq.nasa.gov/pao/portal/usability/process/index.htm
[3] http://www.hq.nasa.gov/pao/portal/usability/process/ucdMethods.htm
[4] http://www.useit.com/alertbox/9703b.html
[5] http://42explore.com/skim.htm
[6] http://www.useit.com/alertbox/9707b.html
[7] http://id-book.com/chapter14.htm
[8] http://www.useit.com/papers/heuristic/heuristic_list.html
[9] http://www.useit.com/alertbox/20030825.html
[10] http://www.useit.com/alertbox/20050314.html
[11] http://usability.gov/
[12] http://www.amazon.com/Handbook-Usability-Testing-Conduct-Effective/dp/04...
[13] http://www.amazon.com/Dont-Make-Me-Think-Usability/dp/0321344758/ref=pd_...
[14] http://www.webestilo.com/guia/articulo.phtml?art=42
[15] http://www.alistapart.com/articles/usability-testing-demystified/
[16] http://usabilitytestinghowto.blogspot.com/
[17] http://tinyurl.com/98rj3u

João Menezes's picture
João Menezes
Fri, 2011-02-11 12:56

[PT]
*W3 | Design Centrado no Usuário*
"Design centrado no usuario (UCD) é uma visão do design que sustenta o processo das informações utilizadas pelas pessoas. Processos de UCD tem como objetivo o foco em usuários através de planejamento, design e desenvolvimento de um produto" - Usability Professionals Association (UPA)

Semana passada conversamos sobre os aspectos sociais que os designers devem considerar enquanto trabalham em seus projetos. Enfatizamos o "poder" de estimular e simular emoções. Para esse processo de gerenciar sentimentos e oferecer a melhor experiência para o usuário, associado a apresentações gráficas ou físicas, demos o nome de Design de Experiência de Usuário.
A Usabilidade (um campo do domínio da UX) é, basicamente, um atributo qualitativo que nos permite saber o quão fácil são as interfaces com as quais interagimos. Refere-se a o quão bem os usuários podem aprender a usar produtos e atingir metas de satisfação. Sem dúvidas, há muitos benefícios quando você insere Usabilidade no processo produtivo de artefatos de Design.
Como leitura complementar recomendamos:
[1] UPA - O que é UCD? [1]
[2] NASA: User Centered Design process [2]
[3] NASA: User Centered methods [3]

*W3 | Composição e Navegação*
O termo "composição", aplicado ao Design Gráfico e diretamente relacionado às Artes Visuais, define a maneira com que a informação é organizada em uma plataforma ou suporte. É interessante analisar os contrastes das composições das pinturas, em História da Arte: quadros medievais tendiam a exibir pessoas em movimentos em padrões complementares, dando ideia de continuidade e profundidade de ação. A composição futurista, com estampas repetitivas e angulares, tem por objetivo transmitir a ideia de velocidade e tecnologia.

Ao navegar pela internet, seguimos alguns conceitos de senso comum que foram inicialmente implementados como metáforas (p. ex. o projeto Xerox Starr, comentado anteriormente), e consequentemente evoluídos. Estes são alguns "padrões não-oficiais" interessantes:
- Considere a direção de leitura (esquerda ou direita, dependendo da região);
- Evite caixas de texto muito longas [4];
- Facilite a "pesca visual" (skimming) [5];
Você conhece algum outro princípio global? Comente conosco sobre isso.

*W3 | Testes de usuário*
Testes de usuários são uma parte muito importante do processo de Design [7]. Testar um produto com usuários reais é um método fundamental e até certo ponto indispensável, pois provê feedback direto sobre como as pessoas utilizam nossos produtos e por quais problemas eles passam enquanto a interface é testada. Há também as heurísticas de usabilidade que são princípios gerais de Design de Interfaces.
O teste de usabilidade deve ser precedido de um processo de checagem destas heurísticas [8]. Desta maneira, podemos evitar ter de observar erros básicos de interface. Frequentemente as pessoas pensam que um teste de usabilidade requer alto financiamento e laboratórios super-estruturados, etc., mas há uma maneira mais rápido de fazê-lo (chamada do estilo de "guerrilha").

Recomendamos a leitura destes links:
Jakob Nielsen - Usability 101: Introduction to Usability [9]
Lower-Literacy Users: Writing for a Broad Consumer Audience [10]
Usability.gov: Very useful website with a lot of material and templates about usability [11]
BOOK: "Handbook of usability testing" Dana Chisnell. A very complete book about usability testing [12]
BOOK: "Don't make me think". Steve Krug, has a great chapter about fast usability test and it is a usability book in general. Easy reading. [13]
ESPAÑOL: Errores frecuentes en los test de usuarios [14]
Usability Testing Demystified [15]
BLOG: Usability Testing: How to plan, design, and conduct effective tests [16]
SLIDES: Quick Cheap Insightful: Usability testing in the wild [17]

*W3 | Atividade*
1) Leia a lista de heurísticas de usabilidade de Jakob Nielsen;
2) Escolha um site da lista abaixo e publique sua opinião sobre quais fatores e princípios são usáveis ou não.

Lista:
Creative with aK - http://www.creativewithak.com/
Econtent - http://www.econtent.hu/flash_version/index.html
Prism Girl - http://prismgirl.org/
On Toyota's mind - http://demo.northkingdom.com/ihuvudetpatoyota/index_en.html
Theologos - http://www.theologos.gr/en.html
Grip Limited - http://www.griplimited.com/
Kyle Tezak - http://www.kyletezak.com/
Real Casual - http://realcasual.com.ua/
Lego click - http://www.legoclick.com/#/
Content Of - http://contentof.com/
There Studio - http://www.therestudio.com/
Coke light - http://www.gringo.nu/projects/cokelight-worldflavours/#/world
Design sul - http://www.designsul.pt/
Marc Ecko - http://www.marcecko.com/#/
Journey to zero - http://journey-to-zero.com/#
Faub - http://www.faub.org/two.html
Uniqlo - http://www.uniqlo.com/us/
Bio Bak - http://bio-bak.nl/
Nicola Walbeck - http://www.nicolawalbeck.com/#
Self titled - http://www.selftitled.ca/
Vanalen - http://www.vanalen.org/

*W3 | Referências*
[1] http://www.upassoc.org/usability_resources/about_usability/what_is_ucd.html
[2] http://www.hq.nasa.gov/pao/portal/usability/process/index.htm
[3] http://www.hq.nasa.gov/pao/portal/usability/process/ucdMethods.htm
[4] http://www.useit.com/alertbox/9703b.html
[5] http://42explore.com/skim.htm
[6] http://www.useit.com/alertbox/9707b.html
[7] http://id-book.com/chapter14.htm
[8] http://www.useit.com/papers/heuristic/heuristic_list.html
[9] http://www.useit.com/alertbox/20030825.html
[10] http://www.useit.com/alertbox/20050314.html
[11] http://usability.gov/
[12] http://www.amazon.com/Handbook-Usability-Testing-Conduct-Effective/dp/04...
[13] http://www.amazon.com/Dont-Make-Me-Think-Usability/dp/0321344758/ref=pd_...
[14] http://www.webestilo.com/guia/articulo.phtml?art=42
[15] http://www.alistapart.com/articles/usability-testing-demystified/
[16] http://usabilitytestinghowto.blogspot.com/
[17] http://tinyurl.com/98rj3u

João Menezes's picture
João Menezes
Fri, 2011-02-11 01:14

[ESP]
S3 | Diseño centrado en el usuario
"Diseño centrado en el usuario (UCD en inglés) es un enfoque de diseño que basa el proceso en la información acerca de las personas que usarán el producto. Los procesos del DCU se focalizan en los usuarios durante la planificación, el diseño y desarrollo de un producto" - Asociación de Profesionales de la Usabilidad (UPA en inglés)
La última semana comenzamos a hablar acerca de los aspectos sociales que los diseñadores tenemos que considerar cuando trabajamos en proyectos. Enfatizamos el "poder" de estimular y simular emociones. A este proceso de manejo de emociones, ofreciendo la mejor experiencia al usuario y asociado con presentaciones gráficas o físicas, es al que llamamos Diseño de Experiencia de Usuario.
Usabilidad (como campo dentro del dominio de la Experiencia de Usuario) es, en pocas palabras, un atributo de calidad que nos permite saber cuán fácil de usar son las interfaces. Se refiere a la medida en la que los usuarios pueden aprender y usar un producto para alcanzar sus objetivos y cuán satisfechos están con ese proceso. Obviamente, existen muchos beneficios al insertar la usabilidad en el proceso de desarrollo de un producto (Ver [8])
Para mayor información acerca de Usabilidad y Diseño Centrado en el Usuario, recomendamos estos enlaces (en inglés):
[1] UPA - Asociación de Profesionales de Usabilidad: Qué es DCU?
[2] NASA: Proceso de diseño centrado en el usuario
[3] NASA: Métodos centrados en el usuario

S3 | Composición y navegación
El término "composición", aplicado al Diseño Gráfico y directamente relacionado con las Artes Visuales, define la manera en que la información se muestra y organiza en una plataforma o soporte. Es interesante analizar los contrastes de las composiciones cuando se estudia Historia del Arte: las pinturas medievales tendían a mostrar a las personas en patrones de movimiento complementarios, para dar una idea de la continuidad o profundidad de la acción. La composición futurista, con patrones repetitivos describiendo posiciones angulares, tenía como objetivo transmitir la idea de rapidez y tecnología.
La Navegación en la web sigue unos conceptos de sentido común implementados, primeramente, como metáforas (como el proyecto Xerox Starr del cual hablamos anteriormente), y luego evolucionó. Estos son algunos estándares "no oficiales" a los cuales vale la pena prestar atención:
- Considerar la dirección de la lectura (de izquierda a derecha, dependiendo de la cultura);
- Evitar cajas de texto muy largas [4];
- Facilitar la lectura rápida (escaneo) [5];
- Proveer opciones de búsqueda [6];
Tienes alguna otra recomendación relacionada con la interfaz web? Por favor, cuéntanos de ello.

S3 | Pruebas de usabilidad
El testeo de usuario es una parte muy importante del proceso de Diseño de Interacción [7]. Hacer una evaluación de usabilidad con usuarios reales es uno de los métodos más fundamentales de usabilidad y es, en algún sentido, irremplazable, ya que provee retroalimentación directa acerca de cómo las personas usan nuestros productos y cuáles son los problemas exactos con una interface concreta. Existen también las llamadas "heurísticas de usabilidad", las cuales son principios generales para el diseño de interfaces de usuarios.
Se recomienda que una evaluación de usabilidad sea precedida por un proceso de chequeo de estas heurísticas [8]. De esta manera, podemos evitar encontrarnos con problemas básicos de usabilidad cuando hacemos la evaluación y concentrarnos en aspectos de mayor impacto.
Generalmente, las personas creen que una sesión de evaluación de usabilidad debe ser un proceso con un gran presupuesto, grandes laboratorios, la última tecnología para grabar voz y video, etc. pero existe una manera rápida de hacerlo (y obtener de igual manera una buena retroalimentación de los usuarios) llamada "de estilo guerrilla".
Recomendamos para saber más del tema, los siguientes enlaces (en inglés).

Jakob Nielsen - Usability 101: Introducción a la usabilidad [9]
Lower-Literacy Users: Writing for a Broad Consumer Audience [10]
Usability.gov: Sitio web muy útil con mucho material y plantillas acerca de usabilidad[11]
BOOK: "Handbook of usability testing" Dana Chisnell. Un libro muy completo sobre evaluación de usabilidad[12]
BOOK: "Don't make me think". Steve Krug, tiene un gran capítulo acerca de testeo rápido de usabilidad y es un libro muy bueno en general. De fácil lectura.[13]
ESPAÑOL: Errores frecuentes en los test de usuarios [14]
Usability Testing Demystified [15]
BLOG: Usability Testing: How to plan, design, and conduct effective tests [16]
SLIDES: Quick Cheap Insightful: Usability testing in the wild [17]

S3 | Actividad
1) Lee el material de Jakob Nielsen acerca de las heurísticas de usabilidad;
2) Selecciona un sitio web de la lista y cuéntanos tu opinión acerca de qué principios de usabilidad siguen (o no).
Lista:
Creative with aK - http://www.creativewithak.com/
Econtent - http://www.econtent.hu/flash_version/index.html
Prism Girl - http://prismgirl.org/
On Toyota's mind - http://demo.northkingdom.com/ihuvudetpatoyota/index_en.html
Theologos - http://www.theologos.gr/en.html
Grip Limited - http://www.griplimited.com/
Kyle Tezak - http://www.kyletezak.com/
Real Casual - http://realcasual.com.ua/
Lego click - http://www.legoclick.com/#/
Content Of - http://contentof.com/
There Studio - http://www.therestudio.com/
Coke light - http://www.gringo.nu/projects/cokelight-worldflavours/#/world
Design sul - http://www.designsul.pt/
Marc Ecko - http://www.marcecko.com/#/
Journey to zero - http://journey-to-zero.com/#
Faub - http://www.faub.org/two.html
Uniqlo - http://www.uniqlo.com/us/
Bio Bak - http://bio-bak.nl/
Nicola Walbeck - http://www.nicolawalbeck.com/#
Self titled - http://www.selftitled.ca/
Vanalen - http://www.vanalen.org/

W3 | Referencias
[1] http://www.upassoc.org/usability_resources/about_usability/what_is_ucd.html
[2] http://www.hq.nasa.gov/pao/portal/usability/process/index.htm
[3] http://www.hq.nasa.gov/pao/portal/usability/process/ucdMethods.htm
[4] http://www.useit.com/alertbox/9703b.html
[5] http://42explore.com/skim.htm
[6] http://www.useit.com/alertbox/9707b.html
[7] http://id-book.com/chapter14.htm
[8] http://www.useit.com/papers/heuristic/heuristic_list.html
[9] http://www.useit.com/alertbox/20030825.html
[10] http://www.useit.com/alertbox/20050314.html
[11] http://usability.gov/
[12] http://www.amazon.com/Handbook-Usability-Testing-Conduct-Effective/dp/04...
[13] http://www.amazon.com/Dont-Make-Me-Think-Usability/dp/0321344758/ref=pd_...
[14] http://www.webestilo.com/guia/articulo.phtml?art=42
[15] http://www.alistapart.com/articles/usability-testing-demystified/
[16] http://usabilitytestinghowto.blogspot.com/
[17] http://tinyurl.com/98rj3u

Alex Mrvaljevich's picture
Alex Mrvaljevich
Fri, 2011-02-11 01:53

For my website i chose “Prismgirl” http://prismgirl.org/

I am not a Designer by profession, but rather an Industrial Engineer, to me this site is a good example of what happens when Graphic Design takes over and reigns supreme, which is somewhat of a difficult position I have faced with designers in the past.

First: The site is visually stunning
Second: I don’t know what to do with it

It violates many of the basic usability notions, which cause frustration and confusion, leaking negative experience into an otherwise beautiful piece of art.

• I have no indication of state: Where I am on the web is not clear, nor what I can do here.
• I have no clear indication of possible next steps, under the GMO model I don’t have the opportunity to set my Goals, I can’t locate Methods nor do I see any Operators.
• Inconsistency in navigation: When I click, I am given the option to go to a portfolio sup-page, but once I am there it feels as is I am on another website altogether… it’s a separate experience which disregard the initial impact of the artwork in the homepage.

Now it is very important, crucial in fact, that my analysis in no way means a complete overhaul is necessary, the owner for the site is clearly a very talented artist and the initial rendering defines a very aesthetic experience, which is what is looked for in a portfolio site.

Some easy recommendations to help this site be less confusing are easy to implement:

• State somewhere that the site is a portfolio for the graphical artist… it could be ingrained in the bark of the tree, floating spelled out in fireflies, it doesn’t have to be a boring 600px banner on the top, but it does have to be somewhere clearly visible upon first landing on the page.
• Maintain consistency in navigation… if you want to display navigation only upon the first click (you should say it out loud btw) then maintain the form factor of this navigation throughout the rest of the site.
• Put a picture of the designer somewhere in the site, the site is all about you’re work, but we feel better when there is a human face behind it.

Yes, I know we have given a lot of strength to the minimalism Vs. complexity argument, and the site is kind of loaded… but we have to remember that ultimately, the only thing that really matters is the end result that is expected of the site; if I am an artist, what I want is more work of the kind I like to do to… so the site must be a reflection of that inclination.

João Menezes's picture
João Menezes
Fri, 2011-02-11 12:58

Nice definition about the site you chose - "graphics reign supreme". On an ideal scenario, graphics and usability should word together.

Vanessa Gennarelli's picture
Vanessa Gennarelli
Sun, 2011-02-13 20:37

Also that site takes forever to load--that's a useability issue!

Pauline Dizon's picture
Pauline Dizon
Fri, 2011-02-11 10:44

Site evaluated: http://www.uniqlo.com/us
First off, I'd like to say that I like Uniqlo's products and they are a good deal. I don't mean to lambast their web site or anything. It's just that given the assignment criteria, I had more negative things to say than positive things.
Now on with the show!

1. Visibility of system status
The top navigation's mouse-over color change could be more obvious. Black to dark gray isn't enough.
The bottom navigation doesn't change appearance at all during moseovers and clicks.

2. Match between system and the real world
Clicking on New Arrivals brings up a page saying "No data". Huh? I'm looking for clothes, not data. Oh wait, there's a little "No Items" on lower part of screen. Probably the same thing. (More on this in number 9 below.)
I appreciate being able to narrow items down by color and category. If I had to look for a red shirt or black pants, this would make the search easy.

3. User control and freedom
The site has very few input controls. Would be nice to have a keyword/product code search as well.

4. Consistency and standards
I was confused to find that I could search products by "Genre". It sounds like I'm buying movies or books!
Clicking on the "Product Search" takes me to a page entitled "Uniqlo Explorer". Clicking on "Styling Search" takes me to the "Stylebook" page. Better to just call it one or the other and be done with it...obviously some marketing voodoo was done on the web site's wording.

5. Error prevention
The site has very few input controls, and in a way, that does prevent visitors from making errors.

6. Recognition rather than recall
No site map! If I wanted to check the gift card policy, I would have to do detective work to find it under the Company Info section. Even worse, to get to the FAQ page, I have to go through Company Info > Contact Us > FAQ. Talk about lighting a lamp and putting it under a barrel.
Would be better if the "Size Chart" opened in another window so I could refer to it while inspecting a product's details instead of having to hit the Back and Forward buttons. Another possibility is adding a link to the "Size Chart" from the product page, so I won't have to scroll down to the bottom of the page to get the link to the size chart.

7. Flexibility and efficiency of use
Would be nice if I could save my searches, or have a "previously viewed" section so I could review which products I visited/liked, without having to search all over again.

8. Aesthetic and minimalist design
The navigation menus are short and straightforward. The page elements ar neatly aligned in a consistent layout.
But the home page is clutterd with a lot of links to "special sites" and I found this disorienting.

9. Help users recognize, diagnose, and recover from errors
Clicking on New Arrivals brings up a page saying "No data". Why isn't there any data? Am I supposed to input something?

10. Help and documentation
The site has a "Contact Us" page if I need help...and that's about it.

The site's strong point is it does a good job of showcasing Uniqlo's products with clear pictures, text, and a good search function. However, vistors don't just go to a catalog site to look at pictures; they are potential buyers. So I think the site should be geared towards more powerful searches, the ability to make lists or bookmarks, and other things that would make visitors more inclined to go to Uniqlo shops and buy.

João Menezes's picture
João Menezes
Fri, 2011-02-11 13:21

I'd like to share some links:

1) http://www.cxpartners.co.uk/thoughts/kinect_gestural_interfaces_-_a_usab...
It's from a User-centered design company in the UK. They've studied some of the navigational interfaces present in Xbox Kinect games.

2) http://www.8020studio.com/#better-place
That's an UX/UI design office in New York. This part of the portfolio is a touchscreen monitor to electric cars.

Rosa Torguet's picture
Rosa Torguet
Fri, 2011-02-11 15:31

Firs of all, I'd like to add three standards that I consider important in web layout:

1) Establish a well defined hierarchy of elements.

2) Colour contrast between background and texts to make them easier to read.

3) Plan the structure to allow it to grow in the future if needed.

The website I want to talk about is this: http://www.theologos.gr/en.html

In the first place, I want to say that at first sight, just when entering the site it looked to me somehow like a piece of art.
Black background, sutil music, contrasting with this beautiful images and slow changes when highlighting the images, suggesting texts.

But... there always has to be a but..

-Maybe everything is too slow in the website, and it is the site itself which is impossing the rythm of the visit. I would say that this can make the user feel a bit stressed about how to reach the content. This can lead to less time invested on really seeing the jewelery.

-When entering there is no other option than following the site's interface, as the browser is disabled and back and forward buttons cannot be used.

-It isn't clear what the company aims with this website, is it a showcase, the company's site...?

-When trying to turn off the sound by clicking the button supposedly placed for this a confusing bar appears, which allows the user to choose to start the song from any part of the song again, isn't this too much? This button should just be there to control volume or stop the sound.

-when clicking on the company's logo, another website opens in a new tab, another slow one, if this is the real one and 'Theologos' is just a showcase, then it should be a more structured page with accessible information and no time consuming.

-When entering in the green image, in the 'stores' section, you finally think that something useful is going to happen and you'll get the information about where you can buy their products, instead another slideshow of photos appears, and (again) you are not allowed to decide how fast you want to see them.

-The user really needs to be patient to visit all the website.

João Menezes's picture
João Menezes
Fri, 2011-02-11 18:01

I was one of those non-patient visitors w/ this website!

Lucica Ibanescu's picture
Lucica Ibanescu
Sat, 2011-02-12 21:43

I lost my patience too and I did not even understand what's the site about. Besides being "cookie" the site is really hard to use and not so accessible. What's the point of designing cool websites if only the designer can/will use it?

Lucica Ibanescu's picture
Lucica Ibanescu
Sat, 2011-02-12 21:57

I picked http://contentof.com/ and if I hadn't been forced to stay in order to write this post I would have runned away in the first 10 seconds.

The first impression that it gave me it was that maybe I'm in the wrong place. If I want to know the content of something why those tags in the left, am I supposed to click them? And again, where am I? :)

If I click a link in the tag cloud some images appear in the left - that means that those are insides of a book and what I have clicked in the left is a book's title. While navigating the site there is no clue in the navigation to help me know where I am, there are no clues about the site's purpose, no content and the images from inside the books are too small to be seen anyway (no possibility to enlarge them exists).

So even if it fits Nielsen requirement of minimalist design - it is so minimalist that it forgot to help me understand its purpose, it does not provide tools to help me use those images or even see them properly, it does not help me know where am I when browsing.

Overall the impression is that it's a website created for a certain purpose that I was not able to find out and maybe it's for a restricted circle of friends or users that are experts.

Frankie Yan's picture
Frankie Yan
Sun, 2011-02-13 02:53

I chose “On Toyota’s Mind” http://demo.northkingdom.com/ihuvudetpatoyota/index_en.html, and upon some searches found out it has been mentioned many times on various blogs and had won a site of the day award on the FWA. Being a Flash site from 2006, it still provides a very interactive way to promote Toyota’s values and philosophies. The site is very beautifully done, and consists of some awesome animations and renderings of the “Mind of Toyota”. Also, this isn’t a page where customers are to look for vital information about Toyota, like available models, pricing, features etc., so they could get away with more experimental, presentation-like features, and thus have a different target audience compared to some of the other sites listed, such as Uniqlo.... Give me a minute I have to turn off the sound as the sound loops are getting pretty annoying :)

The site’s navigation is shared between hot spots in the graphic rendering, and the numbered links on the bottom just beneath the graphic. The two sets of navigation links up – hovering over either set of navigation will trigger the hover effect in the other. While this helps usability and is definitely better than without, I feel it isn’t nearly enough. With all of our attention focused on the graphical element, it is difficult to detach our eyes away and notice the popups that appear on the bottom navigation (I know I missed them the first time around), which was the only place that provided textual information on what the link is about – the hover effects on the graphical element is merely an arrow indicating you’ve mouseovered a hot spot. My opinion is that further feedback with the textual information on the link (tooltips maybe?) should be implemented on the graphic itself as well. As well, there are animated elements on the page that I thought represented a link, such as the waterwheel, and the highway/adjacent buildings but wasn’t. Also, the fingers are really creepy looking haha!

Another complaint I have as a user would be the long transitions/loading times upon entering each subsection of the site. Couldn’t this be done in the background while the user is fishing for links on the home page? Once you stop having loading times to deal with, there’s also the matter of the cloud transition that takes looong. Speed it up a little, and have sections preload in the background, and I think the experience would be better appreciated by the users. I do have to mention that the pause/back/sound off buttons after you enter a subsection is an important element that they’ve included. Nice touch, and overall very nicely designed site!

Thao Vo's picture
Thao Vo
Wed, 2011-02-16 11:40

Is it just me or the more highly interactive a website is, the more difficult it is to use? To me the interactive parts are not intuitive.

Alex Mrvaljevich's picture
Alex Mrvaljevich
Thu, 2011-02-24 13:02

Also music on sites, to me, is very annoying... is there an official Usability point about it? i personally cant stand it but dont know if its a general issue.

Mela S.'s picture
Mela S.
Thu, 2011-02-24 13:29

I'm not sure if there's a "general" usability rule about it. But according to Richard Mayer's principles of multimedia learning, people learn better when unnecessary multimedia elements are excluded. From that, I guess we can make the jump that understanding a website's content (which can be argued as a kind of learning) is negatively affected by (usually unnecessary) music on sites?

Vanessa Gennarelli's picture
Vanessa Gennarelli
Sun, 2011-02-13 21:23

Like Pauline, I also chose Uniqlo—I’ve used the site several times before and haven’t had the terms to describe my frustrations. Now I’m armed!

1.) “Match between system and real-world”—I would say Uniqlo suffers from serious labeling issues—I don’t know whose language the content developer used, but it’s not familiar to me!
• The categories of product are confusingly named—“Men” and “Women” are labeled “Genres” (like fiction, or cookbooks?).
• The user must choose between types of product: “Tops” “Bottoms” and….”Cut and Sew”? What is the difference between “Outer” and “Inner” if you also have categories like “Shirts”?
• The horizontal header navigation redundantly offers “Product Search” and “Styling Search.” But “Styling Search” isn’t a search at all—it’s a catalogue of products.

2.) The categories are so confusing that the user eventually elects to see all items, which I suppose is “User Control and Freedom.”
• User can easily see all the products at once, user selects the size of the search results.
• However, you see the product in all colors, which is a bit overwhelming.

3.) The powerful logo and grid design make for solid “Minimalist Design” of the site. However, Uniqlo doesn’t possess full e-commerce functionality—you can’t buy anything off their site—so they didn’t have to design for more complicated steps, like check-out.

I thought maybe there was a translation issue, but Japan and other countries have separate sites with exactly the same design, which is interesting—maybe they are aiming for universal design?

Or maybe the clunky copy is part of the marketing….

Great assignments so far, Joao!

Thao Vo's picture
Thao Vo
Wed, 2011-02-16 11:49

I hear some retail stores (Abercrombie & Fitch ?)are purposefully designed to be confusing. So maybe you're right, the poor website design could be a part of Uniqlo's strategy...

Euge Ortiz's picture
Euge Ortiz
Sun, 2011-02-13 21:43

Haha "I'm armed!" ;) I think that you all get the idea that there are a lot of aspects to consider when designing a product/service and to provide a good level of usability for your target audience. Visual design is one of these aspects, and it is more than beautiful art, it must communicate key concepts to your users. The better the communication, it will be easier for the users to use our designs.

João Menezes's picture
João Menezes
Mon, 2011-02-14 21:38

Totally agree!

Wei-Ching Shyu's picture
Wei-Ching Shyu
Mon, 2011-02-14 09:15

I choose http://www.kyletezak.com/, since it is the only few non-Flash sites.

Visibility of system status:
The site always has the name of the site and link to information in case you need to find out more.
Match between system and the real world:
I was searching for the “Home” link. Although it is now almost a standard that the name or logo of the site is also a link to the homepage, users need a more familiar name and clearer option.
Recognition rather than recall:
The homepage showcases all of the work samples, so users can click on the ones they are interested and get more details about the work.
Aesthetic and minimalist design:
All images clearly show the content of the work. I once read the article “My Last Portfolio Sucked, Yours Might Too” at http://astheria.com/design/my-last-portfolio-sucked-yours-might-too and I had to agree. Stop making those zoomed in and cropped thumbnails! I do not have time to click on every link! And it wastes your time to make all the thumbnails and links to the actual work!

João Menezes's picture
João Menezes
Mon, 2011-02-14 21:42

Flash has been very important to Interface Design as it has deeply contributed to the development of new paradigms and metaphors; but now we've achieved better -and open- standards to work with. Flash (and ActionScript) is really a very powerful platform, but it tends to change from being commom on every page to being used only on specific pages.

Thao Vo's picture
Thao Vo
Wed, 2011-02-16 11:30

I'd like to share usability issues and my experience with the Theologos website - http://www.theologos.gr/en.html

I also agree with Rosa. The site is slow-paced and imposes this rhythm throughout the user's visit. The thing that stood out to me the most about this site is the mood it is tries to elicit. This is definitely one of the “moodier” websites out of the ones on the list for this week's assignment. I think the site is trying too hard to evoke an emotion out of the user (positive or negative). When I first enter the website, music plays and the words, “Desire, Sentiment, Perfection, Passion, Essence” appear. I think the words are suppose to conjure up emotion, and I think I'm suppose to associate these emotions with the brand. I mistakenly took the words for a horizontal navigation bar, and I proceeded to click on the individual words, but I didn't see immediate results. I waited for the page to load (a theme throughout my experience) and the words are replaced with floral images, and these - I was able to click on. I chose one random image to click on to get to the next stage. As a first time visitor, not familiar with the brand, I have no idea what the website is about.

I had a difficult time viewing the products, and I think the number one problem was how the products are categorized. The products are placed into categories such as “Desire” and “Sentiment”. Clicking on “Desire” leads to sub-categories like “Elements in Bloom” and “Confessions”, which are words that do not describe the product. Let's say I do find something that catches my eye. The next time I visit the site to view that product again, it would be difficult for me go straight to the product because I would need to retrace my steps, but there is no clear association between “Elements in Bloom”and the product I want to view. The further I dig into each of the categories, the more confused I feel about where I am and where I'm about to go. At the end of my visit, I am left feeling frustrated and discontent, the opposite of the feelings they are probably trying to evoke.

The site does a great job at showcasing the products, once I have access to their pages. The images are stunning; they are displayed against a black background, and at the center of my attention. I am not surprised to learn Smashing Magazine listed this website as one of the “50 Beautiful Flash Website” in 2009. I'm positive many of the websites in this assignment have won creative awards...but they could use work in the usability category. There is a better way to showcase the products in a conceptually interesting manner without sacrificing the site's usability.

Bill Ferris's picture
Bill Ferris
Wed, 2011-02-16 20:34

As an avid and dedicated Coke drinker, I chose the Coca-Cola Light website. This site violates several of Nielsen's heuristics, as well as basic common sense, which I'll explain below.

The premise of the site is that by choosing your favorite color, animal, and geometric shape, the site will find you the perfect restaurant in some exotic location. You only get four choices each for favorite color, animal, and shape, so I immediately felt a little boxed in by my lack of options. It seems very silly to think these choices would say anything about my personality. That's probably not a usability issue, but I thought it was worth mentioning.

**Visibility of system status**
This site rates poorly. After the site finds your perfect restaurant, I was told to click on a red balloon. After clicking it, the balloon turned silver and floated up into the sky. The camera followed it as it rose up into infinity. I have no idea why it did this or what I was supposed to do next. If you mouse over the balloon, the "click finger" icon shows up, but clicking the balloon produced no results for me.

**Match between system and the real world**
The wording on the site is awkward--"We selected the most remarkable gourmet experienes in the world, at least matched your personality..." What does that even mean? That's inexcusable for a site from a company of the size and stature as Coke.

**User control and freedom**
The controls are pretty straightforward, until I clicked the balloon and was left to drift up to the ionosphere. From what I can tell, there's no escape from this state. Even hitting the browser's refresh button takes you to an entirely different page, with no instructions on how to get back to where you were--not that you'd want to.

**Consistency and standards**
The site did okay here.

**Error prevention**
My balloon is still floating upwards to this day.

**Recognition rather than recall**
The fact that you click on balloons seems a little weird, but it's easy enough to figure out, and once you do, you'll have little trouble remembering.

**Flexibility and efficiency of use**
I see no sign of accelerators, nor is there any incentive to look for them. One wrong click on this website and you're launched into the sky with no way down, so I felt compelled to be pretty conservative with my mouse clicks while I explored the site.

**Aesthetic and minimalist design**
There's nothing minimalist about this site. It's a Flash bonanza, and to be fair, it looks gorgeous. I don't mind the fact that they obviously put a lot of work into creating visual representations of several countries. There are a limited number of buttons to push, so I didn't feel confused or overwhelmed by options.

**Help users recognize, diagnose, and recover from errors**
I saw no evidence of error messages, though this site could probably use some.

**Help and documentation**
When my balloon floated away, Coke offered me no help of any kind.

**Final thoughts**
This might not be a usability issue, but I didn't know where else to put it: My main issue with the site is that I just don't see what the point of it is. I'm not going to jet off to some restaurant halfway across the globe based on a recomendation from Coke, even if that recomendation is based on my favorite color. Someone put in a lot of work and invested a lot of design time to build a site that accomplishes a task that's too specific to be of any use to the average user.

Pierre GIRAUD's picture
Pierre GIRAUD
Thu, 2011-02-17 00:19

I took the Grip Limited website as an example to study the 10 Usability Heuristics.

  1. Visibility of system status
  2. This one seem to sound good when opening the site at first. The different blocks load individually one after the other with a loading indicator. What I appreciate is that user don’t have to want till the site is finished loaded.

    A negative point is that it’s difficult to see which block is the currently selected one. The blue line at the top is not visible enough, in my opinion.
    Vertical or horizontal cursors tell the user where he is. They’re visible only if needed. Nice and unobtrusive.

  3. Match between system and the real world
  4. In general, I that the used terms are not too technical for a lambda visitor.

  5. User control and freedom
  6. There is no real need for undo or redo in this website since it’s not an application. Though, if the user does something wrong (closing a block), it’s really easy for him to go the way back (reopening it). And the user is free to navigate the way he wants. He has many options for that. I think this is a good point even for accessibility.

  7. Consistency and standards
  8. They seem consistent in the words they’re using in the website.

  9. Error prevention
  10. As said earlier, this is not really an application. I don’t think about possible errors.

  11. Recognition rather than recall
  12. The navigation help is not visible or easily retrievable whenever appropriate, it’s a fact. I think that not required though. In fact, navigation is easy. User shouldn’t need help for it.

  13. Flexibility and efficiency of use
  14. Advanced users may prefer keyboard navigation while inexperienced may prefer mouse navigation. Once again, this is not to be considered as a complicated website. There’s no real need for advanced actions.
    One thing I found disturbing is the fact that the menu opens on click and disappears on mouse out. This seems inconsistent.

  15. Aesthetic and minimalist design
  16. Design is kinda minimalist. High contrast and few colors.
    I’m a bit disturbed by the columns and the font varying width or size.

  17. Help users recognize, diagnose, and recover from errors
  18. Errors ? What errors can user make on this website ?

  19. Help and documentation
  20. Documentation for the navigation is available at first load. Maybe this documentation should have been displayed in a more distinct style.

Felipe Saldanha's picture
Felipe Saldanha
Thu, 2011-02-17 19:06

(Colleagues, sorry for my Portuguese posts!)

Desculpe o atraso para postar!

Referente às páginas de internet, acho que entre os "padrões globais" estariam: a manutenção de elementos básicos consagrados (cabeçalho, rodapé e menu de navegação); a utilização também consagrada de ícones (uma casa para a página inicial, um envelope para a seção de contatos, etc.); entre outros.

Escolhi o site "Lego Cl!ck" (http://www.legoclick.com). É um portal que oferece itens multimídia (posts, vídeos, fotos e tweets) "inspiradores". Ao ser acessado, o site se mostra divertido e oferece várias possibilidades de conteúdo. Os itens "caem" na tela, na forma de bloquinhos de Lego, e são gradativamente "empilhados". Se estes itens estivessem sendo ordenados por criação, seria um ponto positivo para a heurística "Visibility of system status", mas não há data/hora e não é possível saber se a disposição é randômica. Além disso, a visualização da pilha começa na base, que apresenta sempre o mesmo conteúdo. Por isso, um olhar desatento faz o site parecer estático.

Também existem dificuldades na heurística "Consistency and standards", pois há uma ferramenta para compartilhar os itens nas redes sociais. O problema é que, ao invés de clicar em botões, é preciso arrastar o botão "Share" para o ícone correspondente a uma das redes, o que é contraintuitivo. Outro problema relativo à mesma heurística é o ícone "Don't touch me", que uma vez clicado elimina o item da tela, sem possibilidade de recuperação. Este problema também esbarra na heurística "User control and freedom".

Essa última heurística apresenta ainda outro fator negativo: a pilha de itens cresce continuamente e de forma muito rápida. Ao visualizar o topo da página (portanto, o primeiro item), os blocos que "caem" se acumulam e "empurram" o item para baixo, forçando o internauta a descer novamente a página para terminar de ler o item. Um último problema, não direcionado especificamente a nenhuma heurística, é o fato de que parte do conteúdo só é visualizado em resoluções acima de 1024x768.

Rafael França's picture
Rafael França
Fri, 2011-02-18 16:25

Olá, desculpem pela demora.

Eu escolhi o "http://www.selftitled.ca".

Logo na abertura achei o site bem interessante. É ao estilo 'Sci Fi', ao estilo do computador do Tony Stark de 'Iron Man'.

O site carrega bem rápido pra ser feito em Flash.

Percebi muitos defeito, só para começar, quem visita o site pela primeira vez, não sabe do que trata o site.

Achei muito estranho e ruim ter que clicar em cada parte do circulo para ter que ver os trabalhos, já que tive que pensar para fazer.

Como diz o livro, "Don't Make Me Think", eu não quero pensar para fazer... Eu quero fazer sem ter que pensar o que fazer.

O menu da direita não é muito bom, já que para quem usa resoluções altas, 1280x1024, deixa as fontes pequenas e de difícil leitura. Eu acho que a resolução ideal para esse site é 1024x768.

Não foi muito difícil de me adaptar ao site, já que sou muito curioso, e esse é um ponto positivo, já que as pessoas curiosas vão querer aprender no site nos mínimos detalhes, mas tem gente, grande parte das pessoas, ao verem o site e não se conseguirem usar já desistem, e aí eles vão perder os clientes.

Um fato interessante é a possibilidade de usar atalhos de teclado, mas temos que habilitar.

Bom, o que percebi foi isso.

dj zero's picture
dj zero
Fri, 2011-02-18 20:25

I chose: http://www.selftitled.ca/

I have to say, I'm not really a fan of flash portfolio sites. I do think that there is a place for flash, but loading screens for each project –– this is a cause for me to immediately leave a site. That being said on to the analysis...

Visibility of system status
Even as a heavy web user, I couldn't immediately figure out what was going on when I arrived at this site. I thought that the legend was the navigation, but it wasn't. I continued to think that the legend was the navigation and it still wasn't. Then I realized the legend gave clues to the color within the circle which was the navigation. Later I realized that there was a "Quick Nav" hidden on the right edge of the site. I'm not sure that this website keeps its user informed, except for the loading screens. The loading screens do give the user feedback at least.

Match between system and the real world
There is a consistency to the language used throughout the site. However, requiring an additional click to get info about a project is not really ideal for me. Once I commit on viewing the project, I think I should also be able to view the info.

User control and freedom
Undo and redo are supported. There really isn't a place to get stuck in this website.

Consistency and standards
The conventions used in this website are consistent across all of the projects.

Error prevention
This is a big issue. There needs to be an explanation of the navigation system. Also, I'm not sure why some projects show up and reload. It seems like an error that this continues to happen which makes some of the projects hard to read.

Recognition rather than recall
This is another big issue. Recognition is low. Recall is a must with this website and understanding how to navigate from project to project. Using "+" to expand on projects is probably the only recognition that happens here.

Flexibility and efficiency of use
This website requires a few of steps to get to a project. First figure out what you are looking for on the circle or the side naviation, click the "+" to see the project, wait for it to load, then click the info to get information about the project. I think for efficiency some of the clicks could be eliminated.

Aesthetic and minimalist design
This site definitely is appealing visually since its design is very unique. However, I would argue that the minimalism is taken to the extreme here. All of the content is basically hidden from the user. Also, the visitor could use a lot more information about each project.

Help users recognize, diagnose, and recover from errors
Again, the legend attempts to do this, but for me it is ineffective.

Help and documentation
This site needs help/documentation, even if it is in the form of a hover message over the circle navigation. Though I do suppose that would become annoying once the visitor did get used to how to navigate the site. Maybe instead the help could be on page load?

The positive thing I can say about this site, is that it is visually interesting and fun. Once you get over the hurdle of figuring out the navigation, choosing projects by clicking on sections of the circle is amusing and unique. Although if I were a visitor that needed information from the site I would easily become frustrated because the site's minimalist design hides its content. If I did manage to look at some of the projects, I would definitely want to see them larger, to know more about each of them, like e.g. What problem is this design solving? It is obvious that he designer of the site has a lot of skills, but I'm not sure how well those skills communicate –– which is really what we aim to do as designers isn't it?

Garrett Polifka's picture
Garrett Polifka
Sat, 2011-02-19 03:21

http://contentof.com/

1. Visibility of system status
This site left me very confused. When I entered the site, one of the navigation links was in blue. When I clicked that, the navigation structure changed and left me without all of the navigation. Then, a new navigation link came into to play as red. I quickly became lost and was not able to quickly identify where I was.

2. Match between system and the real world
The About link gave me two different pages. When I click the About link, logically, I expect to land on the same page. There is no natural logic to the structure of this site. I come away from the site confused on what they are trying to be the contentof or what there message is. After digging a little bit, apparently I can purchase Hand drawn illustrations…at this point, I wish I had never visited this site and gave them analytic of visitors and pageviews.

3. User control and freedom
There is no freedom or or ways to get back to where the user is suppose to be. I quickly became lost and confused. The only way I was able to navigate back to the beginning of the site was to use the url bar or the back button. This site should be used in every web development class as an example of how to confuse the user and what not to do.

4. Consistency and standards
There is no consistency and standards. Wait I take that back…this site is consistently hard to use. This site is consistent with appearance of colors and simple links only. I constantly wondered where I was and where to go next.

5. Error prevention
This site did have a unique take on the 404 or Not Found error message. When I typed an incorrect url, it redirected me to the homepage. Not the best solution, but unique.

6. Recognition rather than recall
This site had a simple design and minimal images. The load times were very quick because there was not much to process.

7. Flexibility and efficiency of use
This site was not flexible and I constantly felt lost.

8. Aesthetic and minimalist design
The sites design was minimalist, but they pilled so much content into the page, it quickly became overwhelming. "Dialogues should not contain information which is irrelevant or rarely needed." Because it was unclear why I was at this site, everything seems irrelevant or rarely needed.

9. Help users recognize, diagnose, and recover from errors
They did not express errors that I could see.

10. Help and documentation
There was no site map, no contact us, only an email…wonder what would happen if I emailed and sake how or why do people vista there site.

Can anyone explain what this site is for?

Raymond Uphoff's picture
Raymond Uphoff
Sat, 2011-02-19 15:59

User-centered Design: Biobak.nl

1. Visibility of system status
Website gives visual and vocal feed-forward which section to enter and feedback if focus of a link has been triggered. The extra vocal feedback is a nice bonus.

2. Match between system and the real world
Mental model of finger-pointing is in my opinion a clear real-world conventions to show that the user has several options. Maybe it would be better that the user would get feedback when they triggered an navigation-event by showing a 'grabbing hand' animation. The designer has put a directions to the user.

3. User control and freedom
When I click on the send button without giving my mail address and/or message clear messages appear. This messages guides the user to properly perform the 'send mail'-task.

4. Consistency and standards
The section User Awards uses also finger-pointing but when I select an item nothing happens except from showing a label. This is not consistent. In the section 'BioBakgraphy' there is a 'drag me' button, I thought it was a button. But it's actually a label for a different object. The T-rex should have this feed-forward 'cause the rest of the website uses this convention.
In the same section there is a label for reading more, because of the arrow it's clear that the text itself has to be pressed for new content. It doesn't make sense that in the awards-section 'version one' and 'version two' are labeled but they don't hold any navigation-triggers.

5. Error prevention
Although it's a creative website the designer gives the user the task to put the the text-field back in it's place. From usability perspective it's strange because a user can't avoid this 'error'. Creative but not user-friendly.

6. Recognition rather than recall
The designer has done a good job when it comes to instructions. Instructions take up a prominent role in this design. The navigation-structure isn't that complicated so there is not much a user has to remember. By giving each section a heading is sufficient to know my location. Probably it would be helpful to give the navigation-objects a visited-state so user knows he visited that section.

7. Flexibility and efficiency of use
To my knowledge not applicable for this website.

8. Aesthetic and minimalist design
The website holds a few dialogs that are not necessary but most of the time these are labeled like 'doesn't do anything'.

9. Help users recognize, diagnose, and recover from errors
Yes clear messages. Read Error Prevention.

10. Help and documentation
No documentation available. The website doesn't need this because of the few user-tasks and flat site-structure.

Overall

I presumed this site wouldn't score very well when it comes to Usability because of it's 'creativity centered nature', but it actually does a pretty good job. There are some improvements but it scores pretty descent. I rate it from an Usability-perspective a 3.5 (out of 5).

Mela S.'s picture
Mela S.
Sun, 2011-02-20 14:29

I chose Uniqlo because, like the other posters in this forum, I love their clothes BUT their website frustrates me.

1. Visibility of system status
- the site loaded pretty quickly in most cases for me, so I didn't need any loaders. There was one subsite with a loader, so that was a plus
- the exception to this would be the "Uniqlooks" section. After clicking on the link, I'm taken to a subsite with a huge blank space and I don't know what it's supposed to be. Is it intentionally left blank? Is something supposed to be there but it's just not loading? I'm genuinely confused!

2. Match between system and the real world
- it's the US site but there's a section where "Men" and "Women" is labeled in French
- the text is generally OK with me, but I wish they had described some of the terms used in the product search. What exactly is a "pocketable" parka? I was also confused with some terms -- like "pique" and "waffle" -- but when I Googled them apparently they're real terms to describe clothing, but I don't think they're that well known.

3. User control and freedom
- as this is a website, the part about choosing system functions by mistake isn't really applicable. If a user gets lost, they can easily go back to the main page
- I especially like the product search feature. Instead of having to refresh the query, the results are updated in real time. One of my pet peeves when using a search feature with multiple filters is that sometimes it's hard to change between filters.

4. Consistency and standards
- props to Uniqlo for using colors and fonts consistently
- BUT I find that subsites often have very different layouts and navigation, which makes it confusing
- there are some features that are inconsistent. For example, the "Antoni Alison" subsite allows you to check out different shirt colors and textures by clicking on tiny boxes. The "Heattech" subsite has similar boxes in each product box but they're not clickable.

5. Error prevention
- not really applicable

6. Recognition rather than recall
- I think Uniqlo fails at this, sadly. The subsites have different formats so navigation is different for each case.

7. Flexibility and efficiency of use
- I think that the site is pretty inflexible. The product search is pretty efficient but that's it. There's only one way to search for a product, either through the product search or through the product pages

8. Aesthetic and minimalist design
- well... it looks pretty. Most of the text is readable. White space is good. Images used are good

9. Help users recognize, diagnose, and recover from errors
- not really applicable

10. Help and documentation
- no help and documentation available. As I've mentioned several times, subsites have different behaviors. There's one subsite which consists of scrolling models. There are some subsites that contain detailed product information or feature a certain designer. One of the stylebooks features a static listing of models. And there's this one subsite which comes up with a grid where various clothing items pop up. There's no real instruction on how to use this site other than just clicking around, and sometimes I'm left wondering, "is this it? Or am I using something else?"

SUMMARY:
I give Uniqlo a 4/10 for usability.

It gets points for having aesthetically pleasing design and a consistent color scheme. There's no denying that the entire site looks pretty -- the colors go together, they use high-quality photos, there's a good mix of images and text, and the layouts are good.

It also gets points for the product search! I like their product search (reasons outlined above.)

However, it gets stars off for a host of reasons:
- products are scattered throughout the site. Some of the specialty t-shirts they have (ex. t-shirts by designers) are NOT listed in the product search and can only be accessed separately
- there are a lot of subsites that don't seem to mesh well with the rest of the site. These subsites usually have their own navigation and functionality, and it's not clear to the user what to do, sometimes. Links are not always clearly marked / distinguishable from content
- form seems to have taken precedence over functionality. Yes, the site looks pretty and the rotating models, etc. look cool but to a person who just wants to find out more about a certain product, it's extremely confusing

Also:
- I'm really annoyed at how the subsites all pop up in new browser windows. :P

Anthony Garritano's picture
Anthony Garritano
Mon, 2011-02-21 03:34

I have a question. In the provided link for the UPA on UCD, they state:

In this model, once the need to use a human centered design process has been identified, four activities form the main cycle of work...

This is stated like there is another approach to design your interface with. What other approaches are there? Why would you not use a User Centered Design approach?

(link: http://www.upassoc.org/usability_resources/about_usability/what_is_ucd.html)

Levi Fuson's picture
Levi Fuson
Mon, 2011-02-21 20:38

I chose to review the site http://www.legoclicks.com

I chose this because I have two children who play with legos and are sufficiently “internet competent”. It also gave me a plentiful usability testing ground to study.

At first look, this site is very confusing and gives no understanding of what the purpose of the site actually is. Although very visually creative and aesthetically innovative, all usability elements on the site seem to purposefully go against the natural leading if the user. The loading element is not intuitive enough to explain that the site is indeed loading, once loaded the scroll starts at the bottom and drives upward, the RSS feed enters from the bottom and pushes up, the navigation is bottom heavy and very heard to see onLoad, many of the major sections for interaction are only visible once you have scrolled completely to the top.

As I began to play with the site, and as a proficient user with a good understanding of interactive problem solving, it was fairly easy for me to figure out what was going on. It was, however, not a pleasurable experience to use this site… for me.

My children, seemed unheeded by all of my listed issues. With the exception of the loading issue (which they got through do to the fact that I made them wait) they easily understood the user interaction. Scrolling down to up seemed fairly intuitive to them, they easily found the interaction points at the top of the design. The only real issue was that they seemed to completely ignore the bottom navigation. After asking about this they both stated that they saw nothing on the nav bar that interested them. I don’t really know whether this is a negative, although this may have been different for an older user.

So usability took 2 totally different directions based upon the demographic. Clearly this site is built for the latter demographic. I seriously doubt that the designers were that worried about the 35-55 year old demographic when designing this site. Therefore many of the usability issues I experienced with this site could be passed over simply because I am not part of the user profile that the site was developed to satisfy.

Anthony Garritano's picture
Anthony Garritano
Tue, 2011-02-22 00:04

I chose to review: http://www.griplimited.com/

When first entering Grip Limited, I was completely overwhelmed. There is just so much going on, I don't know what to look at first. The first thing I noticed was that there were large columns, and I immediately shifted attention to the column titles. I didn't see a scroll bar and couldn't figure out how to navigate. Being a designer, I knew that it was probably built so that I could click on the far sides of the browser window to get it to scroll. My assumptions were correct.

It took me about three minutes to really begin consuming the content. I was so overwhelmed I kind of just clicked around for a bit. It wasn't until I actually began looking at the columns that I saw that instructions were provided on how to use the site! What is ironic is that I actually thought to myself, "They should have given some instructions."

The main problem is the composition. The user is absolutely overwhelmed when the come to the site. Everything is just thrown at you, and you're not sure where to start or what to do.

This leads us to the second largest problem: navigation. They are using a non-standard form of navigation for their site, so that automatically makes the site much harder for the user to learn and use. This might even be overlooked if done very well, but the instructions for using the site are thrown in with regular content. If you're going to be different from everyone else, I need to know what is different and how to use it.

In my opinion, Grip Limited is a usability nightmare because it has a horrible composition.

Laeti G's picture
Laeti G
Wed, 2011-02-23 01:24

Hi all :)
First of all, my apologies for posting that late on a passed thread... I have to catch up upon time...

Here are my answers to this class discussions :

1/ Additional composition principles
------------------------------------
- Regrouping of data and objects: make sections division clear to the user, avoid him having to visually sort out what goes with what, what is aiming at what in the page

- Hierarchy: in objects importance, in headings

- Harmonization of shape and content: see to it that shapes serves the content, rather than overwhelming it

2/ Example websites versus Jakob Nielsen's heuristics
------------------------------------------------------
- http://www.theologos.gr/en.html even though I found this site very beautiful and nice to land on, I would point out the heuristic « Flexibility and efficiency of use » as a one that lacks. Once we experienced the very first impression of aesthetics and serenity, we may feel like being able to access information a little faster.

- http://bio-bak.nl/ in this very well-made and very fun to use website, I would say that the heuristic « Help users recognize, diagnose, and recover from errors » is particularly well implemented.

Laetitia

Daniel Rios's picture
Daniel Rios
Sun, 2011-02-27 11:08

[W3] Diseño centrado en el Usuario.[ESP]

Yo seleccione http://www.legoclick.com/ y estuve esperando cerca de 10 minutos buscando que hacer para ingresar.

El inicio: A) No te da lo que quieres de inmediato, B) el tiempo de espera es muy largo y C) No te da una idea clara de que significa lo que ves o de que contiene la página.

En contra: Cuando comienza lo hace desde la parte inferior de la página, cosa que puede ser confuso para el usuario.

A Favor: Utiliza una barra de desplazamiento que es un elemento conocido.

En contra: Los elementos animados distraen.

A favor: Los temas en las secciones son atractivos.

En contra: Los elementos surgen de la parte inferior y superior.

La navegación por la página es complicada, luego de un par de minutos ya estaba ansioso por dejar la página. Finalmente la ayuda no es nada practica ni evidente.

Bradley Harkrader's picture
Bradley Harkrader
Wed, 2011-03-02 07:01

I evaluated http://www.gringo.nu/projects/cokelight-worldflavours/#/world

VISIBILITY OF SYSTEM STATUS
site does a good job of showing the visibility status with the coke bottle upon first visiting the website. when a balloon is clicked it becomes more difficult to see the status, the balloon is floating which makes you assume the site is loading but you do not know how far

MATCH BETWEEN SYSTEM AND REAL WORLD
site speaks users language in familiar and understandable terms

USER CONTROL AND FREEDOM
no emergency exit once clicking on balloons

CONSISTENCY AND STANDARDS
symbols behave consistently to one another, except when a symbol does not work, which appears to be an error.

ERROR PREVENTION
site is very bad on error prevention. once clicking on a balloon the site freezes with balloon floating away. when this happens there is no way to get out of this particular site.

RECOGNITION RATHER THAN RECALL
recognition and recall seems to be pretty good, the symbols all behave similarily

FLEXIBILITY AND EFFICIENCY OF USE
if familiar with site, can select balloon w/o picking "personality"

AESTHETIC DESIGN VERY GOOD
design is clear, consistent, and interesting

HELP USERS RECOGNIZE, DIAGNOSE, AND RECOVER FROM ERRORS
no error message or dialogue when balloon error "freezes" and floating away

HELP AND DOCUMENTATION
some directions at opening website.

frontman's picture
frontman
Sat, 2011-03-05 01:52

Hello,

i chose - www.marcecko.com

Visibility of system status
Coming back from top-navigation (drop down) - the visbility of the main navigation (boxes) is blocked for a while - have to scroll up with the mouse again. Maybe thats due to my slow internet connection.
The site is overflown with boxes. At first site it is hard to figure out what all these boxes stands for and where i can find what. On my small laptop screen it is hard to navigate that page. It annoys you. Almost half of the page will be covered by the drop down menu at the top. Nice designer work though. Where are the news? What is hot what's odd?

Match between system and the real world
There is no logical order. The terms/language used is not familiar to me. Sure I know Lindsay, sure I am used to Facebook and a store locater. The other boxes don't attract me at allow and are not attractive. What use for?

User control and freedom
Almost every click triggers that there will open a new window/tab. As far as my browser is full of marceck.com. That's a bit annoying and limits my freedom of a clean and neat navigation. Also the use of colour and images differes from the main page dramatically. I miss the consistancy in the use of colour and message.

Consistency and standards
Coming right to the point - there are standards but there is a lack of consistency (images, backgroundcolours) This pages is mainly black/white in the beginning but if you click on you will find all sorts of colours. No red line in appearance.

Error prevention
The error prevention works. I haven't hit any error message. Though i have to say Flash isn't the best vehicle to choose when you want to prevent errors.

Recognition rather than recall
Recognition is a lot easier with clear symbols - to use b/w pictures with a distortion and small headline don't helps to recall things. Make it baby! (that means infantile)

Flexibility and efficiency of use
There is no real flexibility or "speed dial buttons" used on the homepage. To go to the same page always you have to use the same steps and don't forget to close all the tabs. Aaah :-)

Aesthetic and minimalist design
To get to the information is hard. There is few text. And to find something interesting you have to search deep. Overcomplicated. Overstylish. Where is the nitty-gritty?

Help users recognize, diagnose, and recover from errors
I am sure he hasn't thought about that. The web-shop in deed help preventing errors and is well laid out and structured. Regrettably I cannot appreciate ordering something as these goods won't be send to my country Peru :-(.

Help and documentation
I like the search box. But how do I know what I am searching for? This page has so many topics - it is hard to get the message.

Overall:
I don't like the homepage at all concerning User Experience but I am sure it was a lot of work to do.

Bianca Zanardi's picture
Bianca Zanardi
Sun, 2011-03-06 17:00

http://www.vanalen.org/

There are loading bars and the link colors change when you hover it. There's a problem with consistency tho. Pink is used to mark where you are and also to highlight the links, but for the timeline arrows there's a different logic.

There's a break of consistency on the Publications section. Everywhere else you can click the image or the link to "read more", but there you can only click the text link.

There are many broken links and unnecessary ones. They keep the links for next and previous image on the galleries, even when there's only one image.

The index (timeline) is supposed to bring some fun to a serious website but it seems a bit out of place. Maybe they need a better title for it. It does a good job as decoration and it would be a great accelerator if that section was more useful.

Most of the broken links are at the timeline. From there when you click on "more" [information] it is either a broken link or you get to the programs section. This section is not linked anywhere else, it has information that could clearly be presented elsewhere and a confusing ghost menu.

The main menu is well organized making it is easy to find relevant information.