Self Check 732 Rewrite this feature to make it SMART 1

Self check 732 rewrite this feature to make it smart 1

This preview shows page 264 - 269 out of 517 pages.

Self-Check 7.3.2. Rewrite this feature to make it SMART. 1 Feature: I want to see a sorted list of movies sold. Here is one SMART revision of this user story: 1 Feature: As a customer, I want to see the top 10 movies sold, 2 listed by price, so that I can buy the cheapest ones first. Given user stories as the work product from eliciting requirements of customers, we can introduce a metric and tool to measure productivity. 7.4 Lo-Fi User Interface Sketches and Storyboards We usually need to specify a user interface (UI) when adding a new feature since many SaaS applications interact with end users. Thus, part of the BDD task is often to propose a UI to match the user stories. If a user story says a user needs to login, then we need a mockup of a page that has the login. Alas, building software prototypes of user interfaces can intimidate stakeholders from suggesting improvements—just the opposite of the effect we need at this early point of the design.
Image of page 264
Image of page 265
Figure 7.3: Window that appears when adding a movie to RottenPotatoes. What we want is the UI equivalent of 3x5 cards; engaging to the nontechnical stakeholder and encouraging trial and error, which means it must be easy to change or even discard. Just as the HCI community advocates 3x5 cards for user stories, they recommend using kindergarten tools for UI mockups: crayons, construction paper, and scissors. They call this low-tech approach to user interfaces Lo-Fi UI and the paper prototypes sketches . For example, Figure 7.3 shows a Lo-Fi sketch of the UI for adding a movie to RottenPotatoes. Ideally, you make sketches for all the user stories that involve a UI. It may seem tedious, but eventually you are going to have to specify all the UI details when using HTML to make the real UI, and it’s a lot easier to get it right with pencil and paper than with code.
Image of page 266
Image of page 267
Figure 7.4: Storyboard of images for adding a movie to RottenPotatoes. Lo-Fi sketches show what the UI looks like at one instant in time. However, we also need to show how the sketches work together as a user interacts with a page. Filmmakers face a similar challenge with scenes of a movie. Their solution, which they call storyboarding , is to go through the entire film as if it was a comic book, with drawings for every scene. Instead of a linear sequence of images like in a movie, the storyboard for a UI is typically a tree or graph of screens driven by different user choices. To make a storyboard, you must think about all the user interactions with a web app: Pages or sections of pages, Forms and buttons, and Popups. Figure 7.4 shows a sequence of Lo-Fi sketches with indications of what the user clicks to cause the transitions between sketches. After drawing the sketches and storyboards, you are ready to write HTML. Chapter 2 showed how Haml markup becomes HTML, and how the class and id attributes of HTML elements can be used to attach styling information to them via Cascading Style Sheets (CSS).
Image of page 268
Image of page 269

You've reached the end of your free preview.

Want to read all 517 pages?

  • Spring '19
  • Dr.Marcos

What students are saying

  • Left Quote Icon

    As a current student on this bumpy collegiate pathway, I stumbled upon Course Hero, where I can find study resources for nearly all my courses, get online help from tutors 24/7, and even share my old projects, papers, and lecture notes with other students.

    Student Picture

    Kiran Temple University Fox School of Business ‘17, Course Hero Intern

  • Left Quote Icon

    I cannot even describe how much Course Hero helped me this summer. It’s truly become something I can always rely on and help me. In the end, I was not only able to survive summer classes, but I was able to thrive thanks to Course Hero.

    Student Picture

    Dana University of Pennsylvania ‘17, Course Hero Intern

  • Left Quote Icon

    The ability to access any university’s resources through Course Hero proved invaluable in my case. I was behind on Tulane coursework and actually used UCLA’s materials to help me move forward and get everything together on time.

    Student Picture

    Jill Tulane University ‘16, Course Hero Intern

Stuck? We have tutors online 24/7 who can help you get unstuck.
A+ icon
Ask Expert Tutors You can ask You can ask You can ask (will expire )
Answers in as fast as 15 minutes
A+ icon
Ask Expert Tutors