User Interface Design

And the modern workflow

Presentation by Peter Dillon

Mike Monteiro - Design Is A Job

Communicate better, design better.


If you walk out of a meeting and say they just don't get it. You may as well be saying: I couldn't figure out how to get my point across, I'm a lazy designer, please take all my clients.

Requirements gathering - needfinding

Participant (user) observation - helps build empathy

Structured interviews

Discovery - Competitive, comparitive analysis

Livescribe - Interactive pen and paper

You can observe a lot,
just by watching.

The future ain't what it used to be.

Yogi Berra

Personas

Demographics

Kowing how user thinks builds empathy

Which leads to insights and design opportunities

Storyboarding

Inexpensive and fast - white board and marker

No drawing skills needed - just use star people

Gives stakeholders a chance to agree on use cases

Helps determine the users context

story

Prototyping 1

Prototyping is the pivotal activity in structured innovation, collaboration and creativity in design.

Prototyping 2

Prototypes embody design hypotheses and enable designers to get feedback.

Prototyping 3

By trying things out and learning — you are able to improve your design, and gain insights you may not have otherwise had.

Prototyping 4

Prototyping is a strategy for efficiently dealing with things that are hard to predict.

Prevents Functional fixation

Rapid Prototyping

  • Very inexpensive
  • Fast and easy to create and edit
  • Abstract, requires some imagination and patience
balsamiq

More Rapid Prototyping

Balsamiq helps to generate ideas quickly; review and iterate sooner.

  • Lo-fidelity prototypes for quick turnaround time
  • Drag n' drop interface - for any level of computer user
  • Sketch-like appearance allows you to focus on the functionality and not distracting graphics

High Fidelity Prototyping

  • Traditionally photoshop
  • Design in the browser
  • Devices variety and responsive design doesn't allow for static screen sizes anymore

Consider the users mental model

What makes an interface learnable?

What leads to errors?

How does a user think this works?

Make the lexicon of the application consistent.

No geek speak. No new words or abstract acronyms.

Iconography

They are everywhere

Where is an icon appropriate - and text more useful?

Icons

Slips vs Mistakes

Right mental model, but accidentally do the wrong thing

Slip

Reaching for one button, but press another

Could be correctd by improving ergonomics

Fitt's Law
Shorten distance, make targets bigger.

Mistake

Do what I intend to do,
but got unexpected results

Avoid Mistakes

  1. Provide better feedback
  2. Make options clearer
  3. Field-hint or auto format
  4. Interface discloses how to use it

Progressive Disclosure

Simplify by focusing on the essential, yet revealing additional detail as needed


  1. Reveal only what is needed to accomplish task
  2. Vertical sliding tabs, stepped navigation are common patterns
  3. Showing follow-up steps only after prerequisites are done

Other Design Patterns and Techniques

  • Meaningful animations
  • Offscreen hinting
  • Sliding panels

Activity Centered Design

Very popular today

Includes no user research

Focuses on activity to be completed

Focuses primarily on use cases

Encourage users to explore

Provide a low-risk environment where it is easy for a user to recover from mistakes

Make sure it is obvious to the user how to undo, redo or escape from destructive actions

If actions are not un-doable make sure that is clear as well

User observation

Can people figure out how to use it

Take note of physical reactions (swearing, giggling)

A-B testing if it's available

Observe how changing the interface changes behavior

Data analytics and metrics

User testing labs are very expensive

But there are less expensive alternatives

silverbackapp.com records screen and users face

Test during development

Benefits:

Reduces risks

Identify opportunities for improvements

Set (and reset) priorities

Improve probability of success

Documentation

Note taking throughout the dev process

No comments in html

Use CSS pre-processors to comment

Preprocessors automatically remove and minifies!

Style guides with code snippets and css selectors

Accessibility

  • Screen readers
  • Html5 elements are designed for accessibility
  • ARIA Roles - Accessible Rich Internet Applications

Typefaces and fonts

Short lesson on basic typeface knowledge

  • Point size, pixel size
  • Leading
  • Kearning
  • X-Height
  • Asenders
  • Descenders

More about fonts

Vast array of web font choices

typecast - fontdeck - fonts.com - typekit - webtype

 

My favorite because it's free: Google web fonts

Sprites helped a lot

To reduce http requests, we'd have to piece together image files with every icon in our system, measure their x and y position, and handcraft the css to display it.


my-icon {
background-position: url('images/my-sprite.png') -10px -10px no-repeat;
}
					

Youtube - Yahoo

Icons Icons

Future Proof for Retina Screens

Now that icon fonts are stylish, wide browser support and an endless amounts of font icon packs to choose from, (or make ourselves) we can simply use Icomoon to create a font file with ONLY the icons we need.

Icons

Small amount of css!


@font-face {
	font-family: "aspect-icon-set";
	src:url('/fonts/aspect-icon-set.eot');
}
[class^="icon-"]:before, [class*=" icon-"]:before {
	font-family: 'aspect-icon-set';
	font-style: normal;
}
.icon-mail:before {
	content: "\22";
}
					

Though, we do have to serve 4 font types to cover all browsers


@font-face {
  font-family: "nexa_lightregular";
  src: url('aspect-icon-set.eot'); 
  src: url('aspect-icon-set.eot?#iefix') format('embedded-opentype'),
       url('aspect-icon-set.svg#nexa_lightregular') format('svg'),
       url('aspect-icon-set.woff') format('woff'), 
       url('aspect-icon-set.ttf') format('truetype');
       font-style: normal;
}
					

And you do need to make sure the server delivers the files correctly...


< staticContent>
  < remove fileExtension=".eot" />
  < mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />
  < remove fileExtension="=.otf"/>
  < mimeMap fileExtension=".otf" mimeType="font/otf" />
  < mimeMap fileExtension=".woff" mimeType="application/font-woff" /> 
  < mimeMap fileExtension=".svg" mimeType="images/svg+xml" />
  < mimeMap fileExtension=".svgz" mimeType="images/svg+xml" />
< /staticContent>
					

Icomoon FTW!

  1. Easily manage file size
  2. Update icon choices, download, then update project
  3. Easily add custom icons - boom!

SASS

A CSS pre-processing language

  1. Variables
  2. Mixins
  3. Nesting
  4. Selector inheritance
  5. @import to modularize your css

SASS - Variables


$aspect-primary: #8fd400;
$aspect-secondary: #00adef;
$aspect-tertiary: #838281;
						

SASS - Nesting


nav {
  display: block;
  ul { list-style-type: none; }
	  li {
	    float: left;
	      a { 
	    	color: $aspect-primary;
	    	&:hover { color: $aspect-secondary; }
	    	&:visited { color: $aspect-tertiary; }
	        }
	  }
}					

SASS - Output


nav {
  display: block;
}
nav ul {
  list-style-type: none;
}
nav li {
  float: left;
}
nav li a {
  color: #8fd400;
}
nav li a:hover {
  color: #00adef;
}
nav li a:visited {
  color: #838281;
}
						

SASS - Inheritance with %Placeholder


.standard-modal, %standard-modal {
  border: 1px solid #666;
  background: white;
}
.alert-negative {
  @extend %standard-modal;
  background: red;
}
.alert-positive {
  @extend %standard-modal;
  background: blue;
}
						

SASS - Inheritance Output


.standard-modal, .alert-negative, .alert-positive {
  border: 1px solid #666;
  background: white;
}

.alert-negative {
  background: red;
}

.alert-positive {
  background: blue;
}
						

Compass

No, not that compass!

...is a Ruby based meta-framework that compiles SASS into plain old CSS. Compass comes with a ton of mixins, spiriting ability, and reusable utilities like css-reset, link styling, and css3 vendor-prefix support:


@include border-radius(5px);


-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
						

jQuery

Normalizes javascript across all the dominant browsers. Previously we'd have to write two sets of js for every application (up to and including IE8)

Progressive Enhancement with

Fallbacks = CSS

Polyfills = JS

thank you!

Enjoy the conference!

Presentation by Peter Dillon