An Event Apart, User Experience
November 2nd, 2010 by Matt Haff
Jeremy Keith, author, DOM Scripting
Interaction is the secret sauce of the web. Understanding interaction is key to understanding the web as its own medium—it’s not print, it’s not television, and it’s certainly not the desktop. Find out how to wield HTML, CSS, and JavaScript to craft experiences that are native to the web.
Interactivity in the real world…
If you’re using text (language) then it will only work if the people using that can understand the language you’re using. Icons can be great, but at the same time can be misunderstood if people don’t recognize the icons you’re using.
Links & Forms
Links
You can interact with links by clicking on them or hovering over them. It’s important not to interpret hover as an intentional act.. It’s great to have a little design change something that adds to it…but not something that’s important and brings up tons of info, etc.
Important that anytime you use :hover you also use :focus, this applies the same CSS for people that use keyboards to navigate.
MouseOver has been changed to :hover. This is when things go from being procedural (JavaScript) to declarative (CSS).
Forms
They suck…make them easy/fun to fill out. If acceptable perhaps you can do a “mad libs” form.
Going from JS Form Validation to HTML UI elements such as: number, search, range, email, date, url, etc.
Progressive Enhancement
Begin with structure (HTML) then add the design (CSS) and then add the functionality (JavaScript). AJAX joins the scene…you can still do progressive enhancement just start with a fresh site that doesn’t have AJAX and make it work great – then add AJAX to make the experience even better. That way, if somebody turns of JavaScript it will still work, it won’t look as pretty but it won’t break. It’s very important that you have some kind of “loading” icon that lets the user know it’s working.
Feedback
The feedback should make sense, don’t put an alert that distracts the user from what they’re already doing.
An Event Apart, Web Design
November 2nd, 2010 by Matt Haff
Eric Meyer, author, CSS: The Definitive Guide, 3rd Ed.
Faux columns. Sliding doors. Image replacement. We rely on these techniques on a near-daily basis, but how will they be affected by the expanding vocabulary of CSS3? Will they be reworked, slimmed down, or abandoned altogether? An Event Apart cofounder and CSS mastermind Eric Meyer pulls some old standbys out of the toolbox and applies the capabilites of CSS3 to see how they can be made leaner, meaner, and more powerful.
Inline CSS
If you can have CSS in the page it will load much faster than an additional server call…even if it makes your file size a little bigger.
Box Sizing
Get rid of the stupid idea that a box width doesn’t include the padding or border size…
.col {
-moz-box-sizing: border-box; }
You can alter the layout of your site based on the width of the browser window with CSS.
@media all and (min-width:800px;) {
[wide layout rules]
}
@media all and (min-width:500px;) and (max-width:799px;) {
[narrow layout rules]
}
@media all and (max-width:499px;) {
[mobile layout rules]
}
Border Radius (Rounded Corners)
No more crazy hacks to get a fluid box with rounded corners…
.box {
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px; }
Multiple Backgrounds (Gradients)
Now you can make gradients with multiple background .PNGs
.gradient {
background-image: url(grad.png), url(grad1.png), url(grad2.png);
background-position: 50% 0, 0 0, 100% 0;
background-repeat: repeat-x, repeat-y, repeat-y;}
Dividers between list items
Navigation with borders between them? No more need to do have multiple styles for the different items.
#nav a:after {
content: “\2022″;}
#nav a:last-child:after {
content: “”;}
An Event Apart, User Experience
November 1st, 2010 by Matt Haff
Jared Spool, Founder, User Interface Engineering
What separates a good design from a bad design are the decisions that the designer made. Jared will explore the five styles of design decisions, showing you when gut instinct produces the right results and when designers need to look to more user-focused research.
Unintentional Design
When the design just happens on its own… http://www.lingscars.com/
Works great when:
- Our users will put up with whatever we give them
- We don’t care about support costs or pain from frustration
Self Design
“We’re not designing for others, we’re designing for ourselves” – 37 Signals
Works great when:
- your users are just like you
- you regularly use it just like your users do.
You can tell when something is designed by people that don’t use it…
Genius Design
When we’ve previously learned what users need
Works great when:
- We already know their knowledge, previous experiences, and contexts
- We’re solving the same design problems repeatedly
Activity-Focused Design
When we’re designing for new activities unfamiliar to us. Figure out who are the users and what they need from the site.
Works great when:
- We can easily identify the users and their activities
- We need to go beyond our own previous experiences
- Innovations can come from removing complexity
Six Flags = Activities
Disney = Experience
Experience-Focused Design
When we’re designing for the entire experience
Works great when:
- We want to improve our users’ complete experiences in between the specific activities
- We can be pro-active about the designs
- Game-changing innovations are the top priority
Rule-based Decisions vs. Informed Decisions
Design style guides and guidelines NEVER work!
Rule-based decisions
- Prevents thinking
- Fails on any exception cases
- When it fails it becomes unintentional design
- Dogma: An unquestioned faith independent of supporting evidence
- Methodology: Rule & faith-based decision making
Informed decisions
- Requires thinking
- Works with normal and exception cases.
- Techniques
- Tricks – Getting stuff done without needing the exact tool
Conclusion
- Every style has it’s purpose
- Great designers know which style they’re using
- Great designers use the same style for the entire project
- Great teams ensure everyone uses the same style (everyone that is influential of the project)
- The more advanced the style, the more expensive
- Agencies can’t go beyond Genius Design
- Activity-focused & Experienced-focused must be done in-house
- The more advanced the style, the better the design
- You need to know which decision style you’re using
- Encourage informed decisions and avoid rule-based decisions
- Techniques and tricks are more effective than methodology and dogma
An Event Apart
November 1st, 2010 by Matt Haff
Kristina Halvorson, author, Content Strategy for the Web
Designing for multichannel content delivery (mobile, anyone?) means an entirely new set of considerations and challenges for web professionals everywhere. Unfortunately for content creators, it’s nearly impossible to predict whether their writing will maintain impact and readability across each and every platform. But forget about the medium for a minute; it’s the message that matters most. We’ll learn how to identify your key business messages, how they inform your content strategy, and how they impact multi-channel content development and design.
Content Strategy
Plans for the creation, delivery, and governance of content that is:
- Useful
- Usable
- Purposeful
- Productive
- Profitable
Content is…text, graphics, videos, navigation, audio, error messages, notifications, etc.
Strategy is…a plan for obtaining a specific goal or result.
Core Strategy
Substance (Message)
Your message is not your:
- Mission Statement
- A Brand Promise
- A Tagline
People don’t care about what you’re committed to, they only want to know what you can do for them. Your message is what are you going to give them, why should they trust you, how are you going to help them… Your goal is a call to action!
Primary message
- Who you are, what you deliver, what I get.
- Each word has meaning
- All other messages are born from this one
- Laser-focused
- Recognizable, Memorable
Secondary message
- Support your primary message
- Provide context for
- Audience
- Type of information
- Task completion
- Product/Service
Page-Level Content Hierarchy
- Page tables – Specific wireframe-based content definition
- Structures
- Details
- Implications
- Questions
- Important to have a page objective…If you can’t come up with a page objective then you shouldn’t include it.
- Source Material – current site, brochure, sell sheets, foundation messages
- Maintenance
- Key Page Messages
Across your site(s)
- Anytime somebody comes into contact with your brand it should say the same thing.
- Everything you do should have the same language, tone, feel, message.
- Not everyone can write content for your brand, that’s why not everyone should!
Cross-Channel Consistency
- Get in touch with users that are generating content about your brand and make sure that it’s not damaging.
- If you’re gonna have a Twitter account…then use it right, have call to actions, engage people, etc.
- Make sure that your meta data (title, descriptions) makes sense and stays true to your brand!
- Get rid of 404 Errors, when archiving or retiring a page make sure you do it correctly with a 301 redirect.
Content Strategy Challenge!
Get back to your office and start working
