uxsg-talk-wm.pdf

Transcript

1. A Talk Dec 20, 2012 Wolf an Maehr (@njyo)
2. The Choice is Yours A. The difference between UX and Interface Desi n A rant and academic excursion on the domains of what we do and why we need to educate more… B. Dr. Flowlove or: How I Learned to Stop Worryin and Love to Zoom A look at wireframes, flow and how tools and mindsets shape our work…
3. Don't be a wimp, decide!
4. Know your users.
5. The Choice is Yours A. The difference between UX and UI Desi n A rant and academic excursion on the domains of what we do and why we need to educate more… B. Dr. Flowlove or: How I Learned to Stop Worryin and Love to Zoom A look at wireframes, flow and how tools and mindsets shape our work…
6. UX vs. UI
7. “I am looking for a UI/UX.”
8. f
9. UI "… the space where interaction between humans and machines occurs." http://en.wikipedia.or /wiki/User_interface
10. UX "… a momentary, primarily evaluative feeling while interacting with a product or service." Marc Hassenzahl: User Experience (UX): Towards an Experiential Perspective on Product Quality
11. UX Model Context User User Experience Prior Experiences Prior Expectations Action More Experiences Modified Expectations Motivation System UI Based on Anu Kankainen. Thinkin Model and Tools for Understandin User Experience Related to Information Appliance Product Concepts.
12. Activities Affectin UX – Product strate y – Business and product plan – Field research – Face to face interviewin – Creation and administerin of tests – Gatherin , or anizin , and presentin statistics – Documentation of personas and findin s – Product desi n – Feature writin – Requirement writin – Graphic arts – Interaction desi n – Information Architecture – Usability – Prototypin – Interface layout – Interface desi n – Visual desi n – Taxonomy creation – Terminolo y creation – Copy writin – Presentation and speakin – Workin ti htly with pro rammers – Brainstorm coordination – Company culture evan elism – Communication to stakeholders Eric Flowers: UX is not UI
13. What They Want – Product strate y – Business and product plan – Field research – Face to face interviewin – Creation and administerin of tests – Gatherin , or anizin , and presentin statistics – Documentation of personas and findin s – Product desi n – Feature writin – Requirement writin – Graphic arts – Interaction desi n – Information Architecture – Usability – Prototypin – Interface layout – Interface desi n – Visual desi n – Taxonomy creation – Terminolo y creation – Copy writin – Presentation and speakin – Workin ti htly with pro rammers – Brainstorm coordination – Company culture evan elism – Communication to stakeholders Eric Flowers: UX is not UI
14. Who Does UX Desi n? – Product Mana ement – En ineerin – Sales and Marketin – Support and Customer Service – Etc. – Everybody affects the UX Eric Flowers: UX is not UI
15. You only do UX Design if you are in a position where you can throw out features and change the product.
16. Otherwise you do communication design… …that's far from UX and often just putting lipstick on a pig
17. D
18. Dr. Flowlove
19. My Old Process … m.Create a Navi ation Map To fi ure out how a user navi ates throu h the app/site. n. Hand-sketch various ideas o. Make Wireframes per screen/pa e To lay out the information and define how thin s work on the pa e. …
20. LA1: Home Page (spuul.com) LA2: logged in (free) LA3: logged in (premium) LA2a/LA3a: first login CL1: Clip Listing Page (spuul.com/popular) SR1: Search Result Page (spuul.com/search) CD1: Clip Detail Page (spuul.com/watch?clip=xyz) CD2: resume CD3: play clip CD4: play trailer CD5: special clip page UA1: User Account Page (spuul.com/account) ER1: Error 404 Page (spuul.com/404) FA1: F.A.Q. Page (spuul.com/faq) AC1: About & Contact Page (spuul.com/about) TC1: Terms & Conditions Page (spuul.com/tnc) O2: Registration Overlay Progress Feedback Overlay O1: Login Overlay Progress Feedback Overlay O3: Special Payment Overlay Progress Feedback Overlay
21. 
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    Spuul Wireframes v.0.1 by Extra Thought Confidential LA3a: First Landing (prem) 
    
     1 2 3 4 5  
        
     
    
    
      
    
    
    
      
     
         
     
      
         
    
     
    
     
           
             #
    $
    
    $# "!
    &"
     
    $!
    "
    
    "
    !&
    "
    
    "
    
    "   
    !
       
    !
    !" & 
    %
     
      
       
    
    !
    "…     
    !
      
     
    
    !
    ""
    &#
    $
    "
    " 
    '
    !! 1 2 3 4 5  
    +
     $&"
    %')"
    $!$&
     ( &  
    +
     $* 
     (! &  
    +
     $&"
    %')"
    $!$&
     … &  
    +
     )&
    $)&
    #()' '"
    $… & 
    
    #('
    #(  
      
    '
    !! 1 2  
    
     
    
    
    
    
     
    
     
    
    %
    !
    #
    %"
    
    
    $
    
    !
    
    %"
    
    
    
    "
    " !
    
    
    
    
    
    !
    #  
    $
    "!
    $!
    "
    " ! 
    #
    !
    
    #!
     
    !
     %"
    !
    !#!
    %"
    "!
    
    $
    %"
    
    
    
    
    $!
    
    
    #
    "!
    !
    %"
    $
    #
    !
    !
    !
    !#!
    !
    !
    
    !
    "
    #  
     
    $
    $
    %
    
    %"
    !
    !
     !
    !
    
    !
    
    
    
    
    !
    "
    !
    "
    
    #!
    !
    
    
    "!
    %! 
    
       
    
22. r
23. That’s Information Architecture… not Interaction Design!
24. Enter Jakub Linowski Interactive Sketching Notation
25. Jakub Linowski: Lar e Canvas Flows + With References
26. Idea 1. Start with placeholder boxes for each screen (at 100% size) 2. Start with a rou h outline and flow dia ram from a ea le-eye perspective 3. Each screen has certain variations ri ht next to it 4. Add more detail on each iteration
27. 1 Use Case: User browses for a suitable RFQ to apply for. a) finds a suitable RFQ and applies b) finds nothing suitable and closes the site c) finds something interesting and bookmarks it (notification) Use Case: User posts an RFQ 2 Use Case: User rates a transaction as the response to a mail. 3 Use Case: User signs up to get to see RFQs. 4 Use Case: User browses for BOs to order. 5 User A: Owner of a small enterprise (supplier) specialising on providing a simple service, for example indoor painting. etc. Not too comfortable with using the internet, but does it because has to. Has an email account on yahoo. A User B: Employee at a larger enterprise taking care of the sales process and management. Specialising on providing a simple service, for supplying of snacks and beverages. Comfortable using the internet; has an email account with the company to be used for all work. B User C: Employee at a partner enterprise (e.g. DBS) that posts requirements but also may bid for RFQs sometimes. Managing certain amount of other users as well. Very comfortable using the internet; has an email account with the company to be used for all work. C User D: Employee at Sesami/SingTel D 1 user accesses the site Landing Page is displayed RFQ details are displayed ⁃ entering mybusiness.singtel.com/trading- board ⁃ accessing a bookmark user accesses an RFQ on the site user browses the RFQs and selects one - by tags - by search - by listing u 2 user accesses the site ⁃ searching for an RFQ ⁃ being sent over from a partner site ⁃ following the link on an email ⁃ entering mybusiness.singtel.com/trading- board ⁃ accessing a bookmark Landing Page is displayed user clicks on post RFQ user is redirected to correct partner site 3 supplier marks the transaction closed and rates it ⁃ entering mybusiness.singtel.com/trading- board ⁃ accessing a bookmark RFQ closes confirmation to applied suppliers and bookmarks RFQ is closing in 7 and 1 days reminder emails to: supplier with bookmark customer selects supplier for RFQ confirmation emails to unsuccessful suppliers confirmation email to successful suppliers update Sesami to reflect the selection archive RFQ RFQ transaction is completed email to customer to rate transaction customer accesses RFQ and rates transaction 4 user accesses the site ⁃ entering mybusiness.singtel.com/trading- board ⁃ accessing a link provided somewhere else Landing or RFQ Page is displayed user clicks to sign up Signup Popup is displayed use 5 user accesses the site->TODO ⁃ entering mybusiness.singtel.com/trading- board ⁃ accessing a link provided somewhere else event tri er action performed by system user action pa e displayed
28. Header SingTel Logout Items Requiring Attention logo logo logo logo Bookmarks logo logo logo logo logo logo close Suppliers Who Submitted a Bid: logo logo logo logo Similar Open RFQs AWARDED Header SingTel Logout Most Relevant RFQs Search logo logo logo logo logo see all Most Recent BOs Search image SGD 200 image SGD 200 image SGD 200 image SGD 200 see all Items Requiring Attention logo logo logo logo Bookmarks logo logo logo logo logo Fusce dapibus, tellus ac cursus commodo, tortor mauris. Learn More add new add new 1 Use Case: User browses for a suitable RFQ to apply for. a) finds a suitable RFQ and applies b) finds nothing suitable and closes the site c) finds something interesting and bookmarks it (notification) Use Case: User posts an RFQ 2 Use Case: User rates a transaction as the response to a mail. 3 Use Case: User signs up to get to see RFQs. 4 Use Case: User browses for BOs to order. 5 User A: Owner of a small enterprise (supplier) specialising on providing a simple service, for example indoor painting. etc. Not too comfortable with using the internet, but does it because has to. Has an email account on yahoo. A User B: Employee at a larger enterprise taking care of the sales process and management. Specialising on providing a simple service, for supplying of snacks and beverages. Comfortable using the internet; has an email account with the company to be used for all work. B User C: Employee at a partner enterprise (e.g. DBS) that posts requirements but also may bid for RFQs sometimes. Managing certain amount of other users as well. Very comfortable using the internet; has an email account with the company to be used for all work. C User D: Employee at Sesami/SingTel D 1 3 RFQ Listing Page Home Page (logged in) Header SingTel Logout Search logo logo logo logo Items Requiring Attention logo logo logo logo Bookmarks logo logo logo logo logo logo logo logo logo logo logo logo only relevant All RFQs logo logo logo Most relevant RFQs: - based on tag/category - new/unseen RFQs - soon ending RFQs Items Requiring Attention: - Transactions that need rating - RFQs that need a bidder to be selected - …can be expanded later Bookmarks: - RFQs and BOs that were bookmarked Expanded View of an RFQ ⁃ all most recent RFQs shown by default ⁃ filter by: - search - tags - categories - relevant RFQs (tags, etc.) Landing Page (not logged in) Header SingTel Login Opportunities how this works Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum. Signup Our Strategic Partners partner logo partner logo Most Recent RFQs Search logo logo logo logo logo see all Most Recent BOs Search image SGD 200 image SGD 200 image SGD 200 image SGD 200 see all What Are Bulk Offers? how BOs works ⁃ sales pitch and explanation at the top ⁃ call to action: signup - right panel has more sales pitch ⁃ essential details of the RFQ - button unfolds and stays unfolded - title opens RFQ Detail Page - actions: apply, full details, bookmark, share, report - display rating (if available) - TODO RFQ Detail Page ⁃ full details of the RFQ ⁃ target of any shared link ⁃ actions: apply, full details, bookmark, share, report - display related RFQs Header SingTel Login Search logo logo logo logo logo logo logo logo logo logo logo only relevant All RFQs Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum. Signup Our Strategic Partners partner logo partner logo RFQ Listing Page (not logged in) ⁃ small signup banner remains on top with call to action ⁃ right panel explains benefit of signup (bookmarks): sales pitch and logos Similar Open RFQs logo Transaction Rating logo logo Closed RFQ with Ratings - transaction rating, once it's available Header SingTel Logout Items Requiring Attention logo logo logo logo Bookmarks logo logo logo logo logo logo Similar Open RFQs logo logo logo logo logo Partner Site: Specific Page User completed the bidding process for the FRQ on the customer site. After the transaction is complete, the user gets to rate the transaction. Header SingTel Logout Items Requiring Attention logo logo logo logo Bookmarks logo logo logo logo logo logo logo logo logo logo PROCESSING expand Similar Open RFQs logo Transaction Rating logo transaction rating pending public comment private comment save Please rate the transaction: Closed RFQ Pending Rating - request to rate transaction if not yet rated 2 Header SingTel Logout Most Relevant RFQs Search logo logo logo logo logo see all Most Recent BOs Search image SGD 200 image SGD 200 image SGD 200 image SGD 200 see all Items Requiring Attention logo logo logo logo Bookmarks logo logo logo logo logo Fusce dapibus, tellus ac cursus commodo, tortor mauris. Learn More add new add new Partner Site: Specific Page User completed the bidding process for the FRQ on the customer site. After the transaction is complete, the user gets to rate the transaction. ⁃ direct link to the appropriate partner portal (single login) for appropriate partners User submits bid: - send appropriate emails - register the FRQ to be bid for (counter on RFQ, bidder history, etc.) Suppliers Who Submitted a Bid: logo logo logo logo Similar Open RFQs RFQ Detail for Partner - display all suppliers that have submitted a bid User creates RFQ: ⁃ creates RFQ - generates confirmation mail to author and organisation admin ⁃ full details of the RFQ - display bidders (count 0 in the beginning) - display related RFQs - possibility to mark RFQ closed Header SingTel Logout Items Requiring Attention logo logo logo logo Bookmarks logo logo logo logo logo logo Suppliers Who Submitted a Bid: logo logo logo logo logo Similar Open RFQs no bids yet share close Header SingTel Logout Most Relevant RFQs Search logo logo logo logo logo see all Most Recent BOs Search image SGD 200 image SGD 200 image SGD 200 image SGD 200 see all Items Requiring Attention logo logo logo logo Bookmarks logo logo logo logo logo Fusce dapibus, tellus ac cursus commodo, tortor mauris. Learn More add new add new Home Page (logged in) Home Page (logged in) ⁃ direct link to the open transactions ⁃ allows user to mark the transaction as closed > transaction is only closed after the rating is submitted Header SingTel Logout Items Requiring Attention logo logo logo logo Bookmarks logo logo logo logo logo logo logo logo PROCESSING expand Similar Open RFQs logo Transaction Rating logo transaction rating pending public comment private comment save Please rate the transaction: reopen ⁃ user marks the transaction as closed - user submits rating for the transaction > email is sent to the other party If both parties have rated the transaction, it is archived > email will be sent to both parties RFQ Detail Page (own, no bids) RFQ Detail Page (awarded) RFQ Detail Page (rating pending)
29. Display Options Show/Hide Interactions Show/Hide Comments Users User A: Owner of a small enterprise (supplier) specialisin on providin a simple service, for example indoor paintin . etc. Not too comfortable with usin the internet, but does it because has to. Has an email account on yahoo. A B User B: Employee at a lar er enterprise takin care of the sales process and mana ement. Specialisin on providin a simple service, for supplyin of snacks and bevera es. Comfortable usin the internet; has an email account with the company to be used for all work. C User C: Employee at a partner enterprise (e. . DBS) that posts requirements but also may bid for RFQs sometimes. Mana in certain amount of other users as well. Very comfortable usin the internet; has an email account with the company to be used for all work. D User D: Employee at Sesami/Sin Tel User Cases Use Case #1: User browses for RFQs to apply for. (A, B, C) a) finds a suitable RFQ and applies b) finds nothin suitable and closes the site c) finds somethin interestin and bookmarks it (notification) #1 Use Case #2: User posts an RFQ. (C) #2 Use Case #3: User rates a transaction. (A, B, C) a) by accessin the pa e and selectin to rate b) by followin the request in a mail #3 Use Case #4: User si ns up to et to see RFQs and BOs. (A, B, C) a) new or anisation b) existin or anisation — approved user c) existin or anisation — user not approved #4 Use Case #5: User browses for BOs to order. (A, B, C) a) finds a suitable o er and bids b) finds nothin suitable c) finds somethin suitable and bookmarks it #5 Le end Screen or pa e name and ID HO1a: Home Pa e HO1a Go to screen a.1 Activate action Touchpoint Connection line between screens t.1 Transition animation Comment Lorem ipsum dolor sit nuc arbitor domii ess… #1 Use case start and end send email user, admin Actions performed in the backend decision? user clicks link in email tri er event Actions performed by the user Conditional statement: Yes or no? An event tri er in the back round Header SingTel Logout Most Relevant RFQs Search logo logo logo logo logo see all Most Recent BOs Search image SGD 200 image SGD 200 image SGD 200 image SGD 200 see all Items Requiring Attention logo logo logo logo Bookmarks logo logo logo logo logo Fusce dapibus, tellus ac cursus commodo, tortor mauris. Learn More add new add new User browses for RFQs to apply for. User Type: A, B, C User posts an RFQ via Sesami portal User Type: C User rates a transaction. User Type: A, B, C Header SingTel Logout Search logo logo logo logo Items Requiring Attention logo logo logo logo Bookmarks logo logo logo logo logo logo logo logo logo logo logo logo only relevant All RFQs logo logo logo User Actions: > browse/filter by: ta , search, listin , all/relevant, postin date (default), closin date > click on "expand" will expand > click on RFQ title opens RFQ Detail Pa e > click on lo o or author opens Or anisation Pa e > click on ta s and cate ories,open RFQ Listin pa e with matchin criteria ––– Lo ic: RFQ Listin : - sortin : closest first (di erent per filter) - display 20 entries per pa e Header SingTel Login Opportunities how this works Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum. Signup Our Strategic Partners partner logo partner logo Most Recent RFQs Search logo logo logo logo logo see all Most Recent BOs Search image SGD 200 image SGD 200 image SGD 200 image SGD 200 see all What Are Bulk Offers? how BOs works User Actions: > si nup (main focus) > lo in ––– Display: – sales pitch and explanation at the top – direct list of benefits in the ri ht panel User Actions: > bookmark, report, share via pre-written email or LinkedIn > apply opens Partner Site > full details opens RFQ Detail Pa e ––– Lo ic: - button unfolds and stays unfolded Display: – essential details of the RFQ – user ratin (if available) User Actions: > report, share via email/LinkedIn, bookmark > apply ––– Display: – full details of the RFQ (terms and conditions, etc.) – attachments—ToDo – 5 related open RFQs Header SingTel Login Search logo logo logo logo logo logo logo logo logo logo logo only relevant All RFQs Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum. Signup Our Strategic Partners partner logo partner logo User Actions: – as otherwise plus si nup ––– Display: - small si nup banner remains on top with call to action ri ht panel explains benefit of si nup (bookmarks): sales pitch and lo os Similar Open RFQs logo Transaction Rating logo logo Display: - transaction ratin s, once available Header SingTel Logout Items Requiring Attention logo logo logo logo Bookmarks logo logo logo logo logo logo Similar Open RFQs logo logo logo logo logo Partner Site: Specific Page User completed the bidding process for the FRQ on the customer site. After the transaction is complete, the user gets to rate the transaction. Header SingTel Logout Items Requiring Attention logo logo logo logo Bookmarks logo logo logo logo logo logo logo logo logo logo PROCESSING expand Similar Open RFQs logo Transaction Rating logo transaction rating pending public comment private comment save Please rate the transaction: User Actions: > rate and save/cancel ––– Display: - request to rate closed transaction (if missin ) - ratin based on involved role Lo ic: – direct link to the appropriate partner portal (sin le lo in) for all partners User Actions: > submit bid ––– Lo ic: – directly open appropriate pa e (sin le si n-in) – send appropriate emails – re ister the FRQ to be bid for Suppliers Who Submitted a Bid: logo logo logo logo Similar Open RFQs Display (for Partner postin RFQ): - all suppliers that have submitted a bid - hi hli ht the supplier that was chosen User Actions: > possibility to mark RFQ closed ––– Display: – full details of the RFQ – all bidders (owner or anisation) – bid count, startin with 0 (for all other users) – 5 related open RFQs Header SingTel Logout Items Requiring Attention logo logo logo logo Bookmarks logo logo logo logo logo logo Suppliers Who Submitted a Bid: logo logo logo logo logo Similar Open RFQs no bids yet share close User Actions: > click on close opens the ratin box ––– Lo ic: – transaction is only closed after the ratin is submitted Header SingTel Logout Items Requiring Attention logo logo logo logo PROCESSING public comment private comment save Please rate the transaction: reopen User Actions: > set ratin s for the counterpart > save the ratin and mark the transaction as closed ––– Lo ic: – email is sent to the other party Display: User Actions: > browse by: ta , search, listin > click on RFQ: ima e, title, author, expand ––– Lo ic: Most relevant RFQs: - new/unseen RFQs + soon endin RFQs based on previous ta /cate ory Lo ic: Items Requirin Attention: - own closed RFQs that lack need a bidder selection - transactions pendin ratin - etc. Lo ic: Bookmarks: - RFQs and BOs that were bookmarked – partner: list submissions in RFQ – supplier: mark RFQ as submitted – others: increase RFQ submission counter Header SingTel Logout Most Relevant RFQs Search logo logo logo logo logo see all Most Recent BOs Search image SGD 200 image SGD 200 image SGD 200 image SGD 200 see all Items Requiring Attention logo logo logo logo Bookmarks logo logo logo logo logo Fusce dapibus, tellus ac cursus commodo, tortor mauris. Learn More add new add new User Actions: > create RFQ ––– Lo ic: – send appropriate emails – hittin "save" leads directly to the RFQ Detail Pa e Header SingTel Logout Lo ic: Header SingTel Logout Items Requiring Attention logo logo logo logo logo AWARDED Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum. Close HO1: Home Pa e: lo ed in RL1: RFQ Listin Pa e RLa: RFQ Listin Expanded View RD: RFQ Detail Pa e tar et of any shared link HO1: Home Pa e: lo ed in User Actions: > lo in > retrieve password ––– Lo ic: – directly open the ri ht lo in pa e (dependin on user a liation) PS2: Partner Site: Lo in Partner Site: Login User logs into the partner portal. PS3: Partner Site: RFQ Postin Pa e Partner Site: RFQ Posting Page User posts the RFQ on the partner portal. After the posting is done, the user gets to see the posting on the Sesami portal. RDd: RFQ Detail Pa e: own, no bids HO1: Home Pa e: lo ed in RDe: RFQ Detail Pa e: awarded RDf: RFQ Detail Pa e: ratin pendin RD : RFQ Detail Pa e: ratin iven User Actions: > reopen the ratin (possible until counterpart sets ratin ) > resend ratin mail ––– Lo ic: – email is sent to the other party Header SingTel Logout Items Requiring Attention logo logo logo logo PROCESSING Please rate the transaction: reopen Public Rating: Private Comment: user accesses the site URL or bookmark user accesses the site URL or bookmark user accesses the site URL or bookmark #1 #2 #3a confirmation emails supplier, partner email to user or : poster + admin HO2: Landin Pa e: not lo ed in HO1 expand to RLa HO2 PR1 report bookmark share PS1 RDa: Closed RFQ with Ratin s RDb: Closed RFQ with Pendin Ratin RDc: RFQ Detail for Partner PS1: Partner Site: RFQ Application RD update RFQ pa e submissions and count user accesses an RFQ on the site Goo le search, partner site, email link User browses for RFQs to apply for. User Type: A, B, C #1 RL2: RFQ Listin Pa e: not lo ed in a c PR2
30. Thou hts – Need to et over the 100% zoom level – I spend too much time in the tool… I should only use the tool to document my thou hts – I usually only billed for the time that it takes me to create the deliverables. – The iterative approach helps to add more detail – It takes lon er – Difficult to hand over as it is a non-linear document – I found many flaws in the flow that went unnoticed in my old approach
31. ı