ui / ux engineering for web applications

Post on 29-Nov-2014

224 Views

Category:

Software

0 Downloads

Preview:

Click to see full reader

DESCRIPTION

* Differences between Websites and Web Applications * Research Techniques for Knowing Your Users * Task Analysis * UI/UX Design Principles for Web Applications

TRANSCRIPT

UI/UX Engineering for Web

ApplicationsReggie Santos

UP ITDC

Outline

Difference between Websites and Web Applications

Research Techniques for Knowing Your Users

Task Analysis

UI/UX Design Principles for Web Applications

References

Difference between Websites and Web Applications

Research Techniques for Knowing Your Users

Task Analysis

UI/UX Design Principles for Web Applications

References

Difference between Websites and Web

Applications

Website Collection of pages consisting mostly of static content,

images and video, with limited interactive functionality (i.e. except for the contact form and search functionality)

Primary role is to inform

Website Collection of pages consisting mostly of static content,

images and video, with limited interactive functionality (i.e. except for the contact form and search functionality)

Primary role is to inform

Difference between Websites and Web

Applications

Difference between Websites and Web

Applications

Web applications Dynamic, interactive systems that help businesses

perform business critical tasks and that increase and measure their productivity

Primary role is to perform a function that serves the user's tasks and according to defined business rules

Web applications Dynamic, interactive systems that help businesses

perform business critical tasks and that increase and measure their productivity

Primary role is to perform a function that serves the user's tasks and according to defined business rules

Difference between Websites and Web

Applications

Web Application Type: Open

Open Online applications that are easily accessible to

anyone who opens an account (either for free or by paying a fee)

Open Online applications that are easily accessible to

anyone who opens an account (either for free or by paying a fee)

Web Application Type: Open

Web Application Type: Closed

Closed/line-of-business Usually not accessible outside the company that

uses it, and they can be considered "offline" applications (though many systems expose their functionality to business partners via either services or specialized interfaces)

Usually run on the company's local network and are available only to employees

Closed/line-of-business Usually not accessible outside the company that

uses it, and they can be considered "offline" applications (though many systems expose their functionality to business partners via either services or specialized interfaces)

Usually run on the company's local network and are available only to employees

Web Application Type: Closed

Research Techniques for Knowing Your Users

Research Techniques for Knowing Your Users

User Interviews Guided conversations with existing or potential

users to help you understand their preferences and attitude

Contextual Inquiry Combining direct user observation with an

interview that takes place in the users environment in order to better understand their work environment, the problems they are trying to solve and other related preferences

User Interviews Guided conversations with existing or potential

users to help you understand their preferences and attitude

Contextual Inquiry Combining direct user observation with an

interview that takes place in the users environment in order to better understand their work environment, the problems they are trying to solve and other related preferences

Research Techniques for Knowing Your Users

Surveys A clear set of questions distributed to a wider

audience in order to gather results that can help validate existing data and personas

Card sorting A grouping task for individuals or small groups used

to establish common patterns and identify areas of confusion

Surveys A clear set of questions distributed to a wider

audience in order to gather results that can help validate existing data and personas

Card sorting A grouping task for individuals or small groups used

to establish common patterns and identify areas of confusion

Research Techniques for Knowing Your Users

Usability testing The process of performing a series of specific tests

on a site or a product to reveal potential usability problems and identify solutions to address them

Usability testing The process of performing a series of specific tests

on a site or a product to reveal potential usability problems and identify solutions to address them

Task Analysis The process of learning about ordinary users by

observing them in action to understand in detail how they perform their tasks and achieve their intended goals

Help identify the tasks that your website and applications must support and can also help you refine or re-define your site's navigation or search by determining the appropriate content scope

The process of learning about ordinary users by observing them in action to understand in detail how they perform their tasks and achieve their intended goals

Help identify the tasks that your website and applications must support and can also help you refine or re-define your site's navigation or search by determining the appropriate content scope

Task Analysis

Task Analysis

Helps you understand: What your users' goals are; what they are trying to

achieve What users actually do to achieve those goals What experiences (personal, social, and cultural) users

bring to the tasks

Helps you understand: What your users' goals are; what they are trying to

achieve What users actually do to achieve those goals What experiences (personal, social, and cultural) users

bring to the tasks

Task Analysis

Helps you understand: How users are influenced by their physical

environment How users' previous knowledge and experience

influence: How they think about their work The workflow they follow to perform their tasks

Helps you understand: How users are influenced by their physical

environment How users' previous knowledge and experience

influence: How they think about their work The workflow they follow to perform their tasks

Design Principles

Usability Affordance Intuitiveness Responsiveness Forgiveness

Usability Affordance Intuitiveness Responsiveness Forgiveness

Design Principles

Consistency Familiarity Efficiency Accessibility Simplicity Aesthetics

Consistency Familiarity Efficiency Accessibility Simplicity Aesthetics

Design Principle: Usability

Facts about human vision and seeing We have sharp vision in the center of our focus that

is good at paying attention and identifying detail We have poor peripheral vision that can identify

movement and contrast, but not identify detail

Facts about human vision and seeing We have sharp vision in the center of our focus that

is good at paying attention and identifying detail We have poor peripheral vision that can identify

movement and contrast, but not identify detail

Design Principle: Usability

Facts about human vision and seeing Shadows help us perceive information in three

dimensions – light from above and shadow below makes things pop out of the page

Sudden movement, changes in contrast and the appearance of images can attract visual attention

Facts about human vision and seeing Shadows help us perceive information in three

dimensions – light from above and shadow below makes things pop out of the page

Sudden movement, changes in contrast and the appearance of images can attract visual attention

Design Principle: Usability

Checklist for choosing components Is there enough contrast and spacing for a user to

really see the component? Do changes happen right where the user is

looking? If changes happen outside the field of vision, is

there something that will attract visual attention (movement or color) so they see the change? And does the change persist long enough to be spotted?

Checklist for choosing components Is there enough contrast and spacing for a user to

really see the component? Do changes happen right where the user is

looking? If changes happen outside the field of vision, is

there something that will attract visual attention (movement or color) so they see the change? And does the change persist long enough to be spotted?

Design Principle: Usability

Design Principle: Usability

Design Principle: Affordance

Attribute of an item that communicates what can be done with it When effective, users should be able to figure out

what to do with an item just by looking at it Shadows and highlights can make buttons pop,

sliders look like they can be slid and dials look like they can be turned

Attribute of an item that communicates what can be done with it When effective, users should be able to figure out

what to do with an item just by looking at it Shadows and highlights can make buttons pop,

sliders look like they can be slid and dials look like they can be turned

Design Principle: Affordance

Design Principle: Intuitiveness

About learned behavior and can be considered synonymous with the phrase "easy to learn" Things that are easy to learn build on existing

knowledge Usable components

People can figure out how to operate just by looking at its visual representation

Builds on existing knowledge by using existing conventions

About learned behavior and can be considered synonymous with the phrase "easy to learn" Things that are easy to learn build on existing

knowledge Usable components

People can figure out how to operate just by looking at its visual representation

Builds on existing knowledge by using existing conventions

Design Principle: Intuitiveness

Design Principle: Intuitiveness

Design Principle: Intuitiveness

Design Principle: Responsiveness

Feedback and error recovery Users should be informed about (potential) errors

and how they can affect their work Also contains actions which users can perform in

order to recover from the error Some mistakes are irreversible so it is important to

suggest solutions to help remedy problems

Feedback and error recovery Users should be informed about (potential) errors

and how they can affect their work Also contains actions which users can perform in

order to recover from the error Some mistakes are irreversible so it is important to

suggest solutions to help remedy problems

Design Principle: Responsiveness - Fast

The interface, if not the software behind it, should work fast

Seeing things load quickly, or at the very least, an interface that loads quickly (even if the content is yet to catch up) improves the user experience

The interface, if not the software behind it, should work fast

Seeing things load quickly, or at the very least, an interface that loads quickly (even if the content is yet to catch up) improves the user experience

Design Principle: Responsiveness -

Feedback Must be plainly visible, and must happen where

the user is looking Can take many forms, including (but not limited

to): Buttons that appear to depress on click Waiting indicators for processes that take time Search results that appear as they are found

(rather than after a delay) Confirmation messages that appear after

actions

Must be plainly visible, and must happen where the user is looking

Can take many forms, including (but not limited to):

Buttons that appear to depress on click Waiting indicators for processes that take time Search results that appear as they are found

(rather than after a delay) Confirmation messages that appear after

actions

Design Principle: Responsiveness -

Feedback

Design Principle: Responsiveness -

Feedback

Design Principle: Responsiveness -

Feedback

Design Principle: Responsiveness -

Feedback

Design Principle: Responsiveness - Errors

Avoid: Users need to be able to avoid errors Many errors can be avoided by a good task

flow, layout and labeling Identify: If an error does occur, users need to be

able to quickly see that something happened and understand what to do about it

Correct: Users need to be able to quickly correct an error and be able to move forward right away

Avoid: Users need to be able to avoid errors Many errors can be avoided by a good task

flow, layout and labeling Identify: If an error does occur, users need to be

able to quickly see that something happened and understand what to do about it

Correct: Users need to be able to quickly correct an error and be able to move forward right away

Design Principle: Responsiveness - Errors

Choosing the right components is a very big factor in error management

A combo box (combination of single-select list and text entry box) reduces the error to a much greater extent than just a text entry field

Giving the user an initial set of options, simple data entry and formatting errors can be avoided

Date pickers reduce the margin of error compared to date text entry fields

Auto-complete helps people select from long lists

Choosing the right components is a very big factor in error management

A combo box (combination of single-select list and text entry box) reduces the error to a much greater extent than just a text entry field

Giving the user an initial set of options, simple data entry and formatting errors can be avoided

Date pickers reduce the margin of error compared to date text entry fields

Auto-complete helps people select from long lists

Design Principle: Responsiveness - Errors

Design Principle: Responsiveness - Errors

Design Principle: Responsiveness - Errors

Design Principle: Responsiveness - Errors

Design Principle: Responsiveness

Web form validation Ensure that the user provided necessary and

properly formatted information needed to successfully complete an operation

Validation methods Server-side validation Client-side validation

Web form validation Ensure that the user provided necessary and

properly formatted information needed to successfully complete an operation

Validation methods Server-side validation Client-side validation

Design Principle: Responsiveness

Design Principle: Responsiveness

Server-side validation Information is being sent to the server and

validated using one of the server-side programming languages

If the validation fails, the response is then sent back to the client, the page that contains the web form is refreshed and feedback is shown

Server-side validation Information is being sent to the server and

validated using one of the server-side programming languages

If the validation fails, the response is then sent back to the client, the page that contains the web form is refreshed and feedback is shown

Design Principle: Responsiveness

Server-side validation Pros

Secure because it will work even if JavaScript is turned off in the browser and it cannot be easily bypassed by malicious users

Server-side validation Pros

Secure because it will work even if JavaScript is turned off in the browser and it cannot be easily bypassed by malicious users

Design Principle: Responsiveness

Server-side validation Cons

Users will have to fill in the information without getting a response until they submit the form, resulting in a slow response from the server Except validation through AJAX Ajax calls to the server can validate as you

type and provide immediate feedback

Server-side validation Cons

Users will have to fill in the information without getting a response until they submit the form, resulting in a slow response from the server Except validation through AJAX Ajax calls to the server can validate as you

type and provide immediate feedback

Design Principle: Responsiveness

Client-side validation Pros

Form never gets submitted if validation fails Immediate feedback if validation fails

Cons Relies on JavaScript Can be bypassed if users turn JavaScript is off

Why validation should always be implemented both the client and server

Client-side validation Pros

Form never gets submitted if validation fails Immediate feedback if validation fails

Cons Relies on JavaScript Can be bypassed if users turn JavaScript is off

Why validation should always be implemented both the client and server

Design Principle: Responsiveness

Client-side validation Cons

Validation is done on the client using script languages such as JavaScript

User's input can be validated as they type – more responsive, visually rich validation

Client-side validation Cons

Validation is done on the client using script languages such as JavaScript

User's input can be validated as they type – more responsive, visually rich validation

Design Principle: Responsiveness

Design Principle: Responsiveness

Design Principle: Responsiveness

What to validate Required information

Information without which operation cannot be completed successfully

Validation has to ensure that the user provided all the necessary details in the web form and it has to fail if at least one of the fields is not provided

What to validate Required information

Information without which operation cannot be completed successfully

Validation has to ensure that the user provided all the necessary details in the web form and it has to fail if at least one of the fields is not provided

Design Principle: Responsiveness

Design Principle: Responsiveness

Required information According to smashingmagazine's survey, designers

tend to remove all unnecessary details and distractions which do not help the user complete the form

Required information According to smashingmagazine's survey, designers

tend to remove all unnecessary details and distractions which do not help the user complete the form

Design Principle: Responsiveness

Correct format Applies to various cases such as email address,

URL, dates, phone numbers, and others If the information is not in the correct format,

users should be informed and correct format should be suggested

Correct format Applies to various cases such as email address,

URL, dates, phone numbers, and others If the information is not in the correct format,

users should be informed and correct format should be suggested

Design Principle: Responsiveness

Design Principle: Responsiveness

Confirmation fields When dealing with data that is important to the

system, it is a good practice to let the users confirm their input using additional confirmation fields

This way users can be certain that they provided correct information

e.g. passwords, email addresses

Confirmation fields When dealing with data that is important to the

system, it is a good practice to let the users confirm their input using additional confirmation fields

This way users can be certain that they provided correct information

e.g. passwords, email addresses

Design Principle: Responsiveness

Design Principle: Responsiveness

Confirmation fields According to a survey, email confirmation was

mandatory in only 18% of websites, while password confirmation was mandatory in 72% of websites

Surprisingly, large websites such as Facebook, LinkedIn, Stumbleupon and Twitter do not require password confirmation

Confirmation fields According to a survey, email confirmation was

mandatory in only 18% of websites, while password confirmation was mandatory in 72% of websites

Surprisingly, large websites such as Facebook, LinkedIn, Stumbleupon and Twitter do not require password confirmation

Design Principle: Responsiveness

Validation feedback If validation fails, the system should let the users

know it by providing a clear and unambiguous message (usually one or two sentences) and ways to correct the errors

Validation feedback If validation fails, the system should let the users

know it by providing a clear and unambiguous message (usually one or two sentences) and ways to correct the errors

Design Principle: Responsiveness

Design Principle: Responsiveness

What to Avoid Single error pages Feedback messages in popup windows

What to Avoid Single error pages Feedback messages in popup windows

Design Principle: Responsiveness

Rules of Thumb in Web Form Validation Design

Never omit server-side validation Do not provide confusing validation feedback. It

should clearly communicate the errors and ways to fix them.

Do not let users think about what information is required, always clearly mark required fields

Never provide validation feedback on a single page or in a popup alert

Rules of Thumb in Web Form Validation Design

Never omit server-side validation Do not provide confusing validation feedback. It

should clearly communicate the errors and ways to fix them.

Do not let users think about what information is required, always clearly mark required fields

Never provide validation feedback on a single page or in a popup alert

Design Principle: Responsiveness

Rules of Thumb in Web Form Validation Design

Do not use dynamic effects as a compensation for a badly designed form. Fancy effects would not hide a poorly designed web form.

If you use Captcha, do not forget to provide audio support and enable users to "reload" the Captcha

Do not forget to inform users when the form was completed successfully. It is as important as a good validation feedback.

Rules of Thumb in Web Form Validation Design

Do not use dynamic effects as a compensation for a badly designed form. Fancy effects would not hide a poorly designed web form.

If you use Captcha, do not forget to provide audio support and enable users to "reload" the Captcha

Do not forget to inform users when the form was completed successfully. It is as important as a good validation feedback.

Design Principle: Forgiveness

Allow users to recover from errors, or even better to prevent errors

Allow users to recover from errors, or even better to prevent errors

Design Principle: Forgiveness

Design Principle: Forgiveness

Design Principle: Forgiveness

Design Principle: Forgiveness

Design Principle: Forgiveness

Design Principle: Forgiveness

Design Principle: Consistency

"A foolish consistency is the bugbear of small minds" – Ralph Waldo Emerson

"A foolish consistency is the bugbear of small minds" – Ralph Waldo Emerson

Design Principle: Consistency - Internal

Standards and conventions should be established and applied throughout all the content

e.g. navigation, color, terminology e.g. a user who encounters the "Search" at the

top right on one page will have problems if it is arbitrarily moved to different locations on other pages of the site

Standards and conventions should be established and applied throughout all the content

e.g. navigation, color, terminology e.g. a user who encounters the "Search" at the

top right on one page will have problems if it is arbitrarily moved to different locations on other pages of the site

Design Principle: Consistency - Internal

Design Principle: Consistency - External

context within a group or family consistent with general practice users will tend to apply rules they have learned

elsewhere, even if those rules do not actually apply to the current site

e.g. Google apps/services

context within a group or family consistent with general practice users will tend to apply rules they have learned

elsewhere, even if those rules do not actually apply to the current site

e.g. Google apps/services

Design Principle: Consistency - External

Design Principle: Consistency

Makes business sense Allows developers to develop a small set of

templates for pages and other design elements, and apply them throughout the site

Makes writing, publishing and maintenance easier, and supports the implementation of XML, CSS and other technologies that rely on structured content

Makes business sense Allows developers to develop a small set of

templates for pages and other design elements, and apply them throughout the site

Makes writing, publishing and maintenance easier, and supports the implementation of XML, CSS and other technologies that rely on structured content

Design Principle: Consistency -

Language Terminologies "Voice"

e.g. warm and friendly, legalistic Makes your site appear simpler and more

authoritative

Terminologies "Voice"

e.g. warm and friendly, legalistic Makes your site appear simpler and more

authoritative

Design Principle: Consistency – UI

Elements Apply them as they are originally defined

e.g. option buttons (radio buttons) only for mutually-exclusive items

e.g. check boxes if the user can choose one or more options

Apply them as they are originally defined e.g. option buttons (radio buttons) only for

mutually-exclusive items e.g. check boxes if the user can choose one or

more options

Design Principle: Consistency – UI

Elements Graphic treatment

e.g. options should be round e.g. check boxes should be square e.g. editable fields should have white

backgrounds e.g. non-editable fields should be gray

Graphic treatment e.g. options should be round e.g. check boxes should be square e.g. editable fields should have white

backgrounds e.g. non-editable fields should be gray

Design Principle: Consistency – Layout

Well-established conventions the company logo should appear at the top left of

the page with the associated homepage link navigation on the top or left (or both) breadcrumbs (if used) below the primary

navigation

Well-established conventions the company logo should appear at the top left of

the page with the associated homepage link navigation on the top or left (or both) breadcrumbs (if used) below the primary

navigation

Design Principle: Consistency – Layout

Well-established conventions Content in the center of the page Related material and promotions on the right Search on the top right (although there are many

exceptions to this)

Well-established conventions Content in the center of the page Related material and promotions on the right Search on the top right (although there are many

exceptions to this)

Design Principle: Consistency –

Functions a public transport website might be expected to

offer timetables, fare information, and a trip planner

a cinema website may be expected to offer a ticket-booking system. If the site cannot provide this, at least provide information on equivalent functions (such as a phone number for bookings)

a public transport website might be expected to offer timetables, fare information, and a trip planner

a cinema website may be expected to offer a ticket-booking system. If the site cannot provide this, at least provide information on equivalent functions (such as a phone number for bookings)

Design Principle: Consistency –

Functions

Design Principle: Consistency – Visual

Treatment As the user moves through your site, the visual

treatment provides reassurance that they are still in the same place, and gives an overall impression of professionalism and reliability

Applies not only to the obvious elements like logos and navigation, but also to content elements, fonts and backgrounds

As the user moves through your site, the visual treatment provides reassurance that they are still in the same place, and gives an overall impression of professionalism and reliability

Applies not only to the obvious elements like logos and navigation, but also to content elements, fonts and backgrounds

Design Principle: Consistency – Visual

Treatment

Design Principle: Consistency

Tip: Define user interface guidelines for each project or for a group of projects

Tip: Define user interface guidelines for each project or for a group of projects

Design Principle: Familiarity

Draw on concepts from the users' previous experiences and use appropriate metaphors

Draw on concepts from the users' previous experiences and use appropriate metaphors

Design Principle: Familiarity

Design Principle: Efficiency

Focus users on completing tasks in the easiest and fastest way

Provide keyboard support and shortcuts Personalization

Focus users on completing tasks in the easiest and fastest way

Provide keyboard support and shortcuts Personalization

Design Principle: Efficiency

Design Principle: Efficiency

Focus users on completing tasks in the easiest and fastest way

Provide keyboard support and shortcuts Personalization

Focus users on completing tasks in the easiest and fastest way

Provide keyboard support and shortcuts Personalization

Design Principle: Efficiency

Design Principle: Accessibility

more than just providing the necessary features to support the technologies used by people with a disability, such as visual impairment, motor disabilities or intellectual disabilities

also about supporting older people (with variable font size), people in rural locations (with a light page weight) or people with colour blindness (by not using colour alone as a highlight)

more than just providing the necessary features to support the technologies used by people with a disability, such as visual impairment, motor disabilities or intellectual disabilities

also about supporting older people (with variable font size), people in rural locations (with a light page weight) or people with colour blindness (by not using colour alone as a highlight)

Design Principle: Accessibility

assistive/adaptive technologies: built-in customizing options (such as changes to font

sizes and styles, changes to mouse appearance and operation, changes to keyboard operation, changes to the operation of warnings and notifications)

simple built-in aids (such as magnification or read aloud options)

assistive/adaptive technologies: built-in customizing options (such as changes to font

sizes and styles, changes to mouse appearance and operation, changes to keyboard operation, changes to the operation of warnings and notifications)

simple built-in aids (such as magnification or read aloud options)

Design Principle: Accessibility

all functions must work using a keyboard as well as a mouse (including scripts, hovers, onmouseovers, etc.)

content must make sense when rendered linearly assistive technology works with the code, so that

the underlying code must make sense, not just the visual presentation

non-text elements (images, multimedia, etc.) must have text equivalents

structure must be created with code not visual presentation (e.g. headings, lists, tables, forms)

all functions must work using a keyboard as well as a mouse (including scripts, hovers, onmouseovers, etc.)

content must make sense when rendered linearly assistive technology works with the code, so that

the underlying code must make sense, not just the visual presentation

non-text elements (images, multimedia, etc.) must have text equivalents

structure must be created with code not visual presentation (e.g. headings, lists, tables, forms)

Design Principle: Accessibility

Design Principle: Accessibility

Design Principle: Simplicity

"The simplest way to achieve simplicity is through thoughtful reduction" – John Maeda, The Laws of Simplicity

"The simplest way to achieve simplicity is through thoughtful reduction" – John Maeda, The Laws of Simplicity

Design Principle: Simplicity

Quality of being natural, plain and easy to understand Most people naturally dislike complexity in devices

and software

Quality of being natural, plain and easy to understand Most people naturally dislike complexity in devices

and software

Design Principle: Simplicity

Design Principle: Simplicity – Modal

Windows

Design Principle: Simplicity – Hover

Controls

Design Principle: Simplicity – Controls on

Demand

Design Principle: Simplicity – Expanding

Forms

Design Principle: Simplicity – Labels inside Input Forms

Design Principle: Simplicity – Icons

instead of Text

Design Principle: Simplicity – Context-

based Controls

Design Principle: Simplicity - Restraint

Quality of holding yourself back and implementing something which solves the problem in the simplest way possible

Giving your work an identity certainly does not mean you are losing restraint but it may lead you down the road of implementing too many design elements for the sake of design elements

Instead, apply your identity to the core elements

Quality of holding yourself back and implementing something which solves the problem in the simplest way possible

Giving your work an identity certainly does not mean you are losing restraint but it may lead you down the road of implementing too many design elements for the sake of design elements

Instead, apply your identity to the core elements

Design Principle: Simplicity - Restraint

Design Principle: Simplicity - Restraint

Design Principle: Simplicity - Restraint

Design Principle: Simplicity - Restraint

Design Principle: Simplicity - Restraint

Design Principle: Simplicity - Restraint

Design Principle: Simplicity - Restraint

Design Principle: Aesthetics

The science of how things are known via the senses Examines our affective domain response to an object

or phenomenon

The science of how things are known via the senses Examines our affective domain response to an object

or phenomenon

Design Principle: Aesthetics - Affect

Design Principle: Aesthetics - Affect

"... emotion is not a luxury: it is an expression of basic mechanisms of life regulation developed in evolution, and is indispensable for survival. It plays a critical role in virtually all aspects of learning, reasoning and creativity. Somewhat surprisingly, it may play a role in the construction of consciousness." -- Antonio Damasio, neurobiologist

"... emotion is not a luxury: it is an expression of basic mechanisms of life regulation developed in evolution, and is indispensable for survival. It plays a critical role in virtually all aspects of learning, reasoning and creativity. Somewhat surprisingly, it may play a role in the construction of consciousness." -- Antonio Damasio, neurobiologist

Design Principle: Aesthetics - Affect

Product personality influences our perceptions Product personality influences our perceptions

Design Principle: Aesthetics - Affect

Design Principle: Aesthetics - Affect

Design Principle: Aesthetics - Affect

Design Principle: Aesthetics - Affect

Why should we care? People identify with (or avoid) certain

personalities Trust is related to personality Perception and expectations are linked with

personality

Why should we care? People identify with (or avoid) certain

personalities Trust is related to personality Perception and expectations are linked with

personality

Design Principle: Aesthetics - Affect

Why should we care? Consumers "choose" products that are an

extension of themselves We treat sufficiently advanced technology as

though it were human Consider: What kind of personality are you

creating with your application? And what expectations does this personality bring with it?

Why should we care? Consumers "choose" products that are an

extension of themselves We treat sufficiently advanced technology as

though it were human Consider: What kind of personality are you

creating with your application? And what expectations does this personality bring with it?

Design Principle: Aesthetics – Trust and

Credibility

Design Principle: Aesthetics – Trust and

Credibility

According to a study, the "appeal of the overall visual design of a site, including layout, typography, font size, and color schemes", is the number one factor we use to evaluate a website's credibility

According to a study, the "appeal of the overall visual design of a site, including layout, typography, font size, and color schemes", is the number one factor we use to evaluate a website's credibility

Design Principle: Aesthetics – Trust and

Credibility

Aside from providing the basics, such as reliable information and uptime, attention to design details implies that the same care and attention has been spent on the other (less visible) parts of the product – which implies that this is a trustworthy product

Aside from providing the basics, such as reliable information and uptime, attention to design details implies that the same care and attention has been spent on the other (less visible) parts of the product – which implies that this is a trustworthy product

Design Principle: Aesthetics

"affect, which is inexplicably linked to attitudes, expectations and motivations, plays a significant role in the cognition of product interaction... the perception that affect and cognition are independent, separate information processing systems is flawed."

"affect, which is inexplicably linked to attitudes, expectations and motivations, plays a significant role in the cognition of product interaction... the perception that affect and cognition are independent, separate information processing systems is flawed."

Design Principle: Aesthetics

Summary Difference between Websites and Web Applications

Research Techniques for Knowing Your Users

Task Analysis

UI/UX Design Principles for Web Applications

Usability Affordance Intuitiveness Responsiveness Forgiveness

Difference between Websites and Web Applications

Research Techniques for Knowing Your Users

Task Analysis

UI/UX Design Principles for Web Applications

Usability Affordance Intuitiveness Responsiveness Forgiveness

Summary UI/UX Design Principles for Web Applications

Consistency Familiarity Efficiency Accessibility Simplicity Aesthetics

UI/UX Design Principles for Web Applications

Consistency Familiarity Efficiency Accessibility Simplicity Aesthetics

References Difference between UI and UX

http://www.webdesignerdepot.com/2012/06/ui-vs-ux-whats-the-difference/ http://www.helloerik.com/ux-is-not-ui

Designing UI for Business Web Applications http://uxdesign.smashingmagazine.com/2010/02/25/designing-user-interfaces-for-business-web-applications/

Designing for Real People http://52weeksofux.com/post/385981879/you-are-not-your-user

Task Analysis http://www.usability.gov/how-to-and-tools/methods/task-analysis.html

http://www.usabilitypost.com/2009/04/15/8-characteristics-of-successful-user-interfaces/

Difference between UI and UX http://www.webdesignerdepot.com/2012/06/ui-vs-ux-whats-the-difference/ http://www.helloerik.com/ux-is-not-ui

Designing UI for Business Web Applications http://uxdesign.smashingmagazine.com/2010/02/25/designing-user-interfaces-for-business-web-applications/

Designing for Real People http://52weeksofux.com/post/385981879/you-are-not-your-user

Task Analysis http://www.usability.gov/how-to-and-tools/methods/task-analysis.html

http://www.usabilitypost.com/2009/04/15/8-characteristics-of-successful-user-interfaces/

References Designing and Selecting Components for Uis

http://uxmag.com/articles/designing-amp-selecting-components-for-uis Why Consistency is Critical

http://www.sitepoint.com/why-consistency-is-critical/ Forgiveness in UI Design

http://www.jankoatwarpspeed.com/forgiveness-in-ui-design/ Web Form Validation: Best Practices and Tutorials

http://www.smashingmagazine.com/2009/07/07/web-form-validation-best-practices-and-tutorials/

Designing and Selecting Components for Uis http://uxmag.com/articles/designing-amp-selecting-components-for-uis

Why Consistency is Critical http://www.sitepoint.com/why-consistency-is-critical/

Forgiveness in UI Design http://www.jankoatwarpspeed.com/forgiveness-in-ui-design/

Web Form Validation: Best Practices and Tutorials http://www.smashingmagazine.com/2009/07/07/web-form-validation-best-practices-and-tutorials/

References 7 Interface Design Techniques to Simplify and Declutter

your Interfaces http://www.webdesignerdepot.com/2009/02/7-interface-design-techniques-to-simplify-and-de-clutter-your-interfaces/

Restraint http://www.usabilitypost.com/2009/10/02/restraint/

In Defense of Eye Candy http://alistapart.com/article/indefenseofeyecandy

7 Interface Design Techniques to Simplify and Declutter your Interfaces

http://www.webdesignerdepot.com/2009/02/7-interface-design-techniques-to-simplify-and-de-clutter-your-interfaces/ Restraint

http://www.usabilitypost.com/2009/10/02/restraint/ In Defense of Eye Candy

http://alistapart.com/article/indefenseofeyecandy

References 12 Useful Techniques for Good User Interface Design in

Web Applications http://uxdesign.smashingmagazine.com/2009/01/19/12-useful-techniques-for-good-user-interface-design-in-web-applications/

8 Characteristics of Successful User Interfaces http://www.usabilitypost.com/2009/04/15/8-characteristics-of-successful-user-interfaces/

12 Useful Techniques for Good User Interface Design in Web Applications

http://uxdesign.smashingmagazine.com/2009/01/19/12-useful-techniques-for-good-user-interface-design-in-web-applications/ 8 Characteristics of Successful User Interfaces

http://www.usabilitypost.com/2009/04/15/8-characteristics-of-successful-user-interfaces/

top related