UID Course

UID Course

1. User interface

   • "System which human uses to operate the computer"
   • Modalities
     • Use of senses
       • Visual
       • Auditive
       • Haptic
       • Gustatory
       • Olfaction
       • Rare
         • Nociception
         • Thermoception
         • Equilibrioception
     • When used right, can improve user experience
       • Satisfaction
       • Naturalness
       • Pleasantness
       • Freedom of expression
       • Effectiveness
       • Less errors during use
     • If used too much, users' senses might get overloaded
   • Interaction types
     • Instructing
     • Conversing
     • Manipulating
     • Exploring
   • Colours
     • Representations
       • HSV
       • RGB
       • HLS
     • Meaning of colours change in different cultures
     • 10 Commandments
       • Maximum of 5+/2 colours
       • Use centre and peripheral colours approprately
       • Use colors that won't change much when the size of the picture changes
       • Do not use spectrally extreme colours simultaneously
       • Use familiar, consistent colour codings with appropriate references
       • Use the same colour for grouping related elements
       • Use colours consistently
       • Use high value, high saturation colours to draw attention
       • Use redundant colour coding
       • Use colour to enhance black-and-white presentation
     • Blue colour
       • Well-suited for large backgrounds
       • Is hard to see edges of
       • Not for narrow edges or text
       • Colours only varying in the amount of blue have fuzzy edges
   • Text
     • Typeface
       • Use sans serif fonts on displays
     • Type size
       • Too big and too small text is hard to read
     • Letter spacing
       • Letters spaced too far apart and too close together are difficult to read
     • Line spacing
       • Increasing line spacing can help legibility
       • If too big, text might be tought as indivudal pieces
     • Line length
       • Avoid too short lines
       • Max. line length should be around 60 characters
     • Justification
       • Justify on the left, but not necessarily on the right
     • Line endings
       • Try to coincide with grammatical boundaries
   • Modes
     • States of system
     • Helps to avoid clutter
     • Can prevent errors
     • Can cause errors if not presented clearly
     • Might be a necessity on small screens
     • Current mode must be clearly stated
   • Icon
     • A small image to represent feature of the system
     • Has 3 parts
       • Background
       • Theme figure
       • Attribute figure
     • Based on recognizable symbols or objects
       • Doesn't need to be a perfect copy
       • Too few or too many cues cause misinterpretations
     • Context is important
       • Culture specific
     • Related text might help understanding
     • " "
   • Culture
     • Internationalisation
       • Design interface to be culture neutral
       • Use resource files
       • Allow space for longer words in other languages
     • Localisation
       • Making changes to fit to the target culture
   • Touch screens
     • Pros
       • Direct
       • Fast
       • Usable with finger or pen
     • Cons
       • Low precision
       • Fatigue
       • User has to be near screen
       • Screen coverage
       • Dirt
     • Guidelines
       • Provide virtual keypads
       • Provide clear navigation
       • Use familiar icons
       • Make elements easily clickable
       • Position and space items systematically
       • Provide meaningful feedback and guide
       • Maintain consistency and provide clear indications

2. Prototypes

   • Lo-Fi prototype
     • Paper prototype
       • Cheap
       • Easy to edit
       • Gives good information about usability
       • Can't exactly replicate the final product
       • Everyone can make one
       • Requires an assistant to change the views
     • Good for early testing
   • Hi-Fi prototype
     • Good for finalising the UI
     • Electronic, interactive representation of the system
     • Requires more knowledge to build one than a Lo-Fi prototype
     • Might not be as easy to edit as a Lo-Fi prototype
     • Tools
       • Qt
         • Was chosen in the group assignment
       • HTML
       • Balsamiq
       • InVision
       • Many more
   • Are good to use during all stages of developement
     • Testing should be done with the end-user
     • Use planned test cases

3. Principles of visual design

   • Simplicity
     • Approachability
     • Recognizability
     • Immediacy
     • Usability
   • Clarity
     • Gestalt principles
       • Proximity
       • Similarity
       • Closure
       • Continuity
       • Figure-ground relationship
   • Consistency
     • Internal
       • Colours
       • Layout
       • Indicators and cues
       • Terminology
       • Action and expression
       • Generic commands
       • Style guides can be used
     • External
       • More difficult to achieve than internal consistency
       • The UI is consistent with
         • Other similar UIs
         • The surrounding world
         • Other software
   • Pleasant appearance
     • Composition and layout
       • Canonical layout
       • Many others
     • Do not show too many elements at the same time
     • Use of empty space
     • Ratios more important than the use of space
     • Avoid disturbing backgrounds

4. Overall product

   • Context of use
     • States
       • How the system is used
       • Where the system is used
       • When the system is used
     • Physical context
       • Spatial location, functional space and place
     • Temporal context
       • Duration
       • Time of day, week, year
       • Before, during, after
     • Task context
       • Multitasking
       • Interruptions
       • Task domain
     • Social context
       • Persons presesnt
       • Interpersonal interaction
       • Culture
   • Value Proposition
     • Relevancy
       • How improves customers' situation
       • How solves customers' problems
     • Quantified value
       • Specific benefits
     • Unique differentation
       • Why should be bought
       • Why not the competitor
   • Mood board
     • Doesn't directly reprsesnt how the final product works
     • Shows
       • Colour palette
       • Fonts
       • Icons
       • Design patterns
       • Overall structure
       • Targeted impressions

Images and files in the map