# data[].attributes.attachment_link.readable_text
Thursday May 8th, 2014 by Heiko Tietze and Thomas Pfeiffer

Introduction

KDE tries to be as much customizable as possible: All freedom to the user! This leads to an extended configuration that might be confusing to new users. Additionally, modules from different sources are aggregated in a way that not necessarily fits the mental representation of users. For instance, the distinction between 'workspace appearance' and 'window appearance' is not common in other desktop environments.

Therefore we started a card sorting test to analyze how people think about system setting. Here we present the results.

Method

Card sorting is the standard method in usability to analyze hierarchical information. Participants are asked to build a structure that fits best their representation by creating groups and sorting all items (aka index cards in the offline world) into these groups. Items sorted into the same group get higher similarity value. And the statistical evaluation aggregates the individual grouping to an average model represented by a dendrogram.

Results

First: the KDE community is awesome! Within a few hours we got enough responses for the evaluation, and in total we have 331 answers. Thanks a lot, it's great to be part of it. All analysis results are available online ( http://conceptcodify.com/studies/keodby8c/analyze/).

Comparing the dendrogram based on user responses (right figure) with a virtual dendrogram as constructed by the actual system settings (left figure) the different categorization becomes obvious. There are about six main topics covered by system settings with some subordinate categories.

To go into detail, we built a heatmap from the similarity matrix. Items that are regularly sorted into the same group have a higher similarity and are colored from blue for low values over green and yellow to red.

Some groups are very prominent:

1. Window Management / Workspace
It contain of two sub groups with a) Activities, Activity Settings, Virtual Desktops, Manage Notifications, and b) Window Behavior, Window Rules, Kwin Scripts, Task Switcher, Screen Edges.

2. Shortcuts
Including Global Keyboard Shortcuts, Standard Keyboard Shortcuts, Custom Shortcuts

3. Appearance
Desktop Theme, Icons, Cursor Theme, Style, Fonts, Colors, GTK, Emoticons, Window Decorations

4. Personalization / Accessibility
Containing a) Country / Region & Language, Spell Checker, Accessibility, and b) Accounts, Password and User, KDE Wallet, Social Desktop (only partially associated with 4a, and separated into distant nodes at the dendrogram)

5. Hardware / Devices
That is a) Mouse, Touchpad, Joystick, Keyboard, Graphic Tablet, Remote Controls and b) Devices, Adapters, Energy Saving

6. Networking
Connection Preferences, Proxy, File Transfers, Service Discovery, Windows Shares

A few items are ambiguous:

Launch Feedback, Workspace, and Screen Locker: these items are related to 1. Window Management/Workspace or 3. Appearance

Display Configuration and Gamma which are associated with 5. Hardware, but Gamma with 3. Appearance too

Web short-cuts with 2.Shortcuts or 6.Networking

System Bell which seems to be very confusing (it's actually an ancient feature of notifications) and has relations to 1a, 2, 4a, 5b, or Launch Feedback

Conclusion

As commented by others the study has the bias of potentially unknown functions, or rather unusual names or items out of context. For instance, Devices and adapters are originally an item of Bluetooth settings, and would probably have been sorted differently with this information. Furthermore some settings rather target experts, like KWin Scripts, and should be placed less prominently. Hence our following suggestion is only loosely based on the results.

Six top level groups (or topics) should be enough to organize the modules and to maintain the task. This is quite similar to what we have right now. But the assignment of subordinate categories and the corresponding items is slightly different, some have improved labels too.

Appearance

Themes (aka Workspace) (Widget Style, Desktop theme, Cursor theme)

Style (Window decoration, Splash screen, Gtk)

Colors

Font

Emoticons

(Remark: Jens Reuterberg proposed some kind of mega theme at the KDE forum, which sounds pretty nice. But all topics need some categories to keep the navigation consistent. Another point for discussion is where Widget Style belongs to: Theme or Style? Again, we should take care of balancing the structure.)

Workspace

Window behavior (Desktop effects, Screen Edges, Launch Feedback, Task switcher, KWin Scripts, Window Rules)

Notification (Applications, System Bell)

Shortcuts and Gestures (Custom, Standard, Global)

Activities

(Remark: Can't we just drop the beep support (aka System Bell)? Who owns and want to use an in-built speaker instead of jingles?)

Personalization

Account Details (Password, Path, Wallet)

Regional Settings (aka Locale) (Country/Region, Language, Spell Checker)

Standard Programs (Default Applications, File Association, Desktop Search)

Accessibility

Networking

(Network) Settings (Proxy, Preferences, Certificates (aka SSL Preferences), +Network Manager)

Connectivity (Accounts aka (PIM) Personal Information, Instant Messaging and VoIP, Social Desktop, Web Shortcuts)

Sharing

(Remark: Network Manager settings should get an own KCM, which is being in preparation right now. Secondly, it is questionable if PIM accounts should have a central configuration since it's applied in Kontact only. And, apparently from the study results too, the organization of web shortcuts is difficult and could be improved by another wording.)

Hardware

Input Devices (including Keyboard, Mouse, Touchpad, Joystick, Remote Control, Camera)

Display and Monitor (including Gamma)

Removable Devices

Printers

Multimedia

Device Actions

Power management

Software

Bodega

Adobe Flash Player

(Remark: Apparently, Bodega is just an idea for future improvements. The topic could be extended by the distribution specific software management.)

Based on this list we will outline an idea how to get both simple access to a module and the full set of features without introducing a further navigation. Join the discussion at the KDE forum!

# data[].attributes.attachment_link.title
Results of Card Sorting the KDE System Settings

# data[].attributes.attachment_link.description
Thursday May 8th, 2014 by Heiko Tietze and Thomas Pfeiffer KDE tries to be as much customizable as possible: All freedom to the user! This leads to an extended configuration that might be confusing to new users. Additionally, modules from different sources are aggregated in a way that not necessarily fits the mental representation of users.

# data[].attributes.body
http://measuringuserexperience.com/CardSorting/index.htm

# data[].attributes.attachment_link.keywords[]
seminario de iniciativas sobre discapacidad y accesibilidad en la red

# data[].attributes.attachment_link.description
Pgina sobre Usabilidad y Diseo Centrado en el Usuario. En estas pginas encontrar informacin sobre el concepto de usabilidad, diseo centrado en el usuario, mtodologas de aplicacin, bibliografa adicional y enlaces de inters sobre estos conceptos

# data[].attributes.attachment_link.readable_text
5 minutes read

"You're the real thing. Yeah the real thing. You're the real thing. Even better than the real thing". Of course the debate continues as to whether Bono was singing about online card sorting or not during U2's seminal ' Even better than the real thing ', but assuming he was, was he correct? Is online card sorting really better than the real thing or a poor substitute for face-to-face card sorting? What are the pros and cons of online card sorting and when might you use it (or not use it) for a project? In this article I try to answer these important questions, along with outlining a few online card sorting tools that you might use for a project.

What is online card sorting?

Before we get in to the pros and cons of online card sorting it probably makes sense to outline what exactly I'm talking about. When I'm referring to online card sorting I'm basically talking about card sorting sessions in which participants carry out the card sorting online and at their own leisure (i.e. the sessions are not moderated). In a nutshell you:

1. Define the items (i.e. cards) to be sorted and add them to the online card sorting tool. For example these might be page for a website, items in a menu, different types of content, or even products for sale on an ecommerce site.

2. Define the groups for participants to sort items into (called a closed card sort), or alternatively leave it up to participants to come up with their own groups (called an open card sort).

3. Send out invitations (usually via email or a hyperlink) for people to participate in the card sorting sessions.

4. Sit back (with a smug look on your face) and wait for the card sorting results to start rolling in...

Online card sorting - the pros

So now for the million dollar question: Is online card sorting any good? More importantly, is it better than face-to-face card sorting? Well it certainly has a number of advantages. These include:

It's easier to set-up than face-to-face card sorting. You don't have the hassle of trying to arrange lots of card sorting workshops and of finding a date, time and place that's good with participants. You can simply set-up the cards (and groups if it's a closed sort) and let participants carry out the card sorting at their own leisure.

It's quicker and easier to get lots of results. Online card sorting allows you to get hundreds of results in a matter of hours. You try doing that with face-to-face card sorting!

It's easier to recruit participants for. Online card sorting requires much less effort on behalf of participants. They can carry out the card sorting when they want, where they want and at what pace they want (assuming you don't set a time limit) so there are really no excuses for them saying 'no'.

It's (usually) cheaper to carry out. By using an online card sorting online tool you shouldn't have to pay participants so much (if anything at all) for taking part and there are no travelling expenses to reimburse, nor venues to pay for. It's not all good news though - online card sorting tools are not free (unless you're undertaking a seriously small study) so you will have to stump up at least some cash.

There's no need to input data after the sessions. Online card sorting tools capture all the card sorting data so you don't have to spend hours after each session meticulously recording the groups formed.

Online card sorting - the cons

Online card sorting sounds awesome, where do I sign? Well hold your horses because there are also a number of disadvantages over face-to-face card sorting. These include:

It doesn't deliver as rich feedback. The biggy. Online card sorting is much more geared towards quantitative rather than qualitative feedback. It will tell you what was placed where, but not necessarily why.

It's not as natural as sorting real cards. Whereas sorting a stack of physical cards is very natural for most people, doing the same thing online can cause some participants difficulties. You're very much at the mercy of the online card sorting tool you use and even the best can cause usability issues that might bias the results.

It's not as flexible. Face-to-face card sorting is as flexible as you need it to be. Want to use different size or colour cards depending on the type of content? No problem. Want to include a picture and extra information on cards? No problem. With online card sorting you're limited by the tool you use and whilst these are improving, they often provide very limited flexibility around how the card sorting is carried out.

You can't change it on the fly. Once you've set-up an online card sort you usually can't change it. This can be a considerable pain if you've forgotten a card or want to change the groups slightly between sessions.

You're at the mercy of technology. Face-to-face card sorting never crashes, the same sadly can't be said for its online equivalent.

You'll (probably) need to find money for licenses. All the major online card sorting tools of course charge for their services (although some are free if you're undertaking a very small study with less than 10 participants) so you'll need to find money to cover this.

When to use online card sorting

OK so online card sorting has its pros and cons but when is it going to make most sense to use if for a project? Well I'd primarily recommend using online card sorting when you either need to get lots of results for a card sort (i.e. 25+ results), or when you can't easily set-up face-to-face card sorting sessions. Also don't think that you have to use one or the other within a project. I've often found that it's best to use a combination of face-to-face and online card sorting. For example, you might use face-to-face card sorting to explore user's mental models and to come up with an initial set of groups, and then test this using online card sorting.

When not to use online card sorting

Sometimes knowing when not to use tool is more important than knowing when to use it and online card sorting is certainly not a one size fits all solution. In my own experience online card sorting is better for carrying out closed card sorting (i.e. testing pre-defined groups), rather than open card sorting (i.e. exploring possible groups). This is because it rarely tells you why a particular group has been created, or why items have been placed where. For this reason if you need to find out the sort of mental model that users utilise when sorting items into groups, or there's a lot of uncertainty around how items might be grouped then I'd recommend not using online card sorting.

Remotely moderated card sorting - the third way

Remember I said that online card sorting isn't recommended if you need to know why users place items into particular groups; well there is a third type of card sorting that might be used instead - remotely moderated card sorting. Remotely moderated card sorting is like a cross between face-to-face and online card sorting. You set-up your card sort using an online or desktop application based card sorting tool (such as xSort for Mac OS, or UXsort for Windows) and then observe (using a screen sharing tool such as WebEx or GoToMeeting) as someone remotely carries out the card sorting on your PC.

Remotely moderated card sorting allows you to almost get the best of both worlds. You can get the rich qualitative feedback of face-to-face card sorting without having to organise face-to-face sessions with users. However, be mindful that you inevitably won't get the same level of feedback that face-to-face sessions deliver, and that carrying out remotely moderated card sorting with groups is tricky to say the least.

Online card sorting tools

In my humble opinion these are the best online card sorting tools currently out there.

Part of the Optimal Workshop suite of remote UX tools from Optimal Usability. Free for small studies (up to 10 participants) or pay a monthly or annual subscription.

Another great remote UX tool from Lime & Chile Productions. Free for small studies (up to 10 participants) or pay for a single study, for 5 studies or a monthly subscription.

Part of the UserZoom suite of remote UX tools. Pay for one study or an annual subscription.

Proven by users is a new online card sorting tool. It's completely free until Jan 1st 2018 (whilst on Beta) and will offer a free subscription with limited results collection after that.

More about online card sorting

# data[].attributes.attachment_link.title
Online card sorting - even better than the real thing? - UXM

# data[].attributes.attachment_link.description
Is online card sorting really better than the real thing or a poor substitute for face-to-face card sorting? Find out what the pros and cons of online card sorting are and when you might you use it for a project.

# data[].attributes.attachment_link.readable_text
Official user interface (UI) and user experience (UX) guidelines from the manufacturers, links to which you can find below, are a source of inspiration for mobile web and app design. Here, you will find guidelines, samples, tips, and descriptions of common mistakes. Many of the guidelines focus on native application development, but we can apply most parts of them to mobile web design too.

Remember to provide the best possible experience on each platform. Do not deliver an iPhone experience to a BlackBerry user. Every platform has its own UI and usability guidelines that every user is expecting on your app.

More tips on mobile web design on the Programming the Mobile Web book.

Do you know any other UI Guideline? Insert the link on the comment area.

# data[].attributes.attachment_link.title
UI Guidelines for mobile and tablet web app design

# data[].attributes.attachment_link.description
Official user interface (UI) and user experience (UX) guidelines from the manufacturers, links to which you can find below, are a source of inspiration for mobile web and app design. Here, you will find guidelines, samples, tips, and descriptions of common mistakes.

# data[].attributes.attachment_link.readable_text
Following on from my article about how to create great UX documents, I thought that it would be useful to collate some example UX documents and deliverables together. This should hopefully provide a bit of inspiration and assist when it comes to choosing the type of document(s) to produce. For each document / deliverable I've included examples, together with a quick outline and links to more information. The following UX documents and deliverables are covered:

Content models | Empathy maps | Experience maps | Mental models | Personas | Process diagrams | Prototypes | Scenario maps | Scenarios | Sitemaps | Sketches | Storyboards | Style guides | Style tiles | System maps | Task grids | Usability reports | User journeys | User story maps | Visuals | Wireframes | Word clouds
Please note that the majority of these example documents are not my own. Click on a document to view the source.
Content models

A content model shows all the different types of content that you will need for a given design, whether it's a website, app or even brochure. Content items are shown together with their fields, types and the different relationships (such as ownership) between the content. Content models are quite similar to domain models.

Whilst it's more typical for a systems architect, developer or even content specialist to create a content model it's something that UX designers should be aware of (and might need to construct). Decoupling the content from the design is also becoming increasingly important for responsive and mobile design. You can learn more about content models at Content Modelling: A Master Skill (A List Apart).

Empathy maps

Empathy maps typically (but not always) accompany personas. They provide information about users, such as what they might be thinking, feeling, doing, seeing and hearing; together with pains and gains that they might experience.

Empathy maps are a good way to bring personas to life, to encourage empathy with users (the clue is in the title) and buy in from the wider project team. It's often a useful exercise to collaboratively create empathy maps, or at least to review with the wider team. There is more information about empathy maps, including even an online empathy mapping game on the innovation games website.

Experience maps

Experience maps (sometimes called 'Customer experience maps') show a customer's end to end journey and experience for a given goal. For example, you might have an experience map for going on a holiday which would cover everything from researching holidays, to actually going on the holiday and then writing a holiday review.

At each stage of the journey an experience map will show information such as the touch points that the customer uses, what they are doing, thinking and feeling; along with any frustrations and ideas for improving the experience. They are great documents for communicating the customer's experience and for designing multi-channel user experiences. Adaptive Path has an excellent guide to experience mapping that you can download for free. Also take a look at my Moving from task based to experience based design presentation that covers experience mapping and these additional example experience maps from UX Lady.

Mental Models

Similar to task grids, mental models outline the thought processes (i.e. mental model) that users employ when undertaking a given goal. For example, when planning a night out with friends or deciding where to go on holiday. Mental models show the steps broken down into tasks and the sort of questions and considerations that users will make at each step.

Mental models are useful for communicating and capturing user behaviour and for identifying design opportunities. There is lots more information about mental models in the Mental Models book, by Indi Young, the first chapter of which can be read for free.

Personas

Personas are fictional representations of your users (a bit like user stand-ins). They are fictional, but should be based on fact. They represent the goals, motivations, characteristics and behaviours of a real group of users.

Personas help to put a human face to users. They help the project team to get consensus on who the 'users' are (not always an easy thing) and help to communicate important information about users. Take a look at my Getting the most out of personas article for more about personas and how to best utilise them.

Process diagrams

Process diagrams visually show a process, including the different decision points and process flows. They are more commonly used by business analysts but can be equally used by UX designers to outline a set of user journeys, or the logic utilised within a particular part of a site or app.

Prototypes

Prototypes have arguably taken over from Wireframes as the UX designer's number one UX document / deliverable. A prototype is basically a semi-functional mock-up of the design. They are great for communicating a design, for evaluating a design (for example via usability testing) and for generally showing what should happen.

I've previously outlined why I think prototypes are infinitely better than wireframes and with an increasing number of Prototyping tools on the market, there is really no excuse not to be creating interactive prototypes. For a comprehensive list of prototyping tools out there take a look at Adaptive Path's Rapid Prototyping Tools list.

Scenario maps

Scenario maps show the steps that a user will go through for a given scenario (hence the name). They not only capture the steps but also good ideas, questions and other information that might be useful when considering a design.

Scenario maps can be created for current scenarios, along with future scenarios. They typically focus on what a user will do, not necessarily how they will do it. You can find out more about scenario maps in my step by step guide to scenario mapping article. Scenario mapping is also outlined in detail in the excellent The Persona Lifecycle - Keeping people in mind throughout product design by John Pruitt and Tamara Adlin (although it's called 'reality mapping' and 'design mapping' in the book).

Scenarios

Scenarios either visually or narratively (i.e. using words) outline the steps that a user (usually in the form of a persona) will take for a given scenario. Like scenario maps they can either be for existing scenarios, or for envisaged scenarios.

Scenarios are great for identifying the features and functionality that will be required to support the desired scenario and for bringing a future product or service to life by telling the user's story.

Sitemaps

Sitemaps show the pages and screens that make up a website or application, or a particular part of a website or app. They often indicate groupings, such as site sections and links between the various pages and screens.

Sketches

Sketches are usually more of a design artefact than deliverable. That is, they are usually created to help communicate a design or concept, rather than being a more formal document in their own right. None the less they can be a useful UX document for showcasing concepts and early designs. Take a look at my Joy of sketch(ing) article for more on sketching.

Storyboards

Storyboards are borrowed from cartoons and the movies (never be afraid to nab a good idea if you see one). They graphically show a scenario in a comic book fashion and are great for bringing something to life. Johnny Holland have a set of Storyboarding & UX articles that are well worth a read if you want to find out more about storyboarding.

Style guides

As Susan Roberson outlines in her excellent creating Style Guides article, "a style guide is a living document of code, which details all the various elements and coded modules of your site or application". It will often not just cover the visual look and feel of elements (such as text, buttons, UI components etc...), together with the HTML and CSS code, but also detail design patterns and correct usage.

There are lots of example style guides out there. Some good ones include:

Style tiles

As described on the cleverly titled Styletil.es website style tiles are, "a design deliverable consisting of fonts, colours and interface elements that communicate the essence of a visual brand for the web. Style Tiles are similar to the paint chips and fabric swatches an interior designer gets approval on before designing a room. They help form a common visual language between the designers and the stakeholders and provide a catalyst for discussions around the preferences and goals of the client."

Style tiles are more of a graphic design deliverable than a UX document. However a UX designer would certainly input into a set of style tiles and may well create a set if they have graphic design expertise.

System maps

A system map visually shows the different actors and artefacts for a given product or service, along with the relationships between them (think of it as an eco-system map). Actors might be users of the service or staff actually delivering a service. Artefacts could be everything from a website, to a physical object such as a brochure or print out.

System maps are great for capturing the different elements that are involved for a product or service (either existing or future) and for taking a more holistic view of the UX design.

Task grids

Task grids are often the main output of task analysis. Task analysis involves breaking down a larger task, such as sending an email into its constituent steps and stages. Task grids are very similar to experience maps, but typically show an existing task, rather than a future, desired experience.

For each step of the task the sort of questions that a user might ask are outlined, together with potential pain points and feature ideas.

Usability reports

Usability reports are typically used to either detail an expert evaluation, such as a heuristic evaluation or cognitive walkthrough or to communicate the results of some usability testing. The key for any usability report is to keep it as brief as possible (there's nothing like ploughing through a 100 page+ report) and to use visuals wherever possible. You can find more information about expert evaluations in my A guide to carrying out usability reviews article.

User journeys

Whereas experience maps generally show the end-to-end customer journey, a user journey document typically only shows part of the user journey. For example, it might be the journey through a website, or when completing a particular task.

The journey is usually broken down into the steps taken by the user, often with visuals shown to help illustrate the story.

User story maps

User story maps are often created as part of an agile software development project. They map out the user stories that make up the various product features and future releases.

User stories are used within Agile to capture user requirements. They usually take the form of: "As a <role>, I want <goal/desire> so that <benefit>".For example, "As a help desk operator I want to retrieve a previous help desk enquiry so that I can find out what has happened to date ".

You can find out more about Agile and UX in my Tips for bringing UX to the Agile party article. Jeff Patton also has lots of information about story mapping on this website. He has also handily written a book about user story mapping.

Visuals

Visuals, mock-ups, composites, call them what you will (I think the term visuals is clearest), graphic design visuals are a key UX document. They show what the finished design should actually look like. With the rise of responsive design more component based visuals (such as style tiles) are becoming increasingly popular.

Wireframes

For years wireframes have been the key UX document for UX designers. However, with ever more powerful and easy to use Prototyping tools on the market (not to mention an appreciation of the limitations of wireframes) Prototypes are starting to muscle in on Wireframe's UX document top spot.

A wireframe basically shows the UI elements (text, images, buttons, links etc...) that make up a screen, page or UI component. They are a bit like a blueprint for the UI, showing which elements make up the UI and how they should behave, but not necessarily what the UI will look like.

Word clouds

Word clouds (sometimes confusingly called tag clouds) are simply a way of visually displaying a set of words as a shape. Usually that shape is a cloud (hence the name), with the size of words increasing with their importance or frequency.

Word clouds wouldn't generally be a UX document by themselves, but can be useful for communicating UX related information, such as inbound search terms, customer feedback and on-site search terms. You can read more about word clouds in my Say it with a word cloud article. Also take a look at Three Ways to Improve Your Design Research with Wordle (Boxes and Arrows).

# data[].attributes.attachment_link.description
Following on from my article about how to create great UX documents, I thought that it would be useful to collate some example UX documents and deliverables together. This should hopefully provide a bit of inspiration and assist when it comes to choosing the type of document(s) to produce.

# data[].attributes.attachment_link.readable_text
Around 1993, my dad brought home a large, brick-shaped mobile phone. We were all incredibly excited by the new technology, even though none of us thought it would have a massive impact on our lives. I actually still thought of it as a gimmick, a few years later, when some of my friends decided to purchase them.

Today there are six-billion mobile subscribers in the world - meaning if there were one mobile per owner then 87% of the world's population would have one. And considering that fewer than three billion people use a desktop computer, that's quite a big difference.

Mobile devices are clearly here to stay, and along with them come a whole host of new constraints (and opportunities) for our designs. Let's take a look at how we might update our approach.

How is mobile different?

The first thing we need to understand about mobile design is that it's different - and not just with regards to size. The physicality and specifications of mobile devices impart different design affordances and requirements. Because mobile devices are lighter and more portable, we often find it more convenient to use them. Consequently, through this more regular use, we feel a unique, emotional connection to them.

Physicality and specifications

Most mobile devices employ touch screens, where users rely on gestures - in addition to simple interface elements - to interact with them. Because of their smaller dimensions, we sometimes expect the content structures to be simpler and smaller. Also, because of their limited bandwidth and connectivity, mobile devices require designs to be optimized for loading time, with reduced data requirements.

How, where and when

Because we have constant access to our mobile devices, we tend to use them more frequently. They come with us on the bus, walking down the street, or watching TV. We often use them while "doing" something else. This means we may use the device under difficult viewing conditions, or among a variety of distractions.

How we behave and feel

Finally, we have different attitudes, behaviors and priorities while using mobile devices. As part of their Going Mobile 2012 study, User Experience Design agency Foolproof found that these devices have given us a new sense of freedom and control. In turn, some users feel a very real affection for their mobile device. Foolproof found that 63% of people felt lost if their smartphone was not in easy reach. They described their mobile devices as 'alive' ... an extension of their own body and personality

Because mobile devices have fundamentally changed user expectations, it's extremely important that we, as designers, follow a user-centered design process to arrive at our solutions. The only problem is that our traditional best practices may not always apply.

How mobile affects designers

Mobile's differences directly impact all parts of the user-centred design process: from user research to the final development and testing of the solution. The biggest parts of the process it affects are our delivery methods and our information architecture.

Mobile delivery methods

Unlike traditional websites, there are four popular mobile delivery methods. Mobile users that choose to view content in their browser are best served with either a mobile-specific site - optimized for mobile devices - or a responsive site - which re-orients/arranges itself for mobile devices. Those who choose to install an application on their phone either receive a native app(lication) or a hybrid app. Native apps are self-contained: every screen of the application is defined up front. Hybrid apps offer a bit more flexibility, loading content from the web (as it's viewed in a browser) but providing users with an "app-like" interface (or chrome).

Each delivery method has different pros and cons. Choose what's right for you based on your project's design context. (In the following table, higher star values are better)

Mobile Information Architecture

Mobile devices have their own set of Information Architecture patterns, too. While the structure of a responsive site may follow more "standard" patterns, native apps, for example, often employ navigational structures that are tab-based. Again, there's no "right "way to architect a mobile site or application. Instead, let's take a look at some of the most popular patterns: Hierarchy, Hub & spoke, Nested doll, Tabbed view, Bento box and Filtered view:

Hierarchy

The hierarchy pattern is a standard site structure with an index page and a series of sub pages. If you are designing a responsive site you may be restricted to this, however introducing additional patterns could allow you to tailor the experience for mobile.

Luke Wroblewski's Mobile First approach helps us focus on the important stuff first: features and user journeys that will help us create great user experiences.

Good for

Organising complicated site structures that need to follow a desktop site's structure.

Watch for

Navigation. Multi-faceted navigation structures can present a problem to people using small screens.

Hub & spoke

A hub and spoke pattern gives you a central index from which users will navigate out. It's the default pattern on Apple's iPhone. Users can't navigate between spokes but must return to the hub, instead. This has historically been used on desktop where a workflow is restricted (generally due to technical restrictions such as a form or purchasing process) however this is becoming more prevalent within the mobile landscape due to users being focused on one task, as well as the form factor of the device, making a global navigation more difficult to use.

Good for

Multi-functional tools, each with a distinct internal navigation and purpose.

Watch for

Users that want to multi-task.

Nested doll

The nested doll pattern leads users in a linear fashion to more detailed content. When users are in difficult conditions this is a quick and easy method of navigation. It also gives the user a strong sense of where they are in the structure of the content due to the perception of moving forward and then back.

Good for

Apps or sites with singular or closely related topics. This can also be used as a sub section pattern inside other parent patterns, such as the standard hierarchy pattern or hub and spoke.

Watch for

Users won't be able to quickly switch between sections so consider whether this will be suitable, rather than a barrier to exploring content.

Tabbed view

This is a pattern that regular app users will be familiar with. It's a collection of sections tied together by a toolbar menu. This allows the user to quickly scan and understand the complete functionality of the app when it's first opened.

Good for

Tools based apps with a similar theme. Multi-tasking.

Watch for

Complexity. This pattern is best suited to very simple content structures.

Bento Box/Dashboard

The bento box or dashboard pattern brings more detailed content directly to the index screen by using components to display portions of related tools or content. This pattern is more suited to tablet than mobile due to its complexity. It can be really powerful as it allows the user to comprehend key information at a glance, but does heavily rely on having a well-designed interface with information presented clearly.

Good for

Multi-functional tools and content-based tablet apps that have a similar theme.

Watch for

The tablet screen gives you more space to utilize this pattern well, however it becomes especially important to understand how a user will interact with and between each piece of content, to ensure that app is easy, efficient and enjoyable to use.

Filtered view

Finally, a filtered view pattern allows the user to navigate within a set of data by selecting filter options to create an alternative view. Filtering, as well as using faceted search methods, can be an excellent way to allow users to explore content in a way that suits them.

Good for

Apps or sites with large quantities of content, such as articles, images and videos. Can be a good basis for magazine style apps or sites, or as a sub pattern within another navigational pattern.

Watch for

Mobile. Filters and faceted search can be difficult to display on a smaller screen due to their complexity.

Next steps

It's been almost two decades since I first saw that large brick shaped mobile phone, (and around twelve years since I bought my first mobile). Now me, my dad and almost everyone I know has a smart phone, where we regularly, and frequently, interact, communicate and manage our lives. Each year technology takes another leap, and with that, it's clear we need to change along with it.

Developing a mobile and tablet friendly information architecture is just the first step in creating a great mobile experience. In Part 2 - Design Considerations I'll explain how the differences in the mobile context will impact how you develop your final design solution.

This article's lead image by FrozenStarRo.
Continue to Part 2: Visual design Jump to Part 3: Visual design

# data[].attributes.attachment_link.title
Designing for Mobile, Part 1: Information Architecture | UX Booth

# data[].attributes.attachment_link.description
Around 1993, my dad brought home a large, brick-shaped mobile phone. We were all incredibly excited by the new technology, even though none of us thought it would have a massive impact on our lives. I actually still thought of it as a gimmick, a few years later, when some of my friends decided to purchase them.

# data[].attributes.attachment_link.readable_text
Online UX Design Courses for Beginners and Professionals

Learn the entire spectrum of UX design from 39 beginner to advanced courses. Get taught by industry experts and gain recognized certificates to advance your career.

See all UX design courses
Watch our 6-stage course creation process

How It Works

1. Take online courses by industry experts

Lessons are self-paced so you'll never be late for class or miss a deadline.

2. Your answers are graded by experts, not machines. Get an industry-recognized Course Certificate to prove your skills.

3. Use your new skills in your existing job or to get a new job in UX design. Get help from our community.

Global Companies Who Trust Us

These industry leaders train their teams in UX design with our Company Membership.

Gain Industry-Recognized UX Certificates

Use your certificates to make a life-changing shift into UX or stay ahead in your UX career. Salaries are among the highest in the world.

161,269 members (and counting) have advanced their careers with us. See reasons to join.

UX Design is a Booming Industry

Job opportunities for people with design skills are increasing like never before (an estimated 13% increase from 2010 to 2020). And UX designer salaries are soaring -upwards of $110K in cities like San Francisco and New York.

Universities That Use Our Educational Material

Take All Our Courses.
Pay a Single Fee.

Pay a $22 flat fee a month (4 cups of coffee), and take all the UX courses you want. That's because we're on a mission to lower the cost of design education.

The More You Learn, the Cheaper It Becomes

Cost per course Courses taken 5 10 15 20 25 30 $31/course $16 $10 $8 $6 $5/course

UX Career Development Community

Connect with a network of UX professionals through our membership. Advance your career with UX meet-ups in 494 cities around the world.

Upcoming UX Meet-Ups

View more meet-ups

Ready to Advance Your Career Today?

# data[].attributes.attachment_link.description
Discover the entire spectrum of UX design from 30+ courses & local meetups. Learn from industry experts and gain recognized certificates.

# data[].attributes.body
IDEO shopping cart

# data[].attributes.attachment_link.title
Subtitulos en Español para ABC Nightline - IDEO Shopping Cart

# data[].attributes.attachment_link.entities[].name
International Council of Societies of Industrial Design

# data[].attributes.attachment_link.description
World Design Capital is an initiative of the International Council of Societies of Industrial Design (Icsid) - an international NGO that aims to protect and promote the profession of industrial design ...the vision of the World Design Capital is to promote and encourage the use of design to further the social, economic and cultural development of the world's cities...

# data[].attributes.attachment_link.description
The workshop with people from Kaleidoscopio was structured to aimed at demoing our applications in focus groups, also to brainstorming with them three main topics: communication with family and friends, how to keep active in both body & mind and sharing our life experiences and stories.

# data[].attributes.body
Jinsop Lee

# data[].attributes.attachment_link.readable_text
Get a daily email featuring the latest talk, plus a quick mix of trending content.

By subscribing, you understand and agree that we will store, process and manage your personal information according to our Privacy Policy

# data[].attributes.attachment_link.description
Un buen diseño es muy bonito, sí, pero... ¿por qué no debería ser también agradable al tacto, el olfato o el oído? El diseñador Jinsop Lee (ganador de TED Talent Search) explica su teoría de diseño para los 5 sentidos mediante un gráfico muy útil y unos cuantos ejemplos.

# data[].attributes.body
Jinsop Lee

# data[].attributes.attachment_link.title
Saving Lives Through Design: www.jinsop.com

# data[].attributes.attachment_link.description
The difficulty of distributing a gold 1976 VW Beetle to every teen in America leads to a design that could potentially save lives. This video contains the following music (thank you): 1. "Civil War Drummer," ©2010 DrumM8, used under a Creative Commons Attribution 3.0 Unported license: http://creativecommons.org/licenses/by/3.0/ Link to work: http://soundbible.com/1512-Civil-War-Drummer-.html 2.

# data[].attributes.body
Team Dashboard

# data[].attributes.attachment_link.description
Taiga is a project management platform for startups and agile developers & designers who want a simple, beautiful tool that makes work truly enjoyable.

# data[].attributes.attachment_link.readable_text
As our new Bitbucket space station administrator, you need to be organized. When you make files for your space station, you'll want to keep them in one place and shareable with teammates, no matter where they are in the universe. With Bitbucket, that means adding everything to a repository. Let's create one!

Step 1: Create the repository

Initially, the repository you create in Bitbucket is going to be empty without any code in it. That's okay because you will start adding some files to it soon. This Bitbucket repository will be the central repository for your files, which means that others can access that repository if you give them permission. You will also copy a version of that repository to your local system-that way you can update it from one repo, then transfer those changes to the other.

Do the following to create your repository:

1. From Bitbucket, click the + icon in the global sidebar and select Repository. Bitbucket displays the Create a new repository page. Take some time to review the dialog's contents. With the exception of the Repository type, everything you enter on this page you can later change.

2. Enter BitbucketStationSupplies for the Name field. Bitbucket uses this Name in the URL of the repository. For example, if the user the_best has a repository called awesome_repo, the URL for that repository would be https://bitbucket.org/the_best/awesome_repo.

3. Keep the rest of the options as is unless you want to change them:

Access level -Leave the This is a private repository box checked. A private repository is only visible to you and those with access. If this box is unchecked, anyone can see your repository.

Include a README? -If you recently created your account, this defaults to a tutorial README. For the purposes of this tutorial, pick either of the Yes options, that way you'll start out with a file.

4. From Version control system, you can choose either Git or Mercurial. If you aren't sure which one to go with, keep Git as your option.

# data[].attributes.attachment_link.title
Sourcetree | Free Git GUI for Mac and Windows

# data[].attributes.attachment_link.description
A Git GUI that offers a visual representation of your repositories. Sourcetree is a free Git client for Windows and Mac.

# data[].attributes.attachment_link.description
Ionic makes it incredibly easy to build beautiful and interactive mobile apps using HTML5 and Angular.

# data[].attributes.body
Emulador Ionic Online

# data[].attributes.body
Ionic

# data[].attributes.attachment_link.title
appcamp.io - Registered at Namecheap.com

# data[].attributes.attachment_link.readable_text
Designing for Reflection

Designing for the reflective level means designing to build long-term product relationships.

Reflective processing-and, particularly, what it means for design-is perhaps the most challenging aspect of the three levels of processing that Norman discusses. What is clear is that designing for the reflective level means designing to build long-term product relationships. What isn't clear at all is the best way to ensure success-if that's even possible-at the reflective level. Is it chance that drives success here-being in the right place at the right time-or can premeditated design play a part in making it happen?

In describing reflective design, Norman uses several high-concept designs for commodity products as examples-such as impractically configured teapots and the striking Phillipe Starck juicer that graces the cover of his book. It is easy to see how such products-whose value and purpose are, in essence, the aesthetic statements they make-could appeal strongly to people's reflective desire for uniqueness or cultural sophistication that perhaps may come from an artistic or stylish self-image.

It is more difficult to see how products that also serve a truly useful purpose need to balance the stylistic and the elegant with the functional. The Apple® iPod® comes very close to achieving this balance. Although the its click-wheel navigation is perhaps less than optimal in some respects, users' visceral reaction to the product is tremendous, because of its savvy industrial design. Its reflective potential is also huge, because of the powerful emotional connection people experience with their music. It's a winning combination that no competitor has been able to challenge.

Few products become iconic in people's lives in the way that, say, the Sony® Walkman® did. The iPod is quickly ascending to that status. Clearly there are some products that stand little chance of ever becoming symbolic in peoples lives-like Ethernet routers, for instance-no matter how wonderful they look or well they behave. However, when the design of a product or service addresses users' goals and motivations-possibly going beyond the product's primary purpose, yet somehow connected to it via personal or cultural associations-the opportunity for the creation of reflective meaning is greatly enhanced.

Understanding Users' Goals on Three Levels

We can readily apply Alan Cooper's goal-directed design methods, which include personas, goals, and scenarios, to the problems of visceral, behavioral, and reflective design.

We clearly need good ways to understand users' needs at each of the three levels of processing, translate that understanding into clear requirements, and finally, translate those requirements into clear directions for developers. Luckily, at least one such method already exists and is in relatively widespread use-though to date, usage of this method has focused primarily on the behavioral level.

We can readily apply Alan Cooper's goal-directed design methods, [3] which include personas, goals, and scenarios, to the problems of visceral, behavioral, and reflective design. Most UX practitioners are familiar with the concept of personas-composite user archetypes that we construct from behavioral data that we have gathered during user interviews and field observations. We give our personas realistic names, faces, and personalities to foster user empathy within a product team. However, practitioners may be somewhat less aware that a critical element of personas-beyond capturing typical user behavior patterns and roles-is capturing user motivations in the form of specific goals. In fact, the three types of goals that Cooper's methods [4] enumerate largely anticipated the concerns of Norman's three levels of processing.

Experience goals help describe how a persona wants to feel while using a product. These goals provide focus for a product's visual and aural characteristics, its interactive feel-such as animated transitions and the snap ratio of a physical button-and its industrial design by providing insights into persona motivations that express themselves at the visceral level. For example:

Feel smart or in control.

Have fun.

Feel cool or hip or relaxed.

Remain focused and alert.

UX practitioners must translate persona experience goals into form, motion, and auditory elements that communicate the proper affect, emotion, and tone. Mood or inspiration boards [5] are a useful tool for defining the tonal expectations of personas.

End goals should be among the most significant factors in determining the overall product experience.

End goals describe what a persona wants or needs to accomplish. A product or service can help accomplish such goals directly or indirectly. These goals are the focus of a product's interaction design, information architecture, and the more functional aspects of industrial design. Because of the influence of behavioral processing on both visceral and reflective responses, end goals should be among the most significant factors in determining the overall product experience. For example:

Clear my desk before I leave for home.

Make good business decisions based on my data.

Find problems proactively before they become critical.

Buy what I need and get out of here.

UX practitioners must translate end goals into a product's behaviors, tasks, look, and feel. Context-day in the life-scenarios, and cognitive walkthroughs are effective tools for exploring users' goals and mental models, which facilitate appropriate behavioral design.

Life goals describe a persona's long-term desires, motivations, and self-image attributes, which cause the persona to connect with a product. These goals form the focus for a product's overall design, strategy, and branding. For example:

Live the good life.

Succeed in my ambitions to....

Be a connoisseur of....

Be attractive, popular, or respected by my peers.

UX practitioners must translate life goals into high-level system capabilities, formal design concepts, and brand strategy.Mood boards and context scenarios can be helpful in exploring different aspects of product concepts, and broad ethnographic research and cultural modeling are critical for discovering users' behavior patterns and deeper motivations.

Using Scenarios to Explore Users' Goals

Scenarios establish the primary touch-points a persona may have with a new or redesigned product over time, illuminating modes of use, user mental models, and user attitudes toward the product.

A product's UX team can use context scenarios to help bridge the gap between personas and their goals and create a design that meets their needs and desires. Context scenarios describe the broader context for persona usage patterns, behaviors, and reactions to a product design, including environmental, organizational, and cultural factors. These scenarios establish the primary touch-points a persona may have with a new or redesigned product over time, illuminating modes of use, user mental models, and user attitudes toward the product.

Two related scenario-based techniques do a particularly good job of addressing all three types of goals-experience, end, and life goals-because they help recast the problem as designing an ideal experience rather than a technology-based solution.

Pretending it's magic-If a product were magic, how would it do X, so a persona would be perfectly satisfied? If, technically, we can't do it that way, how close can we get?

Pretending it's human-In a similar situation, or context, what ideal response would a persona expect from a human?

Remember, understanding goals is about understanding human motivations more than it is about understanding specific tasks, which can change as technology changes. In line with Norman's model, top-level user motivations include

Using personas, goals, and scenarios provides one potential key to unlocking the power of visceral, behavioral, and reflective design, and bringing them together into a harmonious whole. While some of our best designers seem to understand and act upon the interrelationships between these aspects of design almost intuitively, consciously designing for all levels of human cognition and emotion offers tremendous potential for creating more satisfying and delightful user experiences.

Endnotes

[1] Norman, Donald A. Emotional Design: Why We Love (Or Hate) Everyday Things. New York: Basic Books, 2004.

[2] Dillon, Andrew. " Beyond Usability: Process, Outcome and Affect in Human Computer Interaction." Paper presented at the Lazerow Lecture at the Faculty of Information Studies, University of Toronto, March 2001. Retrieved November 3, 2005.

[3] Cooper, Alan and Robert Reimann. About Face 2.0: The Essentials of Interaction Design. Indianapolis: Wiley, 2003.

[4] Goodwin, Kim. " Perfecting Your Personas." Cooper Newsletter, July/August 2001. Retrieved November 3, 2005.

[5] Wong, Stephanie. " Mood Boards." Life+StyleMaven. Retrieved November 3, 2005.

# data[].attributes.attachment_link.keywords[]
user experience ux strategy customer experience ui gui human-computer interaction ixd hci chi user-centered ucd user interface visual icon design guidelines patterns consulting

# data[].attributes.attachment_link.keywords[]
design usability evaluation review usability testing user requirements modeling research studies heuristic evaluation expert review competitive analysis consulting

# data[].attributes.attachment_link.keywords[]
information architecture ia navigation design consulting

# data[].attributes.attachment_link.keywords[]
user goals tasks task models modeling analysis personas scenarios

# data[].attributes.attachment_link.description
Designing for the reflective level means designing to build long-term product relationships. Reflective processing-and, particularly, what it means for design-is perhaps the most challenging aspect of the three levels of processing that Norman discusses. What is clear is that designing for the reflective level means designing to build long-term product relationships.

# data[].attributes.body
Diseño emocional

# data[].attributes.attachment_link.title
The three ways that good design makes you happy | Don Norman

# data[].attributes.attachment_link.description
GitHub is where people build software. More than 28 million people use GitHub to discover, fork, and contribute to over 85 million projects.

# data[].attributes.body
https://github.com/dpalomar/tiwlabs/blob/master/anexos/refcardz-git_2.pdf