Uxsg talk-wm

654 views

Published on

1 Comment
0 Likes
Statistics
Notes
  • Be the first to like this

No Downloads
Views
Total views
654
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
11
Comments
1
Likes
0
Embeds 0
No embeds

No notes for slide

Uxsg talk-wm

  1. 1. A Talk Dec 20, 2012Wolfgang Maehr (@njyo)
  2. 2. The Choice is YoursA. The difference between UX and Interface Design 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 Worrying and Love to Zoom A look at wireframes, flow and how tools and mindsets shape our work…
  3. 3. Dont be a wimp, decide!
  4. 4. Know your users.
  5. 5. The Choice is YoursA. The difference between UX and UI Design 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 Worrying and Love to Zoom A look at wireframes, flow and how tools and mindsets shape our work…
  6. 6. UX vs. UI
  7. 7. “I am looking for a UI/UX.”
  8. 8. f
  9. 9. UI"… the space where interactionbetween humans and machines occurs." http://en.wikipedia.org/wiki/User_interface
  10. 10. UX "… a momentary, primarily evaluative feeling whileinteracting with a product or service." Marc Hassenzahl: User Experience (UX): Towards an Experiential Perspective on Product Quality
  11. 11. UX Model System UI Action Prior Experiences User More Experiences Prior Expectations Experience Modified Expectations Motivation User ContextBased on Anu Kankainen. Thinking Model and Tools for Understanding User Experience Related to Information Appliance Product Concepts.
  12. 12. Activities Affecting UX– Product strategy – Information Architecture– Business and product plan – Usability– Field research – Prototyping– Face to face interviewing – Interface layout– Creation and administering of – Interface design tests – Visual design– Gathering, organizing, and – Taxonomy creation presenting statistics – Terminology creation– Documentation of personas and – Copy writing findings – Presentation and speaking– Product design – Working tightly with– Feature writing programmers– Requirement writing – Brainstorm coordination– Graphic arts – Company culture evangelism– Interaction design – Communication to stakeholders Eric Flowers: UX is not UI
  13. 13. What They Want– Product strategy – Information Architecture– Business and product plan – Usability– Field research – Prototyping– Face to face interviewing – Interface layout– Creation and administering of – Interface design tests – Visual design– Gathering, organizing, and – Taxonomy creation presenting statistics – Terminology creation– Documentation of personas and – Copy writing findings – Presentation and speaking– Product design – Working tightly with– Feature writing programmers– Requirement writing – Brainstorm coordination– Graphic arts – Company culture evangelism– Interaction design – Communication to stakeholders Eric Flowers: UX is not UI
  14. 14. Who Does UX Design?– Product Management– Engineering– Sales and Marketing– Support and Customer Service– Etc.– Everybody affects the UX Eric Flowers: UX is not UI
  15. 15. You only do UX Design if you arein a position where you can throw out features and change the product.
  16. 16. Otherwise you do communication design……thats far from UX and often just putting lipstick on a pig
  17. 17. D
  18. 18. Dr. Flowlove
  19. 19. My Old Process …m. Create a Navigation Map To figure out how a user navigates through the app/site.n. Hand-sketch various ideaso. Make Wireframes per screen/page To lay out the information and define how things work on the page. …
  20. 20. O1: Login Overlay Progress Feedback Overlay LA1: Home Page CL1: Clip Listing Page CD1: Clip Detail Page UA1: User Account Page (spuul.com) (spuul.com/popular) (spuul.com/watch?clip=xyz) (spuul.com/account) LA2: logged in (free) CD2: resume LA3: logged in (premium) SR1: Search Result Page CD3: play clip (spuul.com/search) LA2a/LA3a: first login CD4: play trailer CD5: special clip page O2: Registration Overlay Progress Feedback Overlay O3: Special Payment Overlay ER1: Error 404 Page Progress Feedback (spuul.com/404) Overlay FA1: F.A.Q. Page (spuul.com/faq) AC1: About & Contact Page (spuul.com/about)TC1: Terms & Conditions Page (spuul.com/tnc)
  21. 21. LA3a: First Landing (prem) Confidential Spuul Wireframes v.0.1 by Extra Thought 1 2 3 4 5 1 2 3 4 5 … … 1 2 …
  22. 22. r
  23. 23. That’s Information Architecture… not Interaction Design!
  24. 24. Enter Jakub LinowskiInteractive Sketching Notation
  25. 25. Jakub Linowski: Large Canvas Flows + With References
  26. 26. Idea1. Start with placeholder boxes for each screen (at 100% size)2. Start with a rough outline and flow diagram from a eagle-eye perspective3. Each screen has certain variations right next to it4. Add more detail on each iteration
  27. 27. Use Case: User browses for a suitable1 RFQ to apply for. 1 user accesses the site Landing Page is displayed user browses the RFQs and RFQ details are displayed u selects one a) finds a suitable RFQ and applies b) finds nothing suitable and closes the ⁃ entering mybusiness.singtel.com/trading- - by tags site board - by search c) finds something interesting and ⁃ accessing a bookmark - by listing bookmarks it (notification) Use Case: User posts an RFQ user accesses an RFQ on the site2 ⁃ searching for an RFQ ⁃ being sent over from a partner site Use Case: User rates a transaction as3 the response to a mail. ⁃ following the link on an email Use Case: User signs up to get to see4 RFQs. 2 user accesses the site Landing Page is displayed user clicks on post RFQ user is redirected to correct partner site Use Case: User browses for BOs to5 order. ⁃ entering mybusiness.singtel.com/trading- board ⁃ accessing a bookmark 3 RFQ transaction is supplier marks the transaction email to customer to customer accesses RFQ and User A: Owner of a small enterprise completed closed and rates it rate transaction rates transactionA (supplier) specialising on providing a simple service, for example indoor ⁃ entering mybusiness.singtel.com/trading- board painting. etc. ⁃ accessing a bookmark Not too comfortable with using the internet, but does it because has to. Has an email account on yahoo. User B: Employee at a larger enterprise 4 Landing or RFQ Page is useB taking care of the sales process and user accesses the site user clicks to sign up Signup Popup is displayed displayed management. Specialising on providing a simple service, for supplying of snacks ⁃ entering mybusiness.singtel.com/trading- and beverages. board Comfortable using the internet; has an ⁃ accessing a link provided somewhere else email account with the company to be used for all work. User C: Employee at a partner enterpriseC (e.g. DBS) that posts requirements but 5 user accesses the site->TODO also may bid for RFQs sometimes. Managing certain amount of other users ⁃ entering mybusiness.singtel.com/trading- as well. board Very comfortable using the internet; has ⁃ accessing a link provided somewhere else an email account with the company to be used for all work. User D: Employee at Sesami/SingTelD RFQ is closing in 7 and 1 reminder emails to: days supplier with bookmark confirmation to applied event trigger RFQ closes suppliers and bookmarks user action archive RFQ page displayed customer selects supplier confirmation email to for RFQ successful suppliers action performed by system confirmation emails to unsuccessful suppliers update Sesami to reflect the selection
  28. 28. Home Page (logged in) RFQ Listing Page RFQ Detail Page Use Case: User browses for a suitable Most relevant RFQs: ⁃ all most recent RFQs ⁃ full details of the RFQ User submits bid:1 RFQ to apply for. 1 SingTel Most Relevant RFQs Header add new Search Logout Items Requiring Attention - based on tag/category SingTel Header Logout shown by default SingTel Header Logout ⁃ target of any shared link - send appropriate emails - new/unseen RFQs All RFQs only relevant Search Items Requiring Attention ⁃ filter by: logo Items Requiring Attention ⁃ actions: apply, full details, - register the FRQ to be bid a) finds a suitable RFQ and applies logo logo - soon ending RFQs logo - search logo bookmark, share, report Partner Site: Specific Page for (counter on RFQ, logo b) finds nothing suitable and closes the logo logo logo logo - tags logo - display related RFQs bidder history, etc.) site logo logo logo logo Items Requiring Attention: logo - categories User completed the bidding process for the FRQ on the customer site. logo logo c) finds something interesting and logo - Transactions that need logo - relevant RFQs (tags, etc.) After the transaction is complete, the user gets to rate the transaction. Bookmarks rating Bookmarks Bookmarks bookmarks it (notification) logo logo logo - RFQs that need a bidder logo logo logo to be selected see all logo logo logo logo Most Recent BOs add new Search logo - …can be expanded later logo logo logo logo logo Use Case: User posts an RFQ image image image image logo2 logo Bookmarks: logo logo - RFQs and BOs that were logo Similar Open RFQs logo bookmarked logo SGD 200 SGD 200 SGD 200 SGD 200 logo logo Use Case: User rates a transaction as see all3 logo logo the response to a mail. Fusce dapibus, tellus ac cursus commodo, tortor mauris. Learn More logo logo Use Case: User signs up to get to see4 RFQs. Expanded View of an RFQ logo ⁃ essential details of the RFQ Use Case: User browses for BOs to Closed RFQ with Ratings5 order. logo - - button unfolds and stays unfolded title opens RFQ Detail Page - transaction rating, once its available - actions: apply, full details, bookmark, share, report Transaction Rating logo logo - display rating (if available) - TODO logo Similar Open RFQs logo Landing Page (not logged in) RFQ Listing Page (not logged in) User A: Owner of a small enterprise ⁃ sales pitch and ⁃ small signup bannerA SingTel Header SingTel Header Login Login explanation at the top remains on top with call to Closed RFQ Pending Rating (supplier) specialising on providing a Opportunities ⁃ call to action: signup Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum. Signup action - request to rate transaction if not yet simple service, for example indoor - right panel has more sales All RFQs only relevant Search ⁃ right panel explains benefit SingTel Header rated Logout painting. etc. how this works pitch of signup (bookmarks): Please rate the transaction: Items Requiring Attention Not too comfortable with using the logo sales pitch and logos public comment logo logo internet, but does it because has to. Has logo Our Strategic Partners private comment logo an email account on yahoo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum. Signup logo partner logo save logo Our Strategic Partners PROCESSING Most Recent RFQs Search logo logo Bookmarks logo logo logo User B: Employee at a larger enterprise partner logo partner logoB logo logo taking care of the sales process and logo logo expand logo management. Specialising on providing a logo Transaction Rating logo logo partner logo logo logo simple service, for supplying of snacks logo logo transaction rating pending and beverages. see all logo Similar Open RFQs Comfortable using the internet; has an Most Recent BOs Search What Are Bulk Offers? logo logo email account with the company to be logo logo image image image image used for all work. logo RFQ Detail for Partner logo - display all suppliers that have logo how BOs works submitted a bid User C: Employee at a partner enterpriseC SGD 200 SGD 200 SGD 200 SGD 200 Suppliers Who Submitted a Bid: (e.g. DBS) that posts requirements but see all logo logo also may bid for RFQs sometimes. logo Managing certain amount of other users Similar Open RFQs logo as well. Very comfortable using the internet; has an email account with the company to be used for all work. User D: Employee at Sesami/SingTelD Home Page (logged in) RFQ Detail Page (own, no bids) ⁃ direct link to the User creates RFQ: ⁃ full details of the RFQ 2 SingTel Most Relevant RFQs Header add new Search Logout Items Requiring Attention appropriate partner portal ⁃ creates RFQ SingTel Header Logout - display bidders (count 0 in logo logo (single login) for - generates confirmation logo close Items Requiring Attention the beginning) logo logo appropriate partners Partner Site: Specific Page mail to author and - display related RFQs logo logo logo organisation admin - possibility to mark RFQ logo logo logo User completed the bidding process for the FRQ on the customer site. closed logo logo After the transaction is complete, the user gets to rate the transaction. Bookmarks Bookmarks logo logo logo see all logo logo logo Most Recent BOs add new Search logo logo logo image image image image logo logo Suppliers Who Submitted a Bid: no bids yet share SGD 200 SGD 200 SGD 200 SGD 200 Similar Open RFQs see all logo Fusce dapibus, tellus ac cursus commodo, tortor mauris. Learn More logo logo logo logo Home Page (logged in) RFQ Detail Page (awarded) RFQ Detail Page (rating pending) ⁃ direct link to the open ⁃ allows user to mark the ⁃ user marks the transaction 3 SingTel Most Relevant RFQs Header add new Search Logout Items Requiring Attention transactions SingTel Header Logout transaction as closed SingTel Header Logout as closed - user submits rating for the AWARDED Items Requiring Attention logo logo logo logo > transaction is only Please rate the transaction: Items Requiring Attention logo logo closed after the rating is public comment transaction logo logo logo logo logo submitted private comment logo > email is sent to the other logo logo logo reopen save logo party logo PROCESSING Bookmarks logo If both parties have rated the Bookmarks Bookmarks logo logo logo logo see all logo logo logo transaction, it is archived logo > email will be sent to both Most Recent BOs add new Search logo expand logo logo logo logo parties Transaction Rating image image image image logo close logo logo logo transaction rating pending Suppliers Who Submitted a Bid: logo logo Similar Open RFQs logo logo SGD 200 SGD 200 SGD 200 SGD 200 see all Similar Open RFQs logo Fusce dapibus, tellus ac cursus commodo, tortor mauris. Learn More logo logo

×