The past two days I had the pleasure of being an attendee at the University of Pennsylvania’s UI Conference. Many famous speakers were in attendance and overall it was the same, if not better, than the Web App Masters Tour I had attended not long before. Here are the notes from the two days.
Living With Complexity
by Don Norman
- “The Design of Everyday Things”
- Complexity is good
- Simplicity is mostly in your head – has to do with the learning curve
- Relish complexity but not confusion (lack of knowledge)
- Revolution in computer design was to make things discoverable (Mac GUI vs. Unix)
- Make it pleasurable and people will forget if it didn’t function properly or they couldn’t find what they wanted
- Increased complexity and interaction styles are coming into our lives (Android, iPhone, Blackberry, iPad, Kindle)
- Less simplicity in life – browsers and platforms are plentiful
- The experience matters
- Memory is more important than actuality
- Design not for the present but the memory
- Fundamental Questions of Interaction Design
- What just happened?
- Where am I?
- Where do I go from here?
- All new smartphones have different rules of interaction which will be a problem later
- UI Design Principles
- Feedback
- Learn by Exploration (Discovery)
- Visibility
- Consistency
- WYSIWYG
- Undo
- Menus
- Star map for iPod/iPhone/iPad
- Simplicity vs. Complexity
- Living with complexity
- Life is complex
- Tools must match life (complex!)
- Understanding, not simplicity
- Simplicity is in the mind
- Good design can conquer complexity
- Skill can conquer well-designed complexity
- We all prefer a medium level of complexity
- This changes as you gain more skill (as with wine, music, etc.)
- Stay in the Flow Zone
- How to conquer complexity as a designer
- Fight extraneous features (featuritis)
- Modularize
- Provide a conceptual model
- Systems thinking
- Design the total experience
- Features vs. power -> capabilities
- Feature creep = featuritis
- Google modularizes
- Emotions are more important than logic – logic was invented and needs to be taught
- Complexity is good, complication is bad
- Service blueprint
- Keep people informed and in the loop
Neuroscience & Good User Experience
by Dustin Curtis
- dustincurtis.com
- Realistic 3 dimensional objects activate your brain to want to touch them – your brain runs the simulation of clicking on that 3 dimensional object
- Use realistic controls to mirror physical interactions
- Develop spatial relationships to take advantage of the hippocampus
- Create the experience
- Take advantage of the locus of attention (linear path, mimicking nature)
- User experience is art – not really something you can learn from a book
HTML5: The Future of the Web
by Tim Wright
- csskarma.com/presentations/penn
- HTML5 = Markup + JS APIs
- HTML5 spec overtook XHTML2 spec
- ishtml5readyyet.com
- Full implementation expected by 2022 (two browsers)
- Doctype is shorter
- <!DOCTYPE html>
- Technically optional but without could trigger quirks mode
- <meta charset = “utf-8″> is also shorter
- Script and style tags are just <script> and <style> with no type attribute
- Link relations
- <link rel=”prefetch” (loads a page in the background)
- Put in the head
- Can make block-level anchors to encompass more area
- Redefined <i>, <b>, <cite> (italics), <small> (fine print)
- Elements removed: font, big, center, frame, acronym, axis, bgcolor, border
- Markup freedom: capitalization, quotes, and self-closing tags don’t matter anymore
- contentEditable = true
- spellcheck = true
- <div hidden></div> (hides elements)
- draggable = true (for drag & drop)
- Microdata
- Can make custom attributes to embed data
- Structural elements
- Not block level and inline, more like text-based or grouping
- <header> & <footer>
- <nav> (for main navigation, mainly in the header)
- <aside> (can be sidebar content but is really related content or pull quotes)
- <section> vs. <div> (vary in semantic meaning)
- <article> (blog post) vs. <hgroup> (heading wrapper)
- <figure> & <figcaption> (figure diagram photo with related caption)
- <time> (“datetime” attribute is machine readable)
- <mark> (highlight search terms inline)
- <progress> (for a progress bar)
- <audio src=”">
- .ogg open format
- “controls” “autoplay” “preload” “loop” elements
- Can have fallback file formats
- <video src=”">
- Can set up poster frame
- Flash fallback?
- Can make your own video controls via Javascript
- Forms
- More labeling attributes on inputs
- <search> is problematic; autocomplete=”off” so no drop down of suggestions (e.g., credit card #s)
- “autofocus” & “required” (for validation)
- Custom inputs, can use your own regex pattern
- The “name” attribute is a must when using “required”
- Take weight of Javascript and put it more on the browser
- All degrade to text boxes
- Increased usability and conversion rates
- Easier styling with attribute selectors
- Easy validation and less spam
- Built-in accessibility and bolt-on accessibility
- Aria = set up roles to sections of the page for accessibility
- “aria-atomic” (this section will reload without page load)
- “aria-live” (“polite” re-read this when you’re done)
- document.createElement (<’header’>);
- Elements don’t exist right now
- Need to depend on Javascript to define them
- If no Javascript, the whole site could fall in on itself
- HTML Shiv by Remy Sharp
- Jaxer Server-Side Javascript (then wouldn’t matter if Javascript is turned off in the browser)
- Benefits
- Reduced page weight
- Speed and responsiveness
- Higher conversions
- Better usability
- Happy users
- Device development
- Javascript
- document.getElementbyClassName
- CSS selectors
- More like JQuery
- Geolocation
- GPS, Cellular Network
- Lots of data returned back to you
- Privacy issues – you can opt in to share
- Gather data via Javascript
- Check that the device is location-capable
- Storage & Sockets
- Local storage persistent to browser
- Super cookies
- dev.w3.org/html5/websockets
- Sockets not readily usable right now
- CanIUse.com
- Html5test.com
- Blackberry ships with Javascript turned off
- WebM video format
- High quality open video format
- YouTube committed over .ogv
- microvideoconverter.com
- New <track> element for video
Build to Think
by Vincent Matyi
- digitalmotive.net
- @vinbenimble
- How am I adding value?
- affectivedesign.com “UX Iceberg”
- Prototypes are fundamental asset through project lifecycle
- Eliminates waste
- Provides model to conduct user research at any stage
- “Prototyping” by Todd Zaki Warfel
- The sketch is a quick way to get started
- Dan Roam books, Scott McCloud book, vizthink
- Paper prototype
- Simulated experience
- Different levels of fidelity
- PDF, Axure, iRise, Visio, Flash
- Production Ready
- Conduct User Research
- “Integrative Thinking” by Roger Martin
- Tim Brown IDEO
- Bitsmiths are integral to high-performance teams
- Marketing leverages human perception
- User experience crafts for human perception
- Lead With Behavior
- Discount User Research
- Planning User Research: critical to the success of all efforts
- Evidence Based Practices
- Agile Software Development
- Scrum as Science (Defined vs. Empirical Process Control)
- Alan Cooper “The Inmates are Running the Asylum”