Stories to UI (Tue Oct 3, lecture 13)

Homework due for today

Legend: : Participation | : Early | : PDF | : Portfolio | : Zipped

  1. Team Information: Each team creates an entry on the Team Information Table, including: Product Name, TA Coach, Product Reviewer, Url to Trello, Url to your github, Url to your Heroku. Team Deliverable: Updated team information table entry
  2. Paper Prototype: Read this paper about Paper Prototyping. Design a paper prototype for your team’s product. Remember, this is an inidividual assignment, so that we can compare each team member’s vision of what the product might be. We will assess your work based on the care and thought you put into it, not on whether the UI itself is awesome. Deliverable: Readable image of your paper prototype. If you just take a cell phone picture of a drawing in pencil (worst case) it will not be legible.
  3. PA Rails 1: Complete work on PA Rails 1. Work in your portfolio, in a directory called pa_rails. Submit your code as a zip file. Deliverable: Rails app as a zip file. . Begin work on PA Rails 2.

  4. Projects: You should be working or completed steps GIT, DOCUMENTATION, PLANSKEL, SHEMASKEL, BUILDSKEL, STORYSDV, PAPERSDV, SCHEMASDV.

Optional Readings

User Stories

  • Start a list (Trello, Google Sheet etc.)
  • Each story is a minimal “feature” or “scenario” or “use case”
  • We will give you feedback on the wording
  • Keep the list in priority order
  • Not unusual to have 50-100 stories
  • You will not implement all of them
  • Examples from P2PTours
    • “App can be used without an account”
    • “Users without account can search for tourguides”
    • “User can request an account by supplying email and password”
    • “User receives email with link to confirm account”
    • “Registered user can request to be accepted as a tour guide”
    • “Request for tour guide is accompanied by a cell phone number”
    • “There is a web based administrative console”
    • “Requests for tour guide status appear in a queue on the admin console”
    • “Admin console requires a login to access”
    • etc.
  • Discussion: Lets brainstorm user stories for each of the term projects

What’s the difference between a mockup and a prototype?

  • Note that hardware and software are very different in this context
  • Mockup typically is static and non-functional
  • Prototype typically is somewhat dynamic and somewhat functional
  • But there is a definite grey area in between
What’s the purpose?
  • It’s a classic MVP testing one ore more hypotheses
  • Therefore the amount of “fidelity” depends on what the hypotheses are
  • Pick the approach that is the cheapest way to check those hypotheses
  • Only create one when the cheaper or more important hypotheses have been tested
(Software) Mockups and Prototypes, from cheap to expensive
  1. Paper sketch
  2. Paper prototype (Paper Prototyping Helper Kit )
  3. Wireframing or general drawing tool (Balsamiq, powerpoint, google drawings, etc.)
  4. Image editing tools (Photoshop and similar)
  5. Real HTML and javascript run in a browser
  6. Live prototype (can be done with Balsamiq
  7. Actual working code

Paper Prototyping

  • There are many media for doing this.
  • Advantages
    • Very cheap which saves money
    • But also makes it less painful when it has to be changed totally
    • Allows a user to take over and cross things out and suggest other ideas
  • You can take this as far as you want.
    • Smaller snippets for the various ui widgets (e.g. drop down menus)
    • Make a “screen flow diagram” by connecting the different sheets of paper with lines showing the transitions
    • It is similar to a movie ‘storyboard’
Here is my example: not good UI.
  • Why I insist on ‘paper prototyping’
  • How ugly can it be?
  • Fast iteration
  • Role of the UX Flow Chart
  • Article:
  • A UX Flow is a simple extension of Paper Prototyping
  • Instead of individual paper prototypes of individual page, we zoom out and view the product with a broader perspective
  • Each page is connected to one or more other with an arrow labeled with the that gesture, event or command, gets the user from one to the other (e.g. “user clicks ‘resend password link’” or “email was successfully sent”)
  • You need to be meticulous and try and cover all the cases BEFORE you start coding.
  • Neatness is not as important as careful thinking about how the user will experience the product

Next Class