SlideShare a Scribd company logo
1 of 258
Download to read offline
User interface design
for web applications
Michael Kowalski
Kitsite.com
What we’re going to cover
•   What is the difference between designing a
    webapp and designing a website?

•   Why is good user interface design important?

•   What are the characteristics of a great user
    interface?

•   What can we learn from interaction design?

•   What are some specific techniques that I can
    use to improve my webapp UI?

•   Where is web UI design heading?
Q.
 How is designing a web
 application different from
 designing a website?
Information
Information
Information   Interaction
Web user interface

             HTML form controls
             are the primitives of
             an application user
             interface
Hey, let’s build the webapp right
               here!

 •   Democratisation of user interface
     development

 •   Low cost, rapid development

 •   The web is an open distribution channel

 •   Anybody can build a web app!
Alan Cooper
“The limitations and challenges of
              web interactivity... set interaction
              design back several years”

Alan Cooper
Web constraints
Web constraints
    annoyances
Living on the network
Living on the network


•   Connectivity
Living on the network


•   Connectivity
•   Network latency
Living on the network


•   Connectivity
•   Network latency
•   Source code down the wire
Living in the browser
   x
Living in the browser
       x

•   Security sandbox
•   Box-model rendering
•   Limited widget set
      No access to system menus
      No rich text editing
      No drawing

•   Typographically limited
My pet hates

•   <select multiple>!

•   Backspace key for navigation!
•   Form controls are modal!
•   CSS...
But if web UI sucks so badly...
But if web UI sucks so badly...
how come the web is winning?
Why web apps became viable

•   Cross-platform consistency driven by
    standards

•   Asynchrony

•   Faster networks and computers

•   “Worse is better”
Innovation from the web

Hyperlinks
                                            Folksonomy
  navigation
                          Findability
addressability
 bookmarks



                                        Embedding
                 Social apps
                                         portlets
                sharing
                                         widgets
             collaboration
Q.
 Why is good user interface
 design important?
•   The rise of utility computing (S3, etc) and the
    adoption of good web frameworks has
    reduced web development costs.
•   The rise of utility computing (S3, etc) and the
    adoption of good web frameworks has
    reduced web development costs.

•   It’s never been cheaper or easier to get an
    idea to market.
•   The rise of utility computing (S3, etc) and the
    adoption of good web frameworks has
    reduced web development costs.

•   It’s never been cheaper or easier to get an
    idea to market.

•   In a more competitive market, emphasis will
    shift from executing first to executing best.
•   The rise of utility computing (S3, etc) and the
    adoption of good web frameworks has
    reduced web development costs.

•   It’s never been cheaper or easier to get an
    idea to market.

•   In a more competitive market, emphasis will
    shift from executing first to executing best.

•   The quality of user experience is becoming
    the significant differentiator.
•   The rise of utility computing (S3, etc) and the
    adoption of good web frameworks has
    reduced web development costs.

•   It’s never been cheaper or easier to get an
    idea to market.

•   In a more competitive market, emphasis will
    shift from executing first to executing best.

•   The quality of user experience is becoming
    the significant differentiator.

•   Also, scaling your app depends on not having
    to handle support requests (or at least, not
    linearly).
Let’s not reinvent wheels

We can take advantage of many years of
research in interaction design.
Plus we can look at best practice on the
web today.
Q.
 What are the characteristics
 of a good user interface?
simple
consistent
simple
consistent
simple                polite
consistent
  simple                  polite




responsive
consistent
  simple                  polite




responsive
             pragmatic
consistent
  simple                      polite




responsive
                          aesthetically
             pragmatic
                            pleasing
Interaction design
     concepts
Concept 1 The user
You are not the user!
Real world process or object
The implementation model
The user model
The user model
The user model




Mismatch between the user model and
the implementation model is a source
of usability problems
Users have different levels
of expertise




 Novice    Intermediate   Expert
Users have different levels
of expertise




 Novice    Intermediate   Expert
Users have different levels
of expertise




 Novice    Intermediate   Expert
The rule of 7
The rule of 7
•   Short term memory
    holds around 7 distinct
    things
• Fades in 10 - 20 seconds
Spolsky’s 3 laws of users




      People can’t control
          the mouse
Spolsky’s 3 laws of users

                 People can’t read



      People can’t control
          the mouse



        People can’t remember
A polite interface assumes the
user is busy and has more
important things to do than think
about how the app works.
A polite interface assumes the
user is busy and has more
important things to do than think
about how the app works.

•   Talks the user’s language

•   Designed around the user’s conceptual model

•   Focused on achieving user goals

•   Is tolerant and forgiving
Concept 2 Metaphor
Metaphor   A shopping basket

             • Add to the basket
             • View the basket
             • Go to the check out
Metaphor can be a useful way of
gluing together the user model
and the implementation model

 •   Metaphor gives developers a language to
     discuss the model

 •   Warning: metaphors can get you in trouble if
     you follow them too literally
False metaphor
Concept 3 Aordance
Affordance is...
“the perceived and actual properties of the
thing... that determine just how the thing could
possibly be used”
Don Norman, The Design of Everyday Things
A tale of two buttons



  Save         Save
A tale of two buttons


  Save         Save
A tale of two buttons


  Save         Save
A tale of two buttons


  Save         Save
A tale of two buttons


  Save         Save
A tale of two buttons


  Save         Save
A tale of two buttons


  Save         Save
A tale of two buttons


  Save         Save
The #1 affordance on the web


 Home | Help | Your profile
The #1 affordance on the web


    Home | Help | Your profile



•    This is a learned affordance
New affordances evolve
Fitt’s Law

         T = a + b log2(D +1)
                       W
where
  T is the average time taken to complete the
  movement.
  a and b are empirical constants, and can be
  determined by fitting a straight line to measured
  data.
  D is the distance from the starting point to the
  centre of the target.
Fitt’s Law

T = a + b log2(D +1)
              W
Fitt’s Law

 T = a + b log2(D +1)
               W
Targets that are smaller
and/or further away require
more time to acquire.
Bigger targets are better


    Browse      Search
Bigger targets are better


    Browse      Search
Bigger targets are better


    Browse      Search
Bigger targets are better


    Browse      Search
Affordance techniques

•   Bevelled edges and gradients on buttons

•   Texture, eg. grippy corners on draggables
•   label for

•   Tooltips (via title attribute on a tags)

•   Cursor hinting
Concept 4 Excise
Excise is noise in the interface
•   A “cognitive tax” on the user

•   Effort that is not directed towards the users’
    goals

•   Frequently exposes the underlying
    implementation model

•   Satisfies the needs of the technology rather
    than the user

•   Visual clutter is excise

•   Customisation is usually excise
Too much affordance is excise
Therefore:

•   Trade off affordance against excise to
    prioritise more frequent tasks

•   Provide extra affordance transiently, eg. on
    mouseover

•   Reduce the affordance on less commonly
    used controls
Using links for commands


                                          Save
Cancel




 •   In a form, hyperlinks have less affordance than
     buttons, so can be used to reduce excise.

 •   Use a different colour to distinguish command
     links from navigational links.
Progressive disclosure
Use progressive disclosure to reduce excise
   Show more
Progressive disclosure
    Use progressive disclosure to reduce excise
       Show more
             less

•   Disclosure arrows

•   Hyperlinks to popups or overlays

•   Dropdowns
    In a goal-oriented design, not every function has
    to be accessible from every screen.
Concept 5 Modes
Modes
The same gesture has different meanings
depending on what mode the application is in
Modes

 Approve          Reject

That’s the stupidest thing I ever heard!
I agree with every word of your brill...
Buy Vi@gra from us!!!
Modes

      Approve          Reject

     That’s the stupidest thing I ever heard!
     I agree with every word of your brill...
     Buy Vi@gra from us!!!



Modal Choose the command mode first (eg.
“Approve” and then select the item to action.
Modes

      Approve          Reject

     That’s the stupidest thing I ever heard!
     I agree with every word of your brill...
     Buy Vi@gra from us!!!



Modeless Make a selection first, and then choose
Modal Choose the command mode first (eg.
a command to then to that selection.
“Approve” and apply select the item to action.
Modes
Modes

•   With a few exceptions, modes are bad
Modes

•   With a few exceptions, modes are bad

•   The exceptions: graphics and other drawing
    apps
Modes

•   With a few exceptions, modes are bad

•   The exceptions: graphics and other drawing
    apps

•   Transient modes are less bad
Modes

•   With a few exceptions, modes are bad

•   The exceptions: graphics and other drawing
    apps

•   Transient modes are less bad

•   If you are using modes, then the current mode
    should be visible right where the user is
    looking (eg. by changing the cursor).
Concept 6 Posture
What is posture?

•   Defined by Alan Cooper in About Face

•   Identified 4 different postures for apps

•   Posture relates to amount of attention that a
    user will give the application
Sovereign
Transient
Auxiliary
Daemonic
Immersive
Concept 7 Preattention
Preattention variables

       •   Hard-wired rules of human
           perception

       •   Things we see immediately,
           without conscious thought
Visual properties




                         Intensity
               Shape
Colour




                         Symmetry
Texture        Motion
Visual properties




                         Intensity
               Shape
Colour




                         Symmetry
Texture        Motion
Spot the odd one out
Spot the odd one out
Grouping
Use grouping and visual
         properties to:

•   Prioritise what’s important and most useful

•   Associate related commands or information

•   Distinguish between controls that behave
    differently

•   Establish consistency
Bad Amazon




•   Buttons are variably sized

•   Poor alignment and inconsistent guttering

•   Giftbox icon is excise

•   Colours used inconsistently
Concept 8 Locus
I’m looking here
I’ll notice this
I probably won’t notice anything here
Concept 9 Feedback
Communication



                  Action
Visual cues                   Feedback




                  time
Communication



                      Action
   Visual cues                    Feedback
(“feedforward”)


                      time
0.25
After          seconds, the
user will assume that it hasn’t
worked and try again
Feedback rules
Feedback rules
• If an action will take more than 0.1 sec to
   complete, visually indicate that it has started.
Feedback rules
• If an action will take more than 0.1 sec to
    complete, visually indicate that it has started.

•   Use spinners or progress bars for actions that
                          1 second.
    will take more than
Feedback rules
• If an action will take more than 0.1 sec to
    complete, visually indicate that it has started.

•   Use spinners or progress bars for actions that
                          1 second.
    will take more than

•   Document load events should not take more
           10 seconds.
    than
Feedback rules
• If an action will take more than 0.1 sec to
    complete, visually indicate that it has started.

•   Use spinners or progress bars for actions that
                          1 second.
    will take more than

•   Document load events should not take more
           10 seconds.
    than

•   Acknowledge completion modelessly
Feedback rules
• If an action will take more than 0.1 sec to
    complete, visually indicate that it has started.

•   Use spinners or progress bars for actions that
                          1 second.
    will take more than

•   Document load events should not take more
           10 seconds.
    than

•   Acknowledge completion modelessly

•   If completion will take longer than a few
    seconds, the new status should be displayed
    non-transiently
Now Current state
•   What’s happening now?

•   Am I logged in?

•   Are my friends logged in?

•   Is there new activity I should know about?
Next Visual cues

•   What’s going to happen next?

•   What will happen if I click this?
Concept 10 Icons
Icons
Icons can be useful because:

•   Don’t take up much screen real state

•   Take advantage of human spatial recall

•   They have become a familiar idiom

•   Can add colour and visual interest
The trouble with icons
The trouble with icons

•   In a modeless interface, most command
    affordances will be verbs.
The trouble with icons

•   In a modeless interface, most command
    affordances will be verbs.

•   Verbs are hard to draw.
The trouble with icons

•   In a modeless interface, most command
    affordances will be verbs.

•   Verbs are hard to draw.

•   Most icons are therefore hard to interpret
    without a label.
The trouble with icons

•   In a modeless interface, most command
    affordances will be verbs.

•   Verbs are hard to draw.

•   Most icons are therefore hard to interpret
    without a label.

•   Icons work best in sovereign posture
    applications where space is at premium and
    users have the time to learn the icons.
Rules for using icons
•   Use icons sparingly.

•   Use icons that convention has made familiar
    (eg. document icons)

•   Label your icons, using the app vocabulary.
    Avoid puns!

•   Don’t forget your app’s colour scheme and
    lighting angle.You may need a larger palette of
    colours for hinting - but still keep it
    constrained.

•   Get professionals to design them!
Concept 11 Learnability
Learnability is...

•   what we usually mean when we say “intuitive.”

•   Because most web apps have a transient
    posture, this is particularly important - your
    app has to be relearnable as well as learnable.

•   Warning Too much guidance can be excise
Concept 12 
 irectD

 
 
 
 
 
 
 
 
 manipulation
Direct manipulation
Direct manipulation
•   The user acts directly on a visual
    representation of an object, and immediately
    sees the result.
Direct manipulation
•   The user acts directly on a visual
    representation of an object, and immediately
    sees the result.

•   Examples:

    •   Drag and drop

    •   Drag resize

    •   Drawing tools
Direct manipulation
•   The user acts directly on a visual
    representation of an object, and immediately
    sees the result.

•   Examples:

    •   Drag and drop

    •   Drag resize

    •   Drawing tools

•   Downside: generally poor affordance
Evaluating web app UI

Divide up into groups of about 4

Pick a web app

Evaluate aordance, excise and feedback

Look for good and bad points

Suggest at least one improvement

15 minutes
br/
Techniques
Technique 1 UI first
Design the user experience first
Design the user experience first
 •   Before user research?
Design the user experience first
 •   Before user research?

 •   Before data modelling?
Design the user experience first
 •   Before user research?

 •   Before data modelling?

 •   Before technology choices?
Design the user experience first
 •   Before user research?

 •   Before data modelling?

 •   Before technology choices?

Yes! Avoid getting railroaded by the
implementation model
User research

•   Formal user research can be expensive, tricky
    and inconclusive

•   Long-tail users might be hard to come by

•   Informal research with a handful of users can
    give useful insights

•   Beta launching can get early feedback from
    real users

•   Apple vs Microsoft
Technique 2 Personas
Sarah Turner                 Justin Finch
“Sooner is better.”          “I’m not much of a
                             technology buff, to be
Occupation: Head of
                             honest”
PR
                             Occupation: Bookseller
Wants to get prior
approval on new              Wants to get info about
corporate comms.             new releases as painlessly
Worries that her staff       as possible. Low
will not use the new app     expectations: thinks the
unless it’s really simple.   app will be pointlessly
Must have controlled         complicated. Dislikes hard
costs. Sarah can be quite    sell from publishers; wants
demanding.                   to make up his own mind.
Sarah Turner                      Justin Finch
“Sooner is better.”               “I’m not much of a
                                  technology buff, to be
Occupation: Head of
                                  honest”
PR
                                  Occupation: Bookseller
Wants to get prior
approval on new                   Wants to get info about
corporate comms.                  new releases as painlessly
Worries that her staff            as possible. Low
will not use the new app          expectations: thinks the
unless it’s really simple.        app will be pointlessly
Must have controlled              complicated. Dislikes hard
costs. Sarah can be quite         sell from publishers; wants
demanding.
        • Not a market segment
                                  to make up his own mind.


        • A representative individual
Technique 3 Goal-directed
            design
Goal-directed design

                Task
Task
                              Task
                                     Goal
       Task

                       Task
Goal-directed design

                Task
Task
                              Task
                                         Goal
       Task

                       Task



       May not be appropriate in social spaces
Goal-directed design

•   Determine goals

•   Break down into tasks

•   Aim for 1 task = 1 screen

•   Every digression is an obstacle to the user



Step 1        Step 2         Step 3         Done
“Just start”

•   Occasional use or transient posture apps
    need to be optimised for novices over
    intermediates.

•   The web is your marketing and distribution
    channel. “Try-before-buy” means barriers to
    entry need to be as low as possible.

•   Zero configuration is the ideal.
Technique 4 Paper
            prototyping
Paper prototyping
   Basic materials
Paper prototyping
    In practice

            •     Use role play

            •     Encourage “think-aloud”

            •     If user testing with real
                  users, don’t cheat: the
                  “Computer” must not
                  speak. Set goals and
                  leave user to it
Paper prototyping
                  Advantages

•   It’s really cheap. Really, really cheap.

•   You can iterate on the spot

•   Can be used for brainstorming as well as
    proof of concept testing

•   Very flexible, can be adapted to suit skill levels
    of participants

•   Good for working out what is essential, and
    what can be descoped
Other prototyping techniques
•   Presentation software

•   Quick-and-dirty software mockups
Other prototyping techniques
•   Presentation software

•   Quick-and-dirty software mockups

    Beware the implementation model!
Technique 5 Grid systems
Grid systems

•   Enforce consistency, exploit spatial memory

•   All grid measurements defined in terms of an
    atomic unit (eg. 10 pixels)

•   Minimise number of different layouts based on
    the grid

•   Yahoo! and Google both provide useful
    starting points
Example grid

Atom             Header width
                 120
10 pixels
                                Overlay height
                                 320



                                             Overlay width
                                                 440




                                                             Gutter
            10                       540                      20      180   10
Squint tests

•   Take a snapshot of your interface

•   Greyscale it in Photoshop

•   Blur until you can’t make out detailed
    structure
Squint tests

•    Take a snapshot of your interface

•    Greyscale it in Photoshop

•    Blur until you can’t make out detailed
     structure

OR

•    Just sit back a bit and squint
Technique 6 Modular design
Modularity

•   Aim for “deep consistency” by reusing design
    elements throughout your app

•   Modules range from single control elements (a
    button) to complex composite widgets.

•   Include abstract structural elements like a
    “sidebar box” as well as behaviours

•   Develop an application lexicon
Colour swatches

•   Add colour late in the design process.

•   Use a small palette: 2 or 3 base colours.

•   Use a small number of different tints of the
    base colours, eg. 100%, 80%, 40%

•   Greyscale the coloured design to check
    contrast and intensity.
Consistent light source

     Mac OS9                       Mac OS X
to top left of screen   directly above, slightly forward



        OK                           OK
Technique 7 Copywriting
Copywriting is interface design

 •   Stick to the metaphor (within reason)

 •   Use the user’s language

 •   Avoid technical jargon

 •   Use consistent terminology: write a thesaurus

 •   Polite messages

 •   Positive actions in checkbox labels

 •   Keep it brief
Technique 8 Triage
Is that really necessary?
Q.   If you remove an interface element, will
     the interface still function?

 •    Prune visual clutter and gratuitous motion

 •    Avoid forcing user to toggle back and forth
      between mouse and keyboard

 •    Avoid user preferences: modal excise

 •    Monotony as a virtue: only one way to
      perform any particular action
Technique 9 Ajax
Ajax  Performance

•   Avoid full page reloads

•   Deferral Fetch additional data after the
    screen has loaded

•   Progressive loading Incrementally fetch data
    as it is requested
Ajax  Excise

•   Use transient affordances at the locus of
    attention

•   Use disclosure to reveal additional guidance
    or advanced options only on request
Ajax  Modes

•   Provide modeless feedback and state
    information

•   Use overlays for modal or auxiliary
    interactions
Using overlays
Using overlays
•   Overlays have displaced modal dialogs in many
    webapps
Using overlays
•   Overlays have displaced modal dialogs in many
    webapps

•   Overlays became popular because:
    •   They avoid popup blockers
    •   They can be more attractively styled than the
        default Javascript alert windows, and can load
        new content
    •   New windows can be weirdly slow to render
        on some platforms
    •   They avoid accidental dismissal problems.
Modeless overlay
Modal overlay
Rules for modal overlays

•   Don’t use for informational or confirmation
    messages: these should be modeless

•   Don’t ask questions to which you already
    know the answer (eg, where “OK” is the only
    option)

•   Use sparingly: don’t cry wolf

•   Remember overlays are not bookmarkable

•   Don’t try and emulate the OS
Ajax  Animation
Motion is a preattentive variable.
Ajax  Animation
       Motion is a preattentive variable.

•   Just because you can, doesn’t mean you
    should!
Ajax  Animation
       Motion is a preattentive variable.

•   Just because you can, doesn’t mean you
    should!

•   Animation introduces latency and is
    distracting
Ajax  Animation
        Motion is a preattentive variable.

•   Just because you can, doesn’t mean you
    should!

•   Animation introduces latency and is
    distracting

•   Use it when you want to distract the user, ie.
    shift the user’s locus of attention
Ajax  Animation
        Motion is a preattentive variable.

•   Just because you can, doesn’t mean you
    should!

•   Animation introduces latency and is
    distracting

•   Use it when you want to distract the user, ie.
    shift the user’s locus of attention

•   Good use: changes to screen layout (eg.
    opening a drawer or palette)
Technique 10 Memory
Things to remember
Things to remember

•   Configuration options
Things to remember

•   Configuration options

•   Paginated lists: remember page number
Things to remember

•   Configuration options

•   Paginated lists: remember page number

•   Hierarchical lists: remember open nodes
Things to remember

•   Configuration options

•   Paginated lists: remember page number

•   Hierarchical lists: remember open nodes

•   MRU - Most Recently Used
Things to remember

•   Configuration options

•   Paginated lists: remember page number

•   Hierarchical lists: remember open nodes

•   MRU - Most Recently Used

•   MFU - Most Frequently Used
Things to remember

   •   Configuration options

   •   Paginated lists: remember page number

   •   Hierarchical lists: remember open nodes

   •   MRU - Most Recently Used

   •   MFU - Most Frequently Used


Missed opportunity Remember state between sessions
Technique 11 Service design
MyApp
MyApp
Adoption   Support


Discovery                        Community
Software as a service

•   Web apps are services

•   Great! An opportunity to break out of feature
    bloat cycle, as do not need to sell new
    features with each upgrade

•   Think about service design
Service design

•   Think about user interaction with app in a
    broader way than how a session works

•   Touchpoints

•   Service blueprint
User acquisition touchpoint
Technique 12 Design patterns
Using design patterns

•   Consistent internally - but also consistent
    with usage elsewhere on the web

•   Identify relevant patterns on other websites

•   O’Reilly’s Designing Interfaces takes a pattern-
    based approach

•   Yahoo! Design Patterns Library
The future
Trends
Trends
•   Does fashion matter?
Trends
•   Does fashion matter?

•   Gradients, big fonts, drop shadows and
    rounded corners may stick around
Trends
•   Does fashion matter?

•   Gradients, big fonts, drop shadows and
    rounded corners may stick around

•   Overlays, autocomplete, libraries will be ever
    more popular
Trends
•   Does fashion matter?

•   Gradients, big fonts, drop shadows and
    rounded corners may stick around

•   Overlays, autocomplete, libraries will be ever
    more popular

•   Guided interfaces will become the norm
Trends
•   Does fashion matter?

•   Gradients, big fonts, drop shadows and
    rounded corners may stick around

•   Overlays, autocomplete, libraries will be ever
    more popular

•   Guided interfaces will become the norm

•   The web will increasingly drive innovation on
    the desktop (tags? bookmarks?)
Future
Future


Widgets
Future


Widgets
          Offline
Future


   Widgets
                    Offline




Charting / vector graphics
Future


   Widgets
                    Offline




Charting / vector graphics

         Mobile
Future

             Game design?
   Widgets
                    Offline




Charting / vector graphics

         Mobile
Future

             Game design?
   Widgets
                    Offline

    Social space
Charting / vector graphics

         Mobile
• In the future, most user
  interface innovation will
  come from the web
end

More Related Content

Viewers also liked

Introduction to usability heuristics
Introduction to usability heuristicsIntroduction to usability heuristics
Introduction to usability heuristicsKseniya Koltun
 
The 10 Golden Usability Heuristics (Montreal Girl Geeks September 2014)
The 10 Golden Usability Heuristics (Montreal Girl Geeks September 2014)The 10 Golden Usability Heuristics (Montreal Girl Geeks September 2014)
The 10 Golden Usability Heuristics (Montreal Girl Geeks September 2014)Elida Arrizza
 
UX Design Myths
UX Design Myths UX Design Myths
UX Design Myths Evan Samek
 
What is UX, in 10 Slides
What is UX, in 10 SlidesWhat is UX, in 10 Slides
What is UX, in 10 SlidesJordan Julien
 
Typography and User Experience - WCSF
Typography and User Experience -  WCSFTypography and User Experience -  WCSF
Typography and User Experience - WCSFSara Cannon
 
How UX Design Has Changed The World
How UX Design Has Changed The WorldHow UX Design Has Changed The World
How UX Design Has Changed The WorldBuiltByHQ
 
UX Design na WebExpo Startup Camp
UX Design na WebExpo Startup CampUX Design na WebExpo Startup Camp
UX Design na WebExpo Startup CampPetr Douša
 
10 Usability Heuristics explained
10 Usability Heuristics explained10 Usability Heuristics explained
10 Usability Heuristics explainedCraft Design
 

Viewers also liked (13)

UI/UX
UI/UXUI/UX
UI/UX
 
Introduction to usability heuristics
Introduction to usability heuristicsIntroduction to usability heuristics
Introduction to usability heuristics
 
HCI Basics
HCI BasicsHCI Basics
HCI Basics
 
The 10 Golden Usability Heuristics (Montreal Girl Geeks September 2014)
The 10 Golden Usability Heuristics (Montreal Girl Geeks September 2014)The 10 Golden Usability Heuristics (Montreal Girl Geeks September 2014)
The 10 Golden Usability Heuristics (Montreal Girl Geeks September 2014)
 
UX Design Myths
UX Design Myths UX Design Myths
UX Design Myths
 
UX is not UI!
UX is not UI!UX is not UI!
UX is not UI!
 
What is UX, in 10 Slides
What is UX, in 10 SlidesWhat is UX, in 10 Slides
What is UX, in 10 Slides
 
How to Teach UX Design
How to Teach UX DesignHow to Teach UX Design
How to Teach UX Design
 
Typography and User Experience - WCSF
Typography and User Experience -  WCSFTypography and User Experience -  WCSF
Typography and User Experience - WCSF
 
What is ux?
What is ux?What is ux?
What is ux?
 
How UX Design Has Changed The World
How UX Design Has Changed The WorldHow UX Design Has Changed The World
How UX Design Has Changed The World
 
UX Design na WebExpo Startup Camp
UX Design na WebExpo Startup CampUX Design na WebExpo Startup Camp
UX Design na WebExpo Startup Camp
 
10 Usability Heuristics explained
10 Usability Heuristics explained10 Usability Heuristics explained
10 Usability Heuristics explained
 

Similar to Michael Kowalski

Form Function Class 6, Manila, Philippines 14/11/2015
Form Function Class 6, Manila, Philippines 14/11/2015Form Function Class 6, Manila, Philippines 14/11/2015
Form Function Class 6, Manila, Philippines 14/11/2015Holger Bartel
 
Enhancing the user experience in our Web Applications
Enhancing the user experience in our Web ApplicationsEnhancing the user experience in our Web Applications
Enhancing the user experience in our Web ApplicationsChrisCariglia
 
Improving your site's usability - what users really want
Improving your site's usability - what users really wantImproving your site's usability - what users really want
Improving your site's usability - what users really wantleisa reichelt
 
10 Usability & UX Guidelines
10 Usability & UX Guidelines10 Usability & UX Guidelines
10 Usability & UX GuidelinesShawn Calvert
 
UX Pres MIni version!
UX Pres MIni version!UX Pres MIni version!
UX Pres MIni version!Jessi Baker
 
Performance Optimisation For Web & Mobile
Performance Optimisation For Web & MobilePerformance Optimisation For Web & Mobile
Performance Optimisation For Web & Mobileformfunction
 
Speed and Simplicity: Design and Usability for Multi-device Websites
Speed and Simplicity: Design and Usability for Multi-device WebsitesSpeed and Simplicity: Design and Usability for Multi-device Websites
Speed and Simplicity: Design and Usability for Multi-device WebsitesDoug Gapinski
 
Speed and simplicity
Speed and simplicitySpeed and simplicity
Speed and simplicitymStoner, Inc.
 
UX Insights from a Drunk Guy
UX Insights from a Drunk GuyUX Insights from a Drunk Guy
UX Insights from a Drunk GuyAustin Knight
 
New Rules of The Responsive Web
New Rules of The Responsive WebNew Rules of The Responsive Web
New Rules of The Responsive WebMatt Carver
 
UX, Agile and product management
UX, Agile and product managementUX, Agile and product management
UX, Agile and product managementPhil Barrett
 
Application designshowcase 1st_edition
Application designshowcase 1st_editionApplication designshowcase 1st_edition
Application designshowcase 1st_editionJeffrey Katz
 
Perfecting User Experience
Perfecting User ExperiencePerfecting User Experience
Perfecting User ExperienceJeremy Duimstra
 
Top Three Modern Product Trends
Top Three Modern Product TrendsTop Three Modern Product Trends
Top Three Modern Product TrendsJeremy Johnson
 
Bank Chris - Web UI Design Patterns - 2014
Bank Chris - Web UI Design Patterns - 2014Bank Chris - Web UI Design Patterns - 2014
Bank Chris - Web UI Design Patterns - 2014Shah Muhammad Baig
 
Designing usable web applications (part 1) experience dynamics web seminar
Designing usable web applications (part 1)  experience dynamics web seminarDesigning usable web applications (part 1)  experience dynamics web seminar
Designing usable web applications (part 1) experience dynamics web seminarExperience Dynamics
 
UX Analytics Cemal Büyükgökçesu
UX Analytics Cemal BüyükgökçesuUX Analytics Cemal Büyükgökçesu
UX Analytics Cemal BüyükgökçesuUserspots
 
Uxpin web ui design patterns 2014
Uxpin web ui design patterns 2014Uxpin web ui design patterns 2014
Uxpin web ui design patterns 2014MoodLabs
 
Web UI Design Patterns 2014
Web UI Design Patterns 2014Web UI Design Patterns 2014
Web UI Design Patterns 2014Lewis Lin 🦊
 

Similar to Michael Kowalski (20)

Designing usable forms
Designing usable formsDesigning usable forms
Designing usable forms
 
Form Function Class 6, Manila, Philippines 14/11/2015
Form Function Class 6, Manila, Philippines 14/11/2015Form Function Class 6, Manila, Philippines 14/11/2015
Form Function Class 6, Manila, Philippines 14/11/2015
 
Enhancing the user experience in our Web Applications
Enhancing the user experience in our Web ApplicationsEnhancing the user experience in our Web Applications
Enhancing the user experience in our Web Applications
 
Improving your site's usability - what users really want
Improving your site's usability - what users really wantImproving your site's usability - what users really want
Improving your site's usability - what users really want
 
10 Usability & UX Guidelines
10 Usability & UX Guidelines10 Usability & UX Guidelines
10 Usability & UX Guidelines
 
UX Pres MIni version!
UX Pres MIni version!UX Pres MIni version!
UX Pres MIni version!
 
Performance Optimisation For Web & Mobile
Performance Optimisation For Web & MobilePerformance Optimisation For Web & Mobile
Performance Optimisation For Web & Mobile
 
Speed and Simplicity: Design and Usability for Multi-device Websites
Speed and Simplicity: Design and Usability for Multi-device WebsitesSpeed and Simplicity: Design and Usability for Multi-device Websites
Speed and Simplicity: Design and Usability for Multi-device Websites
 
Speed and simplicity
Speed and simplicitySpeed and simplicity
Speed and simplicity
 
UX Insights from a Drunk Guy
UX Insights from a Drunk GuyUX Insights from a Drunk Guy
UX Insights from a Drunk Guy
 
New Rules of The Responsive Web
New Rules of The Responsive WebNew Rules of The Responsive Web
New Rules of The Responsive Web
 
UX, Agile and product management
UX, Agile and product managementUX, Agile and product management
UX, Agile and product management
 
Application designshowcase 1st_edition
Application designshowcase 1st_editionApplication designshowcase 1st_edition
Application designshowcase 1st_edition
 
Perfecting User Experience
Perfecting User ExperiencePerfecting User Experience
Perfecting User Experience
 
Top Three Modern Product Trends
Top Three Modern Product TrendsTop Three Modern Product Trends
Top Three Modern Product Trends
 
Bank Chris - Web UI Design Patterns - 2014
Bank Chris - Web UI Design Patterns - 2014Bank Chris - Web UI Design Patterns - 2014
Bank Chris - Web UI Design Patterns - 2014
 
Designing usable web applications (part 1) experience dynamics web seminar
Designing usable web applications (part 1)  experience dynamics web seminarDesigning usable web applications (part 1)  experience dynamics web seminar
Designing usable web applications (part 1) experience dynamics web seminar
 
UX Analytics Cemal Büyükgökçesu
UX Analytics Cemal BüyükgökçesuUX Analytics Cemal Büyükgökçesu
UX Analytics Cemal Büyükgökçesu
 
Uxpin web ui design patterns 2014
Uxpin web ui design patterns 2014Uxpin web ui design patterns 2014
Uxpin web ui design patterns 2014
 
Web UI Design Patterns 2014
Web UI Design Patterns 2014Web UI Design Patterns 2014
Web UI Design Patterns 2014
 

More from Carsonified Team

Chris Lea - What does NoSQL Mean for You
Chris Lea - What does NoSQL Mean for YouChris Lea - What does NoSQL Mean for You
Chris Lea - What does NoSQL Mean for YouCarsonified Team
 
Tara Hunt - Your Social Media Strategy Wont Save You
Tara Hunt - Your Social Media Strategy Wont Save YouTara Hunt - Your Social Media Strategy Wont Save You
Tara Hunt - Your Social Media Strategy Wont Save YouCarsonified Team
 
Dion Almaer & Ben Galbraith - Build Once, Deploy Everywhere
Dion Almaer & Ben Galbraith - Build Once, Deploy EverywhereDion Almaer & Ben Galbraith - Build Once, Deploy Everywhere
Dion Almaer & Ben Galbraith - Build Once, Deploy EverywhereCarsonified Team
 
Steve Huffman - Lessons learned while at reddit.com
Steve Huffman - Lessons learned while at reddit.comSteve Huffman - Lessons learned while at reddit.com
Steve Huffman - Lessons learned while at reddit.comCarsonified Team
 
Neil Patel - What You Need to be Measuring and How to Do It
Neil Patel - What You Need to be Measuring and How to Do ItNeil Patel - What You Need to be Measuring and How to Do It
Neil Patel - What You Need to be Measuring and How to Do ItCarsonified Team
 
Molly Holzschlag - How HTML 5 is Going to Completely Change your Web App
Molly Holzschlag - How HTML 5 is Going to Completely Change your Web AppMolly Holzschlag - How HTML 5 is Going to Completely Change your Web App
Molly Holzschlag - How HTML 5 is Going to Completely Change your Web AppCarsonified Team
 
Mike Mcderment - Marketing Metrics and the Systems You Need to Measure Them
Mike Mcderment - Marketing Metrics and the Systems You Need to Measure ThemMike Mcderment - Marketing Metrics and the Systems You Need to Measure Them
Mike Mcderment - Marketing Metrics and the Systems You Need to Measure ThemCarsonified Team
 
Fred Wilson - The 10 Golden Principles for Successful Web Apps
Fred Wilson - The 10 Golden Principles for Successful Web AppsFred Wilson - The 10 Golden Principles for Successful Web Apps
Fred Wilson - The 10 Golden Principles for Successful Web AppsCarsonified Team
 
Alex Payne - Speedy, Stable, and Secure: Better Web Applications Through Func...
Alex Payne - Speedy, Stable, and Secure: Better Web Applications Through Func...Alex Payne - Speedy, Stable, and Secure: Better Web Applications Through Func...
Alex Payne - Speedy, Stable, and Secure: Better Web Applications Through Func...Carsonified Team
 
Aaron Patzer - How to Take Your Start-up to the Next Level
Aaron Patzer - How to Take Your Start-up to the Next LevelAaron Patzer - How to Take Your Start-up to the Next Level
Aaron Patzer - How to Take Your Start-up to the Next LevelCarsonified Team
 
Taking your Site from One to One Million Users by Kevin Rose
Taking your Site from One to One Million Users by Kevin RoseTaking your Site from One to One Million Users by Kevin Rose
Taking your Site from One to One Million Users by Kevin RoseCarsonified Team
 
The New Marketing, by Ryan Carson
The New Marketing, by Ryan CarsonThe New Marketing, by Ryan Carson
The New Marketing, by Ryan CarsonCarsonified Team
 
FOWA Tour- Andy McLoughlin
FOWA Tour- Andy McLoughlinFOWA Tour- Andy McLoughlin
FOWA Tour- Andy McLoughlinCarsonified Team
 
FOWA Tour- Graeme Mathieson
FOWA Tour- Graeme MathiesonFOWA Tour- Graeme Mathieson
FOWA Tour- Graeme MathiesonCarsonified Team
 
FOWA Bristol/ Leeds- Dan Rubin
FOWA Bristol/ Leeds- Dan RubinFOWA Bristol/ Leeds- Dan Rubin
FOWA Bristol/ Leeds- Dan RubinCarsonified Team
 

More from Carsonified Team (20)

Chris Lea - What does NoSQL Mean for You
Chris Lea - What does NoSQL Mean for YouChris Lea - What does NoSQL Mean for You
Chris Lea - What does NoSQL Mean for You
 
Tara Hunt - Your Social Media Strategy Wont Save You
Tara Hunt - Your Social Media Strategy Wont Save YouTara Hunt - Your Social Media Strategy Wont Save You
Tara Hunt - Your Social Media Strategy Wont Save You
 
Dion Almaer & Ben Galbraith - Build Once, Deploy Everywhere
Dion Almaer & Ben Galbraith - Build Once, Deploy EverywhereDion Almaer & Ben Galbraith - Build Once, Deploy Everywhere
Dion Almaer & Ben Galbraith - Build Once, Deploy Everywhere
 
Steve Huffman - Lessons learned while at reddit.com
Steve Huffman - Lessons learned while at reddit.comSteve Huffman - Lessons learned while at reddit.com
Steve Huffman - Lessons learned while at reddit.com
 
Neil Patel - What You Need to be Measuring and How to Do It
Neil Patel - What You Need to be Measuring and How to Do ItNeil Patel - What You Need to be Measuring and How to Do It
Neil Patel - What You Need to be Measuring and How to Do It
 
Molly Holzschlag - How HTML 5 is Going to Completely Change your Web App
Molly Holzschlag - How HTML 5 is Going to Completely Change your Web AppMolly Holzschlag - How HTML 5 is Going to Completely Change your Web App
Molly Holzschlag - How HTML 5 is Going to Completely Change your Web App
 
Mike Mcderment - Marketing Metrics and the Systems You Need to Measure Them
Mike Mcderment - Marketing Metrics and the Systems You Need to Measure ThemMike Mcderment - Marketing Metrics and the Systems You Need to Measure Them
Mike Mcderment - Marketing Metrics and the Systems You Need to Measure Them
 
Fred Wilson - The 10 Golden Principles for Successful Web Apps
Fred Wilson - The 10 Golden Principles for Successful Web AppsFred Wilson - The 10 Golden Principles for Successful Web Apps
Fred Wilson - The 10 Golden Principles for Successful Web Apps
 
Alex Payne - Speedy, Stable, and Secure: Better Web Applications Through Func...
Alex Payne - Speedy, Stable, and Secure: Better Web Applications Through Func...Alex Payne - Speedy, Stable, and Secure: Better Web Applications Through Func...
Alex Payne - Speedy, Stable, and Secure: Better Web Applications Through Func...
 
Aaron Patzer - How to Take Your Start-up to the Next Level
Aaron Patzer - How to Take Your Start-up to the Next LevelAaron Patzer - How to Take Your Start-up to the Next Level
Aaron Patzer - How to Take Your Start-up to the Next Level
 
Taking your Site from One to One Million Users by Kevin Rose
Taking your Site from One to One Million Users by Kevin RoseTaking your Site from One to One Million Users by Kevin Rose
Taking your Site from One to One Million Users by Kevin Rose
 
The New Marketing, by Ryan Carson
The New Marketing, by Ryan CarsonThe New Marketing, by Ryan Carson
The New Marketing, by Ryan Carson
 
FOWA Tour- Richard Healy
FOWA Tour- Richard HealyFOWA Tour- Richard Healy
FOWA Tour- Richard Healy
 
FOWA Tour- Andy McLoughlin
FOWA Tour- Andy McLoughlinFOWA Tour- Andy McLoughlin
FOWA Tour- Andy McLoughlin
 
FOWA Tour- Dorothy Briggs
FOWA Tour- Dorothy BriggsFOWA Tour- Dorothy Briggs
FOWA Tour- Dorothy Briggs
 
FOWA Tour- Ryan Carson
FOWA Tour- Ryan CarsonFOWA Tour- Ryan Carson
FOWA Tour- Ryan Carson
 
FOWA Tour- Roan Lavery
FOWA Tour- Roan LaveryFOWA Tour- Roan Lavery
FOWA Tour- Roan Lavery
 
FOWA Tour- Graeme Mathieson
FOWA Tour- Graeme MathiesonFOWA Tour- Graeme Mathieson
FOWA Tour- Graeme Mathieson
 
FOWA Bristol/ Leeds- Dan Rubin
FOWA Bristol/ Leeds- Dan RubinFOWA Bristol/ Leeds- Dan Rubin
FOWA Bristol/ Leeds- Dan Rubin
 
FOWA Bristol- Ian Broom
FOWA Bristol- Ian BroomFOWA Bristol- Ian Broom
FOWA Bristol- Ian Broom
 

Recently uploaded

00971508021841 حبوب الإجهاض في دبي | أبوظبي | الشارقة | السطوة |❇ ❈ ((![© ر
00971508021841 حبوب الإجهاض في دبي | أبوظبي | الشارقة | السطوة |❇ ❈ ((![©  ر00971508021841 حبوب الإجهاض في دبي | أبوظبي | الشارقة | السطوة |❇ ❈ ((![©  ر
00971508021841 حبوب الإجهاض في دبي | أبوظبي | الشارقة | السطوة |❇ ❈ ((![© رnafizanafzal
 
Navigating Tax Season with Confidence Streamlines CPA Firms
Navigating Tax Season with Confidence Streamlines CPA FirmsNavigating Tax Season with Confidence Streamlines CPA Firms
Navigating Tax Season with Confidence Streamlines CPA FirmsYourLegal Accounting
 
Understanding Financial Accounting 3rd Canadian Edition by Christopher D. Bur...
Understanding Financial Accounting 3rd Canadian Edition by Christopher D. Bur...Understanding Financial Accounting 3rd Canadian Edition by Christopher D. Bur...
Understanding Financial Accounting 3rd Canadian Edition by Christopher D. Bur...ssuserf63bd7
 
obat aborsi bandung wa 081336238223 jual obat aborsi cytotec asli di bandung9...
obat aborsi bandung wa 081336238223 jual obat aborsi cytotec asli di bandung9...obat aborsi bandung wa 081336238223 jual obat aborsi cytotec asli di bandung9...
obat aborsi bandung wa 081336238223 jual obat aborsi cytotec asli di bandung9...yulianti213969
 
The Art of Decision-Making: Navigating Complexity and Uncertainty
The Art of Decision-Making: Navigating Complexity and UncertaintyThe Art of Decision-Making: Navigating Complexity and Uncertainty
The Art of Decision-Making: Navigating Complexity and Uncertaintycapivisgroup
 
Chapter 2 Organization Structure of a Treasury
Chapter 2 Organization Structure of a TreasuryChapter 2 Organization Structure of a Treasury
Chapter 2 Organization Structure of a TreasurySarunChhetri1
 
Mastering The Art Of 'Closing The Sale'.
Mastering The Art Of 'Closing The Sale'.Mastering The Art Of 'Closing The Sale'.
Mastering The Art Of 'Closing The Sale'.SNSW group8
 
Thompson_Taylor_MBBS_PB1_2024-03 (1)- Project & Portfolio 2.pptx
Thompson_Taylor_MBBS_PB1_2024-03 (1)- Project & Portfolio 2.pptxThompson_Taylor_MBBS_PB1_2024-03 (1)- Project & Portfolio 2.pptx
Thompson_Taylor_MBBS_PB1_2024-03 (1)- Project & Portfolio 2.pptxtmthompson1
 
What are the differences between an international company, a global company, ...
What are the differences between an international company, a global company, ...What are the differences between an international company, a global company, ...
What are the differences between an international company, a global company, ...AbhishekSharma823325
 
The Vietnam Believer Newsletter_May 13th, 2024_ENVol. 007.pdf
The Vietnam Believer Newsletter_May 13th, 2024_ENVol. 007.pdfThe Vietnam Believer Newsletter_May 13th, 2024_ENVol. 007.pdf
The Vietnam Believer Newsletter_May 13th, 2024_ENVol. 007.pdfbelieveminhh
 
Presentation on cross cultural negotiations.
Presentation on cross cultural negotiations.Presentation on cross cultural negotiations.
Presentation on cross cultural negotiations.sumayyasubhana321
 
How Bookkeeping helps you in Cost Saving, Tax Saving and Smooth Business Runn...
How Bookkeeping helps you in Cost Saving, Tax Saving and Smooth Business Runn...How Bookkeeping helps you in Cost Saving, Tax Saving and Smooth Business Runn...
How Bookkeeping helps you in Cost Saving, Tax Saving and Smooth Business Runn...YourLegal Accounting
 
Progress Report - UKG Analyst Summit 2024 - A lot to do - Good Progress1-1.pdf
Progress Report - UKG Analyst Summit 2024 - A lot to do - Good Progress1-1.pdfProgress Report - UKG Analyst Summit 2024 - A lot to do - Good Progress1-1.pdf
Progress Report - UKG Analyst Summit 2024 - A lot to do - Good Progress1-1.pdfHolger Mueller
 
SCI9-Q4-MOD8.1.pdfjttstwjwetw55k5wwtwrjw
SCI9-Q4-MOD8.1.pdfjttstwjwetw55k5wwtwrjwSCI9-Q4-MOD8.1.pdfjttstwjwetw55k5wwtwrjw
SCI9-Q4-MOD8.1.pdfjttstwjwetw55k5wwtwrjwadimosmejiaslendon
 
A DAY IN THE LIFE OF A SALESPERSON .pptx
A DAY IN THE LIFE OF A SALESPERSON .pptxA DAY IN THE LIFE OF A SALESPERSON .pptx
A DAY IN THE LIFE OF A SALESPERSON .pptxseemajojo02
 

Recently uploaded (20)

00971508021841 حبوب الإجهاض في دبي | أبوظبي | الشارقة | السطوة |❇ ❈ ((![© ر
00971508021841 حبوب الإجهاض في دبي | أبوظبي | الشارقة | السطوة |❇ ❈ ((![©  ر00971508021841 حبوب الإجهاض في دبي | أبوظبي | الشارقة | السطوة |❇ ❈ ((![©  ر
00971508021841 حبوب الإجهاض في دبي | أبوظبي | الشارقة | السطوة |❇ ❈ ((![© ر
 
HomeRoots Pitch Deck | Investor Insights | April 2024
HomeRoots Pitch Deck | Investor Insights | April 2024HomeRoots Pitch Deck | Investor Insights | April 2024
HomeRoots Pitch Deck | Investor Insights | April 2024
 
Obat Aborsi Depok 0851\7696\3835 Jual Obat Cytotec Di Depok
Obat Aborsi Depok 0851\7696\3835 Jual Obat Cytotec Di DepokObat Aborsi Depok 0851\7696\3835 Jual Obat Cytotec Di Depok
Obat Aborsi Depok 0851\7696\3835 Jual Obat Cytotec Di Depok
 
WAM Corporate Presentation May 2024_w.pdf
WAM Corporate Presentation May 2024_w.pdfWAM Corporate Presentation May 2024_w.pdf
WAM Corporate Presentation May 2024_w.pdf
 
Navigating Tax Season with Confidence Streamlines CPA Firms
Navigating Tax Season with Confidence Streamlines CPA FirmsNavigating Tax Season with Confidence Streamlines CPA Firms
Navigating Tax Season with Confidence Streamlines CPA Firms
 
Understanding Financial Accounting 3rd Canadian Edition by Christopher D. Bur...
Understanding Financial Accounting 3rd Canadian Edition by Christopher D. Bur...Understanding Financial Accounting 3rd Canadian Edition by Christopher D. Bur...
Understanding Financial Accounting 3rd Canadian Edition by Christopher D. Bur...
 
obat aborsi bandung wa 081336238223 jual obat aborsi cytotec asli di bandung9...
obat aborsi bandung wa 081336238223 jual obat aborsi cytotec asli di bandung9...obat aborsi bandung wa 081336238223 jual obat aborsi cytotec asli di bandung9...
obat aborsi bandung wa 081336238223 jual obat aborsi cytotec asli di bandung9...
 
The Art of Decision-Making: Navigating Complexity and Uncertainty
The Art of Decision-Making: Navigating Complexity and UncertaintyThe Art of Decision-Making: Navigating Complexity and Uncertainty
The Art of Decision-Making: Navigating Complexity and Uncertainty
 
Obat Aborsi Malang 0851\7696\3835 Jual Obat Cytotec Di Malang
Obat Aborsi Malang 0851\7696\3835 Jual Obat Cytotec Di MalangObat Aborsi Malang 0851\7696\3835 Jual Obat Cytotec Di Malang
Obat Aborsi Malang 0851\7696\3835 Jual Obat Cytotec Di Malang
 
Chapter 2 Organization Structure of a Treasury
Chapter 2 Organization Structure of a TreasuryChapter 2 Organization Structure of a Treasury
Chapter 2 Organization Structure of a Treasury
 
Mastering The Art Of 'Closing The Sale'.
Mastering The Art Of 'Closing The Sale'.Mastering The Art Of 'Closing The Sale'.
Mastering The Art Of 'Closing The Sale'.
 
Thompson_Taylor_MBBS_PB1_2024-03 (1)- Project & Portfolio 2.pptx
Thompson_Taylor_MBBS_PB1_2024-03 (1)- Project & Portfolio 2.pptxThompson_Taylor_MBBS_PB1_2024-03 (1)- Project & Portfolio 2.pptx
Thompson_Taylor_MBBS_PB1_2024-03 (1)- Project & Portfolio 2.pptx
 
What are the differences between an international company, a global company, ...
What are the differences between an international company, a global company, ...What are the differences between an international company, a global company, ...
What are the differences between an international company, a global company, ...
 
The Vietnam Believer Newsletter_May 13th, 2024_ENVol. 007.pdf
The Vietnam Believer Newsletter_May 13th, 2024_ENVol. 007.pdfThe Vietnam Believer Newsletter_May 13th, 2024_ENVol. 007.pdf
The Vietnam Believer Newsletter_May 13th, 2024_ENVol. 007.pdf
 
Presentation on cross cultural negotiations.
Presentation on cross cultural negotiations.Presentation on cross cultural negotiations.
Presentation on cross cultural negotiations.
 
How Bookkeeping helps you in Cost Saving, Tax Saving and Smooth Business Runn...
How Bookkeeping helps you in Cost Saving, Tax Saving and Smooth Business Runn...How Bookkeeping helps you in Cost Saving, Tax Saving and Smooth Business Runn...
How Bookkeeping helps you in Cost Saving, Tax Saving and Smooth Business Runn...
 
Home Furnishings Ecommerce Platform Short Pitch 2024
Home Furnishings Ecommerce Platform Short Pitch 2024Home Furnishings Ecommerce Platform Short Pitch 2024
Home Furnishings Ecommerce Platform Short Pitch 2024
 
Progress Report - UKG Analyst Summit 2024 - A lot to do - Good Progress1-1.pdf
Progress Report - UKG Analyst Summit 2024 - A lot to do - Good Progress1-1.pdfProgress Report - UKG Analyst Summit 2024 - A lot to do - Good Progress1-1.pdf
Progress Report - UKG Analyst Summit 2024 - A lot to do - Good Progress1-1.pdf
 
SCI9-Q4-MOD8.1.pdfjttstwjwetw55k5wwtwrjw
SCI9-Q4-MOD8.1.pdfjttstwjwetw55k5wwtwrjwSCI9-Q4-MOD8.1.pdfjttstwjwetw55k5wwtwrjw
SCI9-Q4-MOD8.1.pdfjttstwjwetw55k5wwtwrjw
 
A DAY IN THE LIFE OF A SALESPERSON .pptx
A DAY IN THE LIFE OF A SALESPERSON .pptxA DAY IN THE LIFE OF A SALESPERSON .pptx
A DAY IN THE LIFE OF A SALESPERSON .pptx
 

Michael Kowalski

  • 1. User interface design for web applications Michael Kowalski Kitsite.com
  • 2.
  • 3. What we’re going to cover • What is the difference between designing a webapp and designing a website? • Why is good user interface design important? • What are the characteristics of a great user interface? • What can we learn from interaction design? • What are some specific techniques that I can use to improve my webapp UI? • Where is web UI design heading?
  • 4. Q. How is designing a web application different from designing a website?
  • 5.
  • 8. Information Interaction
  • 9. Web user interface HTML form controls are the primitives of an application user interface
  • 10. Hey, let’s build the webapp right here! • Democratisation of user interface development • Low cost, rapid development • The web is an open distribution channel • Anybody can build a web app!
  • 11.
  • 12.
  • 13.
  • 15. “The limitations and challenges of web interactivity... set interaction design back several years” Alan Cooper
  • 17. Web constraints annoyances
  • 18. Living on the network
  • 19. Living on the network • Connectivity
  • 20. Living on the network • Connectivity • Network latency
  • 21. Living on the network • Connectivity • Network latency • Source code down the wire
  • 22. Living in the browser x
  • 23. Living in the browser x • Security sandbox • Box-model rendering • Limited widget set No access to system menus No rich text editing No drawing • Typographically limited
  • 24. My pet hates • <select multiple>! • Backspace key for navigation! • Form controls are modal! • CSS...
  • 25. But if web UI sucks so badly...
  • 26. But if web UI sucks so badly... how come the web is winning?
  • 27. Why web apps became viable • Cross-platform consistency driven by standards • Asynchrony • Faster networks and computers • “Worse is better”
  • 28. Innovation from the web Hyperlinks Folksonomy navigation Findability addressability bookmarks Embedding Social apps portlets sharing widgets collaboration
  • 29. Q. Why is good user interface design important?
  • 30.
  • 31. The rise of utility computing (S3, etc) and the adoption of good web frameworks has reduced web development costs.
  • 32. The rise of utility computing (S3, etc) and the adoption of good web frameworks has reduced web development costs. • It’s never been cheaper or easier to get an idea to market.
  • 33. The rise of utility computing (S3, etc) and the adoption of good web frameworks has reduced web development costs. • It’s never been cheaper or easier to get an idea to market. • In a more competitive market, emphasis will shift from executing first to executing best.
  • 34. The rise of utility computing (S3, etc) and the adoption of good web frameworks has reduced web development costs. • It’s never been cheaper or easier to get an idea to market. • In a more competitive market, emphasis will shift from executing first to executing best. • The quality of user experience is becoming the significant differentiator.
  • 35. The rise of utility computing (S3, etc) and the adoption of good web frameworks has reduced web development costs. • It’s never been cheaper or easier to get an idea to market. • In a more competitive market, emphasis will shift from executing first to executing best. • The quality of user experience is becoming the significant differentiator. • Also, scaling your app depends on not having to handle support requests (or at least, not linearly).
  • 36. Let’s not reinvent wheels We can take advantage of many years of research in interaction design. Plus we can look at best practice on the web today.
  • 37. Q. What are the characteristics of a good user interface?
  • 41. consistent simple polite responsive
  • 42. consistent simple polite responsive pragmatic
  • 43. consistent simple polite responsive aesthetically pragmatic pleasing
  • 44.
  • 47. You are not the user!
  • 48. Real world process or object
  • 52. The user model Mismatch between the user model and the implementation model is a source of usability problems
  • 53. Users have different levels of expertise Novice Intermediate Expert
  • 54. Users have different levels of expertise Novice Intermediate Expert
  • 55. Users have different levels of expertise Novice Intermediate Expert
  • 57. The rule of 7 • Short term memory holds around 7 distinct things • Fades in 10 - 20 seconds
  • 58. Spolsky’s 3 laws of users People can’t control the mouse
  • 59. Spolsky’s 3 laws of users People can’t read People can’t control the mouse People can’t remember
  • 60. A polite interface assumes the user is busy and has more important things to do than think about how the app works.
  • 61. A polite interface assumes the user is busy and has more important things to do than think about how the app works. • Talks the user’s language • Designed around the user’s conceptual model • Focused on achieving user goals • Is tolerant and forgiving
  • 63. Metaphor A shopping basket • Add to the basket • View the basket • Go to the check out
  • 64. Metaphor can be a useful way of gluing together the user model and the implementation model • Metaphor gives developers a language to discuss the model • Warning: metaphors can get you in trouble if you follow them too literally
  • 67. Affordance is... “the perceived and actual properties of the thing... that determine just how the thing could possibly be used” Don Norman, The Design of Everyday Things
  • 68. A tale of two buttons Save Save
  • 69. A tale of two buttons Save Save
  • 70. A tale of two buttons Save Save
  • 71. A tale of two buttons Save Save
  • 72. A tale of two buttons Save Save
  • 73. A tale of two buttons Save Save
  • 74. A tale of two buttons Save Save
  • 75. A tale of two buttons Save Save
  • 76. The #1 affordance on the web Home | Help | Your profile
  • 77. The #1 affordance on the web Home | Help | Your profile • This is a learned affordance
  • 79. Fitt’s Law T = a + b log2(D +1) W where T is the average time taken to complete the movement. a and b are empirical constants, and can be determined by fitting a straight line to measured data. D is the distance from the starting point to the centre of the target.
  • 80. Fitt’s Law T = a + b log2(D +1) W
  • 81. Fitt’s Law T = a + b log2(D +1) W Targets that are smaller and/or further away require more time to acquire.
  • 82. Bigger targets are better Browse Search
  • 83. Bigger targets are better Browse Search
  • 84. Bigger targets are better Browse Search
  • 85. Bigger targets are better Browse Search
  • 86. Affordance techniques • Bevelled edges and gradients on buttons • Texture, eg. grippy corners on draggables • label for • Tooltips (via title attribute on a tags) • Cursor hinting
  • 87.
  • 89. Excise is noise in the interface • A “cognitive tax” on the user • Effort that is not directed towards the users’ goals • Frequently exposes the underlying implementation model • Satisfies the needs of the technology rather than the user • Visual clutter is excise • Customisation is usually excise
  • 90.
  • 91. Too much affordance is excise Therefore: • Trade off affordance against excise to prioritise more frequent tasks • Provide extra affordance transiently, eg. on mouseover • Reduce the affordance on less commonly used controls
  • 92. Using links for commands Save Cancel • In a form, hyperlinks have less affordance than buttons, so can be used to reduce excise. • Use a different colour to distinguish command links from navigational links.
  • 93. Progressive disclosure Use progressive disclosure to reduce excise Show more
  • 94. Progressive disclosure Use progressive disclosure to reduce excise Show more less • Disclosure arrows • Hyperlinks to popups or overlays • Dropdowns In a goal-oriented design, not every function has to be accessible from every screen.
  • 95.
  • 97. Modes The same gesture has different meanings depending on what mode the application is in
  • 98. Modes Approve Reject That’s the stupidest thing I ever heard! I agree with every word of your brill... Buy Vi@gra from us!!!
  • 99. Modes Approve Reject That’s the stupidest thing I ever heard! I agree with every word of your brill... Buy Vi@gra from us!!! Modal Choose the command mode first (eg. “Approve” and then select the item to action.
  • 100. Modes Approve Reject That’s the stupidest thing I ever heard! I agree with every word of your brill... Buy Vi@gra from us!!! Modeless Make a selection first, and then choose Modal Choose the command mode first (eg. a command to then to that selection. “Approve” and apply select the item to action.
  • 101. Modes
  • 102. Modes • With a few exceptions, modes are bad
  • 103. Modes • With a few exceptions, modes are bad • The exceptions: graphics and other drawing apps
  • 104. Modes • With a few exceptions, modes are bad • The exceptions: graphics and other drawing apps • Transient modes are less bad
  • 105. Modes • With a few exceptions, modes are bad • The exceptions: graphics and other drawing apps • Transient modes are less bad • If you are using modes, then the current mode should be visible right where the user is looking (eg. by changing the cursor).
  • 106.
  • 108. What is posture? • Defined by Alan Cooper in About Face • Identified 4 different postures for apps • Posture relates to amount of attention that a user will give the application
  • 115. Preattention variables • Hard-wired rules of human perception • Things we see immediately, without conscious thought
  • 116. Visual properties Intensity Shape Colour Symmetry Texture Motion
  • 117. Visual properties Intensity Shape Colour Symmetry Texture Motion
  • 118. Spot the odd one out
  • 119. Spot the odd one out
  • 121. Use grouping and visual properties to: • Prioritise what’s important and most useful • Associate related commands or information • Distinguish between controls that behave differently • Establish consistency
  • 122. Bad Amazon • Buttons are variably sized • Poor alignment and inconsistent guttering • Giftbox icon is excise • Colours used inconsistently
  • 124.
  • 125.
  • 127.
  • 129.
  • 130. I probably won’t notice anything here
  • 132. Communication Action Visual cues Feedback time
  • 133. Communication Action Visual cues Feedback (“feedforward”) time
  • 134. 0.25 After seconds, the user will assume that it hasn’t worked and try again
  • 136. Feedback rules • If an action will take more than 0.1 sec to complete, visually indicate that it has started.
  • 137. Feedback rules • If an action will take more than 0.1 sec to complete, visually indicate that it has started. • Use spinners or progress bars for actions that 1 second. will take more than
  • 138. Feedback rules • If an action will take more than 0.1 sec to complete, visually indicate that it has started. • Use spinners or progress bars for actions that 1 second. will take more than • Document load events should not take more 10 seconds. than
  • 139. Feedback rules • If an action will take more than 0.1 sec to complete, visually indicate that it has started. • Use spinners or progress bars for actions that 1 second. will take more than • Document load events should not take more 10 seconds. than • Acknowledge completion modelessly
  • 140. Feedback rules • If an action will take more than 0.1 sec to complete, visually indicate that it has started. • Use spinners or progress bars for actions that 1 second. will take more than • Document load events should not take more 10 seconds. than • Acknowledge completion modelessly • If completion will take longer than a few seconds, the new status should be displayed non-transiently
  • 141. Now Current state • What’s happening now? • Am I logged in? • Are my friends logged in? • Is there new activity I should know about?
  • 142. Next Visual cues • What’s going to happen next? • What will happen if I click this?
  • 144. Icons Icons can be useful because: • Don’t take up much screen real state • Take advantage of human spatial recall • They have become a familiar idiom • Can add colour and visual interest
  • 146. The trouble with icons • In a modeless interface, most command affordances will be verbs.
  • 147. The trouble with icons • In a modeless interface, most command affordances will be verbs. • Verbs are hard to draw.
  • 148. The trouble with icons • In a modeless interface, most command affordances will be verbs. • Verbs are hard to draw. • Most icons are therefore hard to interpret without a label.
  • 149. The trouble with icons • In a modeless interface, most command affordances will be verbs. • Verbs are hard to draw. • Most icons are therefore hard to interpret without a label. • Icons work best in sovereign posture applications where space is at premium and users have the time to learn the icons.
  • 150. Rules for using icons • Use icons sparingly. • Use icons that convention has made familiar (eg. document icons) • Label your icons, using the app vocabulary. Avoid puns! • Don’t forget your app’s colour scheme and lighting angle.You may need a larger palette of colours for hinting - but still keep it constrained. • Get professionals to design them!
  • 151.
  • 153.
  • 154. Learnability is... • what we usually mean when we say “intuitive.” • Because most web apps have a transient posture, this is particularly important - your app has to be relearnable as well as learnable. • Warning Too much guidance can be excise
  • 155. Concept 12 irectD manipulation
  • 157. Direct manipulation • The user acts directly on a visual representation of an object, and immediately sees the result.
  • 158. Direct manipulation • The user acts directly on a visual representation of an object, and immediately sees the result. • Examples: • Drag and drop • Drag resize • Drawing tools
  • 159. Direct manipulation • The user acts directly on a visual representation of an object, and immediately sees the result. • Examples: • Drag and drop • Drag resize • Drawing tools • Downside: generally poor affordance
  • 160. Evaluating web app UI Divide up into groups of about 4 Pick a web app Evaluate aordance, excise and feedback Look for good and bad points Suggest at least one improvement 15 minutes
  • 161. br/
  • 163. Technique 1 UI first
  • 164. Design the user experience first
  • 165. Design the user experience first • Before user research?
  • 166. Design the user experience first • Before user research? • Before data modelling?
  • 167. Design the user experience first • Before user research? • Before data modelling? • Before technology choices?
  • 168. Design the user experience first • Before user research? • Before data modelling? • Before technology choices? Yes! Avoid getting railroaded by the implementation model
  • 169. User research • Formal user research can be expensive, tricky and inconclusive • Long-tail users might be hard to come by • Informal research with a handful of users can give useful insights • Beta launching can get early feedback from real users • Apple vs Microsoft
  • 171. Sarah Turner Justin Finch “Sooner is better.” “I’m not much of a technology buff, to be Occupation: Head of honest” PR Occupation: Bookseller Wants to get prior approval on new Wants to get info about corporate comms. new releases as painlessly Worries that her staff as possible. Low will not use the new app expectations: thinks the unless it’s really simple. app will be pointlessly Must have controlled complicated. Dislikes hard costs. Sarah can be quite sell from publishers; wants demanding. to make up his own mind.
  • 172. Sarah Turner Justin Finch “Sooner is better.” “I’m not much of a technology buff, to be Occupation: Head of honest” PR Occupation: Bookseller Wants to get prior approval on new Wants to get info about corporate comms. new releases as painlessly Worries that her staff as possible. Low will not use the new app expectations: thinks the unless it’s really simple. app will be pointlessly Must have controlled complicated. Dislikes hard costs. Sarah can be quite sell from publishers; wants demanding. • Not a market segment to make up his own mind. • A representative individual
  • 174. Goal-directed design Task Task Task Goal Task Task
  • 175. Goal-directed design Task Task Task Goal Task Task May not be appropriate in social spaces
  • 176. Goal-directed design • Determine goals • Break down into tasks • Aim for 1 task = 1 screen • Every digression is an obstacle to the user Step 1 Step 2 Step 3 Done
  • 177.
  • 178. “Just start” • Occasional use or transient posture apps need to be optimised for novices over intermediates. • The web is your marketing and distribution channel. “Try-before-buy” means barriers to entry need to be as low as possible. • Zero configuration is the ideal.
  • 179.
  • 180. Technique 4 Paper prototyping
  • 181. Paper prototyping Basic materials
  • 182. Paper prototyping In practice • Use role play • Encourage “think-aloud” • If user testing with real users, don’t cheat: the “Computer” must not speak. Set goals and leave user to it
  • 183. Paper prototyping Advantages • It’s really cheap. Really, really cheap. • You can iterate on the spot • Can be used for brainstorming as well as proof of concept testing • Very flexible, can be adapted to suit skill levels of participants • Good for working out what is essential, and what can be descoped
  • 184. Other prototyping techniques • Presentation software • Quick-and-dirty software mockups
  • 185. Other prototyping techniques • Presentation software • Quick-and-dirty software mockups Beware the implementation model!
  • 186. Technique 5 Grid systems
  • 187. Grid systems • Enforce consistency, exploit spatial memory • All grid measurements defined in terms of an atomic unit (eg. 10 pixels) • Minimise number of different layouts based on the grid • Yahoo! and Google both provide useful starting points
  • 188. Example grid Atom Header width 120 10 pixels Overlay height 320 Overlay width 440 Gutter 10 540 20 180 10
  • 189.
  • 190.
  • 191. Squint tests • Take a snapshot of your interface • Greyscale it in Photoshop • Blur until you can’t make out detailed structure
  • 192. Squint tests • Take a snapshot of your interface • Greyscale it in Photoshop • Blur until you can’t make out detailed structure OR • Just sit back a bit and squint
  • 193.
  • 194.
  • 195.
  • 197. Modularity • Aim for “deep consistency” by reusing design elements throughout your app • Modules range from single control elements (a button) to complex composite widgets. • Include abstract structural elements like a “sidebar box” as well as behaviours • Develop an application lexicon
  • 198. Colour swatches • Add colour late in the design process. • Use a small palette: 2 or 3 base colours. • Use a small number of different tints of the base colours, eg. 100%, 80%, 40% • Greyscale the coloured design to check contrast and intensity.
  • 199. Consistent light source Mac OS9 Mac OS X to top left of screen directly above, slightly forward OK OK
  • 200.
  • 202. Copywriting is interface design • Stick to the metaphor (within reason) • Use the user’s language • Avoid technical jargon • Use consistent terminology: write a thesaurus • Polite messages • Positive actions in checkbox labels • Keep it brief
  • 204. Is that really necessary? Q. If you remove an interface element, will the interface still function? • Prune visual clutter and gratuitous motion • Avoid forcing user to toggle back and forth between mouse and keyboard • Avoid user preferences: modal excise • Monotony as a virtue: only one way to perform any particular action
  • 206. Ajax Performance • Avoid full page reloads • Deferral Fetch additional data after the screen has loaded • Progressive loading Incrementally fetch data as it is requested
  • 207. Ajax Excise • Use transient affordances at the locus of attention • Use disclosure to reveal additional guidance or advanced options only on request
  • 208.
  • 209. Ajax Modes • Provide modeless feedback and state information • Use overlays for modal or auxiliary interactions
  • 211. Using overlays • Overlays have displaced modal dialogs in many webapps
  • 212. Using overlays • Overlays have displaced modal dialogs in many webapps • Overlays became popular because: • They avoid popup blockers • They can be more attractively styled than the default Javascript alert windows, and can load new content • New windows can be weirdly slow to render on some platforms • They avoid accidental dismissal problems.
  • 215. Rules for modal overlays • Don’t use for informational or confirmation messages: these should be modeless • Don’t ask questions to which you already know the answer (eg, where “OK” is the only option) • Use sparingly: don’t cry wolf • Remember overlays are not bookmarkable • Don’t try and emulate the OS
  • 216. Ajax Animation Motion is a preattentive variable.
  • 217. Ajax Animation Motion is a preattentive variable. • Just because you can, doesn’t mean you should!
  • 218. Ajax Animation Motion is a preattentive variable. • Just because you can, doesn’t mean you should! • Animation introduces latency and is distracting
  • 219. Ajax Animation Motion is a preattentive variable. • Just because you can, doesn’t mean you should! • Animation introduces latency and is distracting • Use it when you want to distract the user, ie. shift the user’s locus of attention
  • 220. Ajax Animation Motion is a preattentive variable. • Just because you can, doesn’t mean you should! • Animation introduces latency and is distracting • Use it when you want to distract the user, ie. shift the user’s locus of attention • Good use: changes to screen layout (eg. opening a drawer or palette)
  • 221.
  • 224. Things to remember • Configuration options
  • 225. Things to remember • Configuration options • Paginated lists: remember page number
  • 226. Things to remember • Configuration options • Paginated lists: remember page number • Hierarchical lists: remember open nodes
  • 227. Things to remember • Configuration options • Paginated lists: remember page number • Hierarchical lists: remember open nodes • MRU - Most Recently Used
  • 228. Things to remember • Configuration options • Paginated lists: remember page number • Hierarchical lists: remember open nodes • MRU - Most Recently Used • MFU - Most Frequently Used
  • 229. Things to remember • Configuration options • Paginated lists: remember page number • Hierarchical lists: remember open nodes • MRU - Most Recently Used • MFU - Most Frequently Used Missed opportunity Remember state between sessions
  • 230.
  • 232.
  • 233. MyApp
  • 234. MyApp
  • 235. Adoption Support Discovery Community
  • 236. Software as a service • Web apps are services • Great! An opportunity to break out of feature bloat cycle, as do not need to sell new features with each upgrade • Think about service design
  • 237. Service design • Think about user interaction with app in a broader way than how a session works • Touchpoints • Service blueprint
  • 240. Using design patterns • Consistent internally - but also consistent with usage elsewhere on the web • Identify relevant patterns on other websites • O’Reilly’s Designing Interfaces takes a pattern- based approach • Yahoo! Design Patterns Library
  • 241.
  • 243. Trends
  • 244. Trends • Does fashion matter?
  • 245. Trends • Does fashion matter? • Gradients, big fonts, drop shadows and rounded corners may stick around
  • 246. Trends • Does fashion matter? • Gradients, big fonts, drop shadows and rounded corners may stick around • Overlays, autocomplete, libraries will be ever more popular
  • 247. Trends • Does fashion matter? • Gradients, big fonts, drop shadows and rounded corners may stick around • Overlays, autocomplete, libraries will be ever more popular • Guided interfaces will become the norm
  • 248. Trends • Does fashion matter? • Gradients, big fonts, drop shadows and rounded corners may stick around • Overlays, autocomplete, libraries will be ever more popular • Guided interfaces will become the norm • The web will increasingly drive innovation on the desktop (tags? bookmarks?)
  • 249.
  • 250. Future
  • 252. Future Widgets Offline
  • 253. Future Widgets Offline Charting / vector graphics
  • 254. Future Widgets Offline Charting / vector graphics Mobile
  • 255. Future Game design? Widgets Offline Charting / vector graphics Mobile
  • 256. Future Game design? Widgets Offline Social space Charting / vector graphics Mobile
  • 257. • In the future, most user interface innovation will come from the web
  • 258. end