Monday, May 26, 2014

2013 VS Live Keynote

I went back and watched Billy Hollis' VS Live 2013 keynote, it's more about technology in general and not just UI Design, but it's still a good listen, here are my notes:


First thing to learn about a new technology is how to make your users more productive.
Don't uncritically accept anything you're told

Many thought leaders seem out of touch
  • Lack of focus on users and businesses
  • Hyperfocus on code and process
  • Contempt for GrD developers
  • False dichotomy

Be skeptical of gurus
Be really skeptical of one-size-fits-all answers
Be flexible instead of dogmatic
Decide if things work for your business and your users
Use what works for you, but be open to change
Cloud, better UX
Kick your addiction
Embrace diversity


Survival in a rapidly changing ecosystem depends on diversity
  • More diverse teams
  • More diverse technologies
  • Experimental design to produce diverse solutions to problems

Hire people on your team that think differently than you do

This one is the kicker
The cloud is going to change our world as much as the PC changed the mainframe world

UI Design Resources

Graphic design theory
Layout
Typography
Psychology & Cognitive Science
User experience

Friday, May 23, 2014

Here's the quick run-down on Billy Hollis' design course

Billy Hollis' course

 Proliferation of devices with new interfaces, i.e. touch, gesture, voice are changing the expectations of users and we need to adapt to meet those expectations.  Do more, our job is now to make the users job easier.

Learn from real-world examples, both good and bad, this will help with awareness of archetypes that users are familiar with (raised buttons, round buttons, etc).  Gestalt, Fitts Law, Pareto Principle, and Hicks Law.

Exercise your right brain, practice doing design, all you need is pen and paper.  Learning to draw and learning to play music help with this as well.

Keep aware of the limitations and functioning of the human visual system, limited high resolution area and the pre-processing done by our brains on what we see.  Whitespace is critically important, don't crowd the users visual input, the old saying that screen real estate is valuable no longer applies.   This is driven by our evolution and where our species "grew up", on the savannah, and it affects both this functionality and our sense of aesthetics.  Wide open, green field landscapes with water somewhere in the background is almost universally found to be beautiful.  A beautiful design will be considered more usable by the the user, and they will be more willing to forgive a beautiful app than an ugly one.

Don't misuse your tools: Color gradients, animations, fading, these should all be unnoticed by the user, meaning if you use them correctly the user will prefer your design to one that is monotone, and doesn't move naturally, but really won't be able to say why.

Help to reduce the cognitive load placed on the user, don't make them think any more than absolutely necessary.  Keep number of choices to a minimum, make use of progressive disclosure, mapping, design affordances and entry points to help the user use the software.  Also remember that simplicity is a goal, so choose the simplest correct design.

Users vastly outnumber developers, it's worth a lot of effort to save the users even a little bit of time.  However, the user is not always right.  Sometimes what an application needs to be most effective for the business does not match up with what the users like.  Do your best to take their wishes into account as long as that doesn't compromise other success factors. Vocal users will push for more features.  Be careful suggesting features to users, if you suggest it, someone will want it, even if it's not good design.  Simply adding features to please various people risks bad design.  Every feature has a cost, and no design is ever perfect, your goal is to be good enough.

These are guidelines.  Context can change what is important, don't be dogmatic in applying the design principles.  Form follows function - good design will match the users need and tends to have an elegant feel.  When re-desiging apply the MAYA principle, most advanced yet acceptale design.  Trimming around the edges never works out well, if you don't get a certain level of change, and finding the proper level is difficult, then inertia from the old design may cause issues with adoption.


Remember that during periods of transition (which we are definitely in now, and we may never leave again) you have to make the effort to push into new territory or the shelf life of your design may well be too short.


For a more in depth look at the course see these blog posts:

http://programmingonslaught.blogspot.com/2014/05/notes-from-creating-user-experiences.html
http://programmingonslaught.blogspot.com/2014/05/creating-user-experiences-fundamental.html
http://programmingonslaught.blogspot.com/2014/05/creating-user-experiences-fundamental_15.html
http://programmingonslaught.blogspot.com/2014/05/creating-user-experiences-fundamental_16.html
http://programmingonslaught.blogspot.com/2014/05/creating-user-experiences-fundamental_17.html
http://programmingonslaught.blogspot.com/2014/05/creating-user-experiences-fundamental_19.html
http://programmingonslaught.blogspot.com/2014/05/creating-user-experiences-fundamental_20.html

Overall, this is a great introductory video for developers who are looking into improving their knowledge of design.  Applying the Pareto principle, this will probably make you better than 80% (maybe even 90%) of the other developers out there at design.

Next up I'm going to be reviewing the videos and books Billy kindly provides as resources on his web site and in the video.

Thanks Billy, and I look forward to hopefully seeing more from you on UI Design

Tuesday, May 20, 2014

Creating User Experiences: Fundamental Design Principles by Billy Hollis part 7


One possible reason for resistance to a new design is that it's not advanced enough - MAYA - most advanced yet acceptable.

Performance vs preference
What an application needs to be most effective for the business is not identical to what the users like
The user is not always right.
Do your best to take their wishes into account as long as that doesn't compromise other success factors

Reasons the user might be wrong
Learning the existing system is a sunk cost for them
A hard-to-use system might be a barrier to entry for new users, which benefits existing users
They might focus too much on aesthetics, might prefer a pretty system over an effective one
They might have to change the way they do their jobs, and they may not like that
Many people just have a general discomfort with change

Flexibility / Usability tradeoff
Adding flexibility generally reduces usability
Finding the right balance has challenges

Every business application has a core functionality set required for the business to operate
A system that satisfies design principles but doesn't offer this core set is a bad design

Vocal users will usually push for more features
If you suggest a feature to a group of users, somebody will want it, and sometimes they get downright indignant if the feature isn't included in the developed application
Simply adding features to please various people risks bad design
Dramatically new designs make some old features unnecessary, and those features should be ruthlessly pruned


Every feature has cost
Consider both costs and benefits for any feature outside the core set
Development, testing, maintenance time, hidden costs from 80/20 rule, Hick's Law, etc.
get to "good enough"
No design is perfect, you'll never please everyone

Summary
Design principles are guidelines, not rules
Separate design principles often have tradeoffs, always be cognizant of costs and benefits
Trimming around the edges rarely yields successful design;  You must push into new territory to be successful in most cases
The goal is to get something good, but not something perfect

Monday, May 19, 2014

Creating User Experiences: Fundamental Design Principles by Billy Hollis part 6

Progressive disclosure - techniques are available now that you should be able to show the user the data they need to see when they need to see it (i.e. tooltips are no longer limited to text, we can make them look how we want them to look).

Highlighting - lots of techniques, non-traditional include offsetting, spotlighting

Mapping - should be so obvious what an element does that any other interpretation does not occur to the user
Physical location mapping to some kind of virtual location.  Leverage conceptions of the real world

Design affordances - scissors, the thumb location is smaller than the finger one.  In software, drag handles in the bottom right corner.

Entry points - get the user moving in the right direction at the beginning of an interaction.  i.e. click here to begin on an empty from, arrows pointing to where they should be interacting, etc.

Constraint - prevent the user from doing something that is inappropriate or impossible at that time.
One of the most frustrating flaws is denying the user an action they should be able to perform (i.e. not enabling things appropriately).  A good example is a slider, which sets a max and minimum, and could set increments.

Feedback
Warnings and errors
Progress
Changes in status
Position the element giving feedback close to the item it is giving feedback on
Confirmation - asking too much dilutes the value of it.  Reserve it for exceptional circumstances

Forgiveness (undo) - holding area for irreversible operations




Meta-Design

Taking context and circumstances into account
Balancing design factors against one another

Design principles are guidelines



This trash can design on the left is from Juno, AK, where there are bears nearby.  It would be bad design for New York city (as it would require one to use one hand to open it (putting down your briefcase in order to open it and throw away your coffee cup), as opposed to an open design that you just toss things into it, but is perfectly acceptable in Juno because no one wants to attract bears.

Good design vs bad design depends on context.

Don't be dogmatic in applying design principles - there is no one true way.
New conditions have made certain design principles more relevant - i.e. touch interfaces.
Gesture lexicon
Element size
"Gorilla arm"  - don't want the interface to be vertical if the user is going to be using them for very long
Form follows function
A hallmark of a design that matches the user needs is that it tends to have an elegant feel
This is an emergent property of good design, not an initial goal
If you start with elegance as your goal, it's easy to over-invest in cosmetics, and the elegance of "form follows function" is not about cosmetics

Application of Occam's Razor - choose the simplest design

Most Advanced Yet Acceptable
To make a difference with design, you need to push into new territory
Sometimes that means radically new and different designs, especially if the older designs were either bad to begin with or are now obsolete
The limiting factor is often what users can accept
If you get too advanced, users can become uncomfortable and wary

During periods of transition designs need to push into new territory, or shelf life may be too short.
If you don't get a certain level of change, inertia may become an issue due to familiarity with the old design.

Saturday, May 17, 2014

Creating User Experiences: Fundamental Design Principles (Aesthetics) by Billy Hollis part 5

Naturalness  part 2

Contour Bias - people prefer flowing, curved structures instead of straight line and angle structures
Curved surfaces connote safety, angled or hard edges, danger

Animation - misused more often than not.  Used to draw attention to things, which is usually irritating.  Like gradients, animations should be unobtrusive and work in harmony with what the brain and visual system expects.

Fade things in and out instead of having them blink in or out.  Indicators should fade in and out as well (4/10ths of a second to fade is a good starting time)

Animations can help maintain context i.e. having something shrink and fade to the background instead of having it blink there.
  
Users prefer a 3D experience as opposed to a flat one - the real world is 3D.  Shapes, shadows, layering, reflections, perspective, texture gradients, atmospheric perspective.

Aesthetics and Usability

A beautiful design is considered more usable.  Users will give a "beautiful" app more chances than an "ugly" one.

Don't spend much time on typefaces for business apps, almost all modern default fonts are fine.

Keep number of sizes used to 3 or 4 (what about different font faces?)

Legibility is affected by size, contrast, and spacing


Allow users to change the font size and have your application adapt

Friday, May 16, 2014

Creating User Experiences: Fundamental Design Principles by Billy Hollis part 4

White space reduces cognitive load
White space is the preferred method for grouping

Preserve your white space
Semantic Zoom - RTS games have been doing this type of thing for a while



Fear of empty spaces - "Screen real estate is valuable" fallacy
Non-traditional navigation patterns - http://billyhollis.com/
Check out the Design Resources Corner

"Universal Principles of Design" - William Lidwell et.al.
"A Whole New Mind" - Daniel Pink


Design Resources
UI Patterns site on Yahoo (oriented around HTML UI instead of XAML. but still a good resource)
Quince UI Patterns site (sponsored by Infragistics)

In nature there is almost no monochrome, a lot due to lighting effects.  Lighter part of gradient on top (light comes from overhead) - top down lighting bias.  Can use a dark on top for contrast.

Think of how creepy a face looks when telling ghost stories around a campfire when lit from below.
Gradients should not be noticed.

People may have a difficult time verbalizing why they like something based on the natural principles, usually because they like them due to unconscious reasons.


Because of our evolutionary history, people unconsciously prefer natural things in many contexts
lushness, open spaces, and gradient lighting

There are exceptions where other design principles override the preference for naturalness 

http://visualstudiomagazine.com/blogs/vs-live-video/2013/12/billy-hollis-keynote.aspx

Thursday, May 15, 2014

Creating User Experiences: Fundamental Design Principles by Billy Hollis part 3


Gestalt: Common fate
Items that move together are grouped
The most common use in software dragging and dropping a set of items

Gestalt: Figure / ground
Your visual system unconsciously chooses what part of the field of vision to consider the foreground, or figure.
This part of the field of vision gets the attention and focus
The rest is considered the background, or ground, and unconsciously given lesser importance
The ground can also be used for grouping
Elements with a common ground are considered grouped

YesNo


Ketchup


Mustard


Pickles


Lettuce


Tomato


Onion

Gutenberg Diagram

The visual system sweeps from top left to bottom right for people who read left to right, top to bottom, for RTL readers the sweep is from top right to bottom left.
Notice where the most important information is contained on the screen in the application



Human desire for natural things creates another family of design principles - resulting from many generations living on the savannah/grasslands.

Biophilia
Savannah principle
Whitespace
Natural gradient preference
Top-down lighting bias
Horror vacui
Contour bias
Unobtrusive animation

The general theme is that imitating natural things in a user interface results in a subconscious preference by users and can lower stress

*is the preference for whitespace, or is this more influenced by the application of Hicks Law (more choices = bad).  How does a screen with only a few things on it, but close together, feel vs a screen with only a few things that are separated by white space.  Probably some of both, even a screen with white space on it but too many things feels "busy". Nmkl;

Creating User Experiences: Fundamental Design Principles by Billy Hollis cont'd

Notes from Billy Hollis' course

Human visual system is optimized to see structure and relationships, leading to the gestalt principles
Proximity
Similarity
Common fate
Continuity and Closure (filling gaps)
Figure / ground

Stages of human visual processing
Stage One: processing inside the retina
small area of high res and color - where the person is focusing
Tuning to detect edges. 
Peripheral vision is tuned to detect movement.

Stage Two: "Preattentive" processing
Information from retina assembled into shapes and groups

Stage Three: "Attentive" processing
Stores of experience used to interpret the output of state two
 
Gestalt principles come from stage two
predisposition to interpret edges, shapes, and groups in certain ways - unconscious
Conscious interpretation can override the perceptions from stage two, but it takes cognitive work  - users don't like doing it.

"Don't Make Me Think" by Steve Krug

Most users will see this as 2 mutually exclusive columns of options, i.e. they think they can only pick one option from column 1, and one option from column 2.  Proximity is causing this, so be careful with it.

YesNo


Ketchup


Mustard


Pickles


Lettuce


Tomato


Onion
 

Objects that are similar override the proximity principle (to a degree), such that most people will see 4 rows of stars, not 5 columns:
http://pluralsight.com/training/courses/TableOfContents?courseName=cux-designprinciples&highlight=billy-hollis_cux-designprinciples-module-08*5!billy-hollis_cux-designprinciples-module-04!billy-hollis_cux-designprinciples-module-00!billy-hollis_cux-designprinciples-module-01!billy-hollis_cux-designprinciples-module-02!billy-hollis_cux-designprinciples-module-03!billy-hollis_cux-designprinciples-module-06!billy-hollis_cux-designprinciples-module-07!billy-hollis_cux-designprinciples-module-05#cux-designprinciples-module-08


http://pluralsight.com/training/courses/TableOfContents?courseName=cux-designprinciples&highlight=billy-hollis_cux-designprinciples-module-08*5!billy-hollis_cux-designprinciples-module-04!billy-hollis_cux-designprinciples-module-00!billy-hollis_cux-designprinciples-module-01!billy-hollis_cux-designprinciples-module-02!billy-hollis_cux-designprinciples-module-03!billy-hollis_cux-designprinciples-module-06!billy-hollis_cux-designprinciples-module-07!billy-hollis_cux-designprinciples-module-05#cux-designprinciples-module-08

 Color, Shape,  or Size can accomplish this overriding of proximity (size is least effective)
This can also be used for highlighting
 
Need to make sure the task the user is focused on is promoted by your software, or inattentional blindness may cause them to miss the thing you expect them to see.

Tuesday, May 13, 2014

Notes from "Creating User Experiences: Fundamental Design Principles by Billy Hollis

Here are my notes so far from watching Billy Hollis' course, I'll add some comments and take-away's when I get home.

Proliferation of devices
Touch computing
Ubiquitous connectivity
Cloud storage

For the history of software, it's been good
enough to make things possible. Now
success also depends on making things
easy.

Why not just stay in the ruts?
It's hard to get out - really hard
It requires investment of time and money
For some systems, it's not worth it
It gets us out of our comfort zone

The payoff can be huge
Higher productivity
Lower training
Fewer errors
More satisfied users

Applied imagination is creativity.
Creativity is working on solutions
to real-world problems.

Applied creativity is innovation.
Innovation is producing the
tangible real-world results that
apply a creative design or solution.

Our ecosystem has changed, new touch based devices like the Ipad, Kindle, Android tables, and touch based phones have changed the expectations of users.  The Kinect and vision/gesture based systems are going to change it even more.

http://bit.ly/StaffLynxDemo

Inattentional blindness
High resolution area of visual field is very small, about the size of the moon. 
How the human brain works, and what designers need to do for the results to work in harmony with the way people really see, think, and work.

Warning messages close to this source, blinking is annoying (maybe limit the number of blinks?)

Every time an option is added to a list it decreases the value of every other option in the list
Actively look for ways to expose functionally to the user that makes them the most productive

Fundamental Principles of Designing Things
Here are my take-away's so far:

  1. Developers should be doing more than making things possible, we should be striving to make the user's job easier.
  2. Users are no longer satisfied with the "grey battleship" design of business apps.  The prevalence of devices such as the IPad, IPhone, Android Tablets, Windows Surface and touch enabled phones has made them expect more responsive and user friendly designs
  3. Learn from real-world designs,  both good and bad.  
    1. Keep aware of archetypes that users are familiar with (buttons, signage, etc.).  Keep aware of recent developments, i.e. square button familiarity due to recent usage in applications.
    2. Gestalt - principle of proximity
    3. Fitts Law -  the time required to rapidly move to a target area is a function of the distance to the target and the size of the target.
    4. Pareto Principle (80/20) rule
    5. Hicks Law -  increasing the number of choices will increase the decision time logarithmically.
    6. Consistency, Symmetry, Alignment.
  4. There are a couple of canonical books to read:
    1. Universal Principles of Design by William Lidwell, Kritina Holden, and Jill Butler
    2. Out of Our Minds: Learning to be Creative by Ken Robinson
  5. We need to "exercise"  our right brains (developers mostly exercise the "left" brain - the logical, mathematical part) to develop 
  6. Users outnumber developers - it's worth a lot of effort to save the users even a little bit of time.
More to come as I finish the course.

Monday, May 12, 2014

Mastering posts

I''m going to try posting about mastering different areas in programming.  I'm going to start with one of my weakest areas, UI design.  I will tag these posts with mastering.  Hopefully I will help people other than just myself, but if it's just me that's ok too.  Putting your thoughts down on paper is always helpful.