Creating the User Experience
Upcoming SlideShare
Loading in...5
×
 

Creating the User Experience

on

  • 925 views

This session was presented at the MarkLogic User Conference in April of 2010. In it, I discuss strategies of how to combine functionality with aesthetics to create great apps. The audience consisted ...

This session was presented at the MarkLogic User Conference in April of 2010. In it, I discuss strategies of how to combine functionality with aesthetics to create great apps. The audience consisted primarily of developers/engineers and product managers.

Statistics

Views

Total Views
925
Views on SlideShare
918
Embed Views
7

Actions

Likes
0
Downloads
12
Comments
0

1 Embed 7

http://www.linkedin.com 7

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Creating the User Experience Creating the User Experience Presentation Transcript

  • Creating the user experience for applications built on MarkLogic JD Vogt - Director of User Experience, Mark Logic
  • Aesthetic Functionality
  • Aesthetic Fonts Colors Code Graphics Data Layout Functionality
  • Aesthetic Functionality
  • Aesthetic Functionality
  • Aesthetic Functionality
  • Aesthetic Functionality
  • Aesthetic Sweet Spot Functionality
  • Aesthetic * Value Sweet Spot Functionality
  • Aesthetic * Value * Brand Sweet Spot Functionality
  • “Form follows function - that has been misunderstood. Form and function should be one, joined in a spiritual union.” - Frank Lloyd Wright
  • Real World The evolution of maps
  • Real World The evolution of maps
  • Real World The evolution of maps
  • Real World The evolution of maps
  • Aesthetic * Value * Brand Functionality
  • How can we do that?
  • How can we do that? • Understand the needs of users
  • How can we do that? • Understand the needs of users • Discover the magic moments in your app
  • How can we do that? • Understand the needs of users • Discover the magic moments in your app • Get the right feedback at the right time
  • Understanding the needs of users The KJ Technique
  • The KJ Technique • Technique for gaining rapid group consensus and understanding complex systems • Inventor Jiro Kawakita
  • KJ Technique
  • KJ Technique • Gather 4-6 people for ~1 hour
  • KJ Technique • Gather 4-6 people for ~1 hour • Start with focus question
  • KJ Technique • Gather 4-6 people for ~1 hour • Start with focus question • Put opinions (or data or questions) onto Sticky Notes
  • KJ Technique • Gather 4-6 people for ~1 hour • Start with focus question • Put opinions (or data or questions) onto Sticky Notes • One answer per note
  • KJ Technique • Gather 4-6 people for ~1 hour • Start with focus question • Put opinions (or data or questions) onto Sticky Notes • One answer per note • Put Sticky Notes on the wall
  • KJ Technique • Gather 4-6 people for ~1 hour • Start with focus question • Put opinions (or data or questions) onto Sticky Notes • One answer per note • Put Sticky Notes on the wall • Group similar items
  • KJ Technique • Gather 4-6 people for ~1 hour • Start with focus question • Put opinions (or data or questions) onto Sticky Notes • One answer per note • Put Sticky Notes on the wall • Group similar items • Name the groups
  • KJ Technique • Gather 4-6 people for ~1 hour • Start with focus question • Put opinions (or data or questions) onto Sticky Notes • One answer per note • Put Sticky Notes on the wall • Group similar items • Name the groups • Vote on priorities
  • KJ in Practice A brownbag exercise at MarkLogic
  • Question 1 What would someone coming to Bugtrack expect to either find or do? Re port a bug
  • Question 2 Bugtrack would be magical if it could... Order a Esti mate Pizz Rel eases
  • Question 3 What could be done to make Bugtrack worse? IE Only Do esn’t save
  • Grouping and Voting
  • Grouping and Voting
  • Grouping and Voting
  • Results
  • Outline
  • Results My Search Releases Workflow Reporting Workflow Full text Bugs per Check for Dash- Magical search release dupes board CVS Mark Time to Track Alerts Fixed release See Report a progress bug Combine bugs
  • Logout Settings Alarms Bugtrack + add a bug Home Bugs Releases Reports Search All Bugs My Bugs Release status Search Options Total Bugs
  • Labels
  • Labels
  • Labels
  • Labels Personal setup, training and projects
  • Does it work?
  • Results
  • Results • Brand - Cited 190 times
  • Results • Brand - Cited 190 times • Value - 27 Million dollar grant, largest single grant in the history of Virginia Tech
  • KJ Technique • Great for information architecture • Great for understanding user priorities • Fast • Democratic • Can provide verbiage
  • Magic Moments Found through prototyping
  • Core Interaction or Activity
  • Office Toolkit
  • Office Toolkit
  • Frosting
  • Frosting
  • Frosting
  • Frosting
  • Magic Moment
  • Magic Moment One Way Street
  • Magic Moment One Way Street
  • Rich interactions
  • Rich interactions
  • Conference iPhone App
  • Twitter Friends Contacts Photos Surveys Maps Personalized News Schedule
  • Prototyping
  • XML MarkLogic Property List Excel Spreadsheet Survey Organizer Attendee
  • Schedule News changes Survey Communication Core interaction Dynamic Publish and Subscribe with MarkLogic
  • HERB
  • HERB
  • HERB iPhone Webapp Information Architecture v.1 - Ordering HERB Back Drinks Back Location Back Location HERB Ajax update of Ajax update of Order a drink from HERB... Ajax update of Tap a location on the map home with drink Water home with location 1. Kitchen Counter home with location Choose your drink > Coke 2. Front Desk 1 Tell HERB your location > Diet Coke 3. Another Place OR 3 Juice 4. Another Place Enter your name > Place Order 2 pic of HERB sweating 4 Boy, I'm really busy, Home Status Queue Photos could you try again Home Status Queue Photos Home Status Queue Photos later? Home - Pre-Order Mode Drinks Location Alt location idea Herb is busy/unavailable We'll need to set/check a User selects drink from An overhead map of the room The user picks a location from When the queue is full or cookie when the app launches choices. Check mark shows on is shown. User selects which a list of predetermined HERB is offline, the user so we can know if we are in choice, clicks "Back." station they will be standing at. locations. receives this message, it pre or post order mode. Signs are posted at each essentially locks them out. station. Back Name Back Name HERB Please enter the following... Order a drink from HERB... Please enter the following... Ajax update of home with name Sending order to HERB... Sending order to HERB... Name | Diet Coke > I got your order, for I am a.... a Diet Coke, meet I am a.... Station 3 > me at station 3 in CMU Student about 10 min. Previous Next CMU Student Faculty Done John Smith, Student > OK Faculty Member QIntel Employee Y U I O P W E R T Place Order Intel Employee A S Guest D F G H J K L Z X C V B N M Guest Home Status Queue Photos Home Status Queue Photos .?123 space return Name and contact info Name and contact info Home, with Place Order Lit Sending Order... User enters their name and Popup keyboard Becomes lit when drink, Sends http request to server chooses their type. (type is location and name have been with drink, location, and name only important if we can chosen. Those can be done in string. Could also potentially customize the message HERB any order. send it as a text message. sends.)
  • HERB iPhone Webapp Information Architecture and Interactions v.1 HERB HERB Other Messages: HERB HERB Pushy aren't you? Your Order... Your Order... (down one) Your Order... You ordered Juice. (nice You ordered Juice. (nice Sorry, you'll just You ordered Juice. (nice choice) Right now you're choice) I'll meet you at have to wait like choice) I'll meet you at 4th in the queue. I'll meet I'm on3my way, station in about 4 min. ? station 3 in about 4 min. everyone else you at station 3 in about 12 *wink* I'll see what meet you at station min. I can do 3 Why would I want a bribe? I'm a OK OK robot. Bribe Bribe Bribe Money means Cancel Order Cancel Order nothing to me. I Cancel Order cost more than Server receives message you make in a The request is sent to the year. server and placed in the Home Status Queue Photos Home Status Queue Photos Home Status Queue Photos Home Status Queue Photos queue. Home Screen Post Order Bribes Notification Complete Transaction The home screen after an Bribing HERB will bring return HERB could send a message How do we know a transaction order. It will need to be pushed random messages. There is a (via SMS) to alert the user to has been completed? We via ajax to update with time. chance of being moved up or be ready. thought of giving him a tip, or down in the queue. saying thank you, holding up a bar code... In some way, the cookie on the phone needs to get reset so that another drink can be ordered. Home Status Home Queue Home Photos Photos Photos HERB Battery Jon Meet me at station x Your Order... I'm on an almost full charge You ordered Juice. (nice Laura Meet me at station x choice) I'll meet you at Are you sure you station 3 in about 4 min. Drinks Served Today want to cancel your Justine Meet me at station x order? So far I've delivered 11 drinks 3 sodas No Yes 4 waters Francois Meet me at station x 4 Juices Bribe Min Meet me at station x Cancel Order Map > Jon Meet me at station x More Stats > Home Status Queue Photos Status Queue Photo Gallery Photo Detail Canceling an order This page would show various Shows people waiting for Photos HERB has taken. Detail of a photo HERB has If a user has to leave, they can statistics and stats on HERB. drinks. Might want to consider taken cancel their order and they will moving the Bribe button here be removed from the queue. as a sort of easter egg.
  • Experience Prototyping Experience Prototyping is acting out the existing or desired experience with props. It gives the designers the ability to understand existing experiences and explore design ideas.
  • Magic Moment
  • “Yes and...” culture
  • Lessons from improv
  • I put on my Viking Helmet and jump on my Harley
  • I put on my Viking Helmet and jump on That idea sucks my Harley
  • I put on my Viking helmet and jump on my Harley
  • I put on my Viking Here’s 5 helmet and jump on reasons why that my Harley will never work
  • I put on my Viking Helmet and jump on my Harley
  • I put on my Viking Let me play devil’s Helmet and jump on advocate... my Harley
  • I put on my Viking Helmet and jump on my Harley
  • I put on my Viking Hey, there’s some Helmet and jump on Martians -maybe they my Harley need a lift.
  • In practice... Apple's design process each week Helen Walters on March 08, 2008 Businessweek
  • In practice... Apple's design process each week Helen Walters on March 08, 2008 Businessweek Meeting 1
  • In practice... Apple's design process each week Helen Walters on March 08, 2008 Businessweek Meeting 1 Meeting 2
  • In practice... Apple's design process each week Helen Walters on March 08, 2008 Businessweek Meeting 1 Meeting 2 Forget about constraints Brainstorm Think freely Go crazy
  • In practice... Apple's design process each week Helen Walters on March 08, 2008 Businessweek Meeting 1 Meeting 2 Forget about constraints Nail things down Brainstorm Work things out Think freely Go crazy
  • Feedback Getting the right fidelity of feedback at the right time
  • Fidelity of Feedback Kathy Sierra - co-creator of the Head First books
  • Fidelity of Feedback Kathy Sierra - co-creator of the Head First books
  • Fidelity of Feedback Kathy Sierra - co-creator of the Head First books
  • Fidelity of Feedback Kathy Sierra - co-creator of the Head First books
  • Speed date storyboards
  • Participatory Moodboard
  • Summary Getting the correct mix of aesthetics and functionality
  • Summary Getting the correct mix of aesthetics and functionality
  • Summary Getting the correct mix of aesthetics and functionality • Use the KJ method or other techniques for discovering user needs and creating an information architecture
  • Summary Getting the correct mix of aesthetics and functionality • Use the KJ method or other techniques for discovering user needs and creating an information architecture • Find a magic moment that you can align your application around
  • Summary Getting the correct mix of aesthetics and functionality • Use the KJ method or other techniques for discovering user needs and creating an information architecture • Find a magic moment that you can align your application around • Get the right feedback at the right time
  • Thank You