Presentation by Peter Dillon
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.
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
Demographics
Kowing how user thinks builds empathy
Which leads to insights and design opportunities
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
Prototyping is the pivotal activity in structured innovation, collaboration and creativity in design.
Prototypes embody design hypotheses and enable designers to get feedback.
By trying things out and learning — you are able to improve your design, and gain insights you may not have otherwise had.
Prototyping is a strategy for efficiently dealing with things that are hard to predict.
Prevents Functional fixation
Balsamiq helps to generate ideas quickly; review and iterate sooner.
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.
They are everywhere
Where is an icon appropriate - and text more useful?
Right mental model, but accidentally do the wrong thing
Reaching for one button, but press another
Could be correctd by improving ergonomics
Fitt's Law
Shorten distance, make targets bigger.
Do what I intend to do,
but got unexpected results
Simplify by focusing on the essential, yet revealing additional detail as needed
Very popular today
Includes no user research
Focuses on activity to be completed
Focuses primarily on use cases
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
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
User testing labs are very expensive
But there are less expensive alternatives
silverbackapp.com records screen and users face
Benefits:
Reduces risks
Identify opportunities for improvements
Set (and reset) priorities
Improve probability of success
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
Short lesson on basic typeface knowledge
Vast array of web font choices
typecast - fontdeck - fonts.com - typekit - webtype
My favorite because it's free: Google web fonts
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;
}
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.
@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>
$aspect-primary: #8fd400;
$aspect-secondary: #00adef;
$aspect-tertiary: #838281;
nav {
display: block;
ul { list-style-type: none; }
li {
float: left;
a {
color: $aspect-primary;
&:hover { color: $aspect-secondary; }
&:visited { color: $aspect-tertiary; }
}
}
}
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;
}
.standard-modal, %standard-modal {
border: 1px solid #666;
background: white;
}
.alert-negative {
@extend %standard-modal;
background: red;
}
.alert-positive {
@extend %standard-modal;
background: blue;
}
.standard-modal, .alert-negative, .alert-positive {
border: 1px solid #666;
background: white;
}
.alert-negative {
background: red;
}
.alert-positive {
background: blue;
}
...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:
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
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)
Fallbacks = CSS
Polyfills = JS
Enjoy the conference!
Presentation by Peter Dillon