Responsive Web Design

Responsive Web design is a combination of fluid grids and images with media queries to change layout based on the size of a device viewport. It uses feature detection (mostly on the client) to determine available device capabilities and adapt accordingly. With responsive Web design one code-base, deployment, and URL provides you with access to many devices including future ones you haven’t encountered yet. But optimizing images, video, third party widgets and more using client-only solutions can be challenging.

Luke Wroblewski

Design principles: Visual Design vs. User experience

Visual Design is the establishment of a philosophy about how to make an impact.

User Experience is the establishment of a philosophy about how to treat people.

Principles of Visual Design:

• Contrast
• Emphasis
• Variety
• Balance
• Proportion
• Repetition
• Movement
• Texture
• Harmony
• Unity

Principles of User Experience:

1. Stay out of people’s way.
2. Create a hierarchy that matches people’sneeds.
3. Limit distractions.
4. Provide strong information scent.
5. Provide signposts and cues.
6. Provide context.
7. Use constraints appropriately.
8. Make actions reversible.
9. Provide feedback.
10. Make a good first impression.

Whitney Hess

UX strategy

A UX strategy has four primary components:

• Where are you now? Define the value you’re delivering to your users today, identify known issues, and explore ways your product can realize what the business hopes to achieve.
• Where do you want to be? Specify the purpose of what you’re building and what needs it will address. Identify opportunities to enhance your product and the guiding principles that will inform product design decisions. Explore all phases of a user’s interaction with your product to identify how all product components will fit together.
• How will you get there? Plan the development of your product to accommodate continual enhancements while maintaining cohesion across the experience. Translate your plan into tangible requirements.
• How will you measure success? Define what success looks like for your product and what methods will be used to validate your product’s success.

CATRIONA CORNETT

Psychology of User Experience

• People Don’t Want to Work: they will do the least amount of work possible to get a task done;
• People Have Limitations: they can only look at so much information or read so much text on a screen without losing interest;
• People Make Mistakes: Assume people will make mistakes. Anticipate what they will be and try to prevent them;
• Human Memory Is Complicated: People reconstruct memories, which means they are always changing;
• People are Social: they will always try to use technology to be social. This has been true for thousands of years;
• Attention: Grabbing and holding onto attention, and not distracting someone when they are paying attention to something, are key concerns;
• People Crave Information: Learning is dopaminergic—we can’t help but want more information;
• Unconscious Processing: Most mental processing occurs unconsciously;
• People Create Mental Models: People always have a mental model in place about a certain object or task (paying my bills, reading a book, using a remote control);
• Using Visual Systems can help people.

Susan Weinschenk

Hierarchy of needs

In his 1943 paper, “A Theory of Human Motivation,” American psychologist Abraham Maslow proposed the idea of a psychological hierarchy of needs in human beings. This hierarchy of need principles specifies that a design must serve the low-level needs (i.e., it must function), before the higher level needs, such as desirability, can begin to be addressed.

• Physiological needs are the requirements for human survival. They include breathing, food, water, shelter, sex, clothing, sleep and comfort.
• Safety needs can be seen as a way to meet tomorrow’s physiological needs. They include personal and financial security, health, order, law and protection from elements.
• Love and belonging needs are about social interactions. We don’t want to go through life alone. Social needs include friendship, love, intimacy, family, community, belonging and relationships.
• Esteem needs include self-esteem as well as recognition from others. Esteem can come in the form of achievement, status, prestige, recognition, mastery, independence and responsibility.
• Self-actualization needs relate to becoming more than what we are, and they can come from peace, knowledge, self-fulfillment, realization of personal potential, personal growth and peak experiences.

Hierearchy of User Experience

• Functionality needs focus on meeting the most basic design requirements. For example, NFC in a customer’s mobile device must provide the capability to make a connection with another NFC object.
• Usability needs have to do with how easy and forgiving a design is to use. For example, configuring your mobile payment preferences to facilitate types of payments and choice of merchants, the interface should be tolerant of errors and mistakes.
• Reliability needs are about establishing stable and consistent performance. For example, if lack of interoperability between mobile payment partners results in a service that behaves erratically or is subject to frequent failure, reliability needs will not be satisfied.
• Confidence needs address security, customer support, contact methods, policies, and giving users control. For example, a mobile payment service must ensure privacy and security of customer’s personal and financial information. A breach in this will result in lack of trust and result in non-adoption.
• Desirability needs focus on personalization, community, flexibility, and customization. For example, if a mobile payment service allows customers to personalize and control their payment experience, and creates a seamless experience across product, services, and channels, desirability needs will be satisfied.

From: Perry Chan and Steven Bradley

Capabilities

Capabilities can be defined as combinations of people, process and technology

Interaction cost

The amount of cognitive and physical effort that a user needs to put into a task in order to achieve a meaningful outcome.

Mobile usability

Mobile sites have higher measured usability than desktop sites when used on a phone, but mobile apps score even higher.

Jakob Nielsen

Insights from the ‘Kano Model’

Core metrics for customer experience:

1. Basic attributes (Fulfilling expectations about core functionality)
2. Performance attributes (Exceeding expectations about core functionality)
3. Delight attributes (Unexpected moments of delight)

“The three attributes types are mapped in a coordinate system with “Customer Satisfaction” up the x-axis and “Degree of Achievement” (how well a given feature is executed in your product) along the y-axis.”

Summary:

• The details don’t matter if you don’t get the fundamentals right, so the basic attributes need to work flawlessly before you focus on anything else.
• You don’t need to match every single performance attribute in the market head-on. Align your investments in performance attributes with the target audience of the product – this may of course vary significantly and warrant different variations of the same product.
• Delivering unexpected delight attributes is what fuels word-of-mouth. Once you’ve secured the basic attributes and some performance attributes, you should begin brainstorming on what delight attributes you can offer as this is what will truly set you apart from the competition.
• Today’s delight attribute is tomorrow’s performance attribute, and six months from now it may very well be a basic attribute. Customer expectations continually increase so you have to continually reiterate and reinvent your offerings.
• Having a deep understanding of the true needs of your customers, their context and their behavior, is absolutely crucial when inventing new delight attributes. Looking at what your competitors are doing won’t help much as the delight attribute will no longer be a delight by the time you have imitated it.

Christian Holst: UX and the Kano Model

Excel: Insert new row (Mac)

ALT & mouse-click in row number below the one(s) you want to insert. Be careful NOT to click anywhere else in row as this will add row(s) NOT across all columns but only in one column.