Splitting User Stories. Part 2: Decomposing Rich UI Stories.

By Alex Yakyma
Link
In this post we will continue outlining the ways of splitting user stories. Previous post was about splitting stories that include complex or data-intensive algorithms (Splitting User Stories. Part 1: Incremental Development of Complex Algorithms). Post #1 also includes interesting links and provides brief overview of all posts in the series. Currently we will touch another common class of stories – those including much of the UI work.
In this post as well as in the previous one we will stick to the simple model and terminology for splitting: a Story splits into First cut – something simpler and faster-to-implement and then Cut 2 – finishing the rest of the functionality.
In case of rich UI stories Cut 2 may often be translated into non-functional requirements (NFRs). And in this case it has to be sooner or later applied to all the functionality of the system. Let’s consider few examples:
Cut 1: Implementing the functionality of a certain web page. Cut 2: Extracting all CSS and Javascript code into separate files
• …Cut 2: Using same page/screen template
• …Cut 2: Using jQuery for AJAX calls
These examples naturally transform into NFRs: a) All CSS/Javascript code should be in separated from HTML markup; b) All system screens should descend from master screen template; c) All asynchronous calls should be done via jQuery API.



Now we’re approaching the 12 ways of splitting UI stories.

1. Synchronous calls – Asynchronous calls.
Story: As a user I can register in order to make purchase.
Cut 1: …registration is on the separate screen, process totally synchronous.
Cut2: …I can register asynchronously using inline form.


2. Basic controls – Advanced controls.
Simple text boxes instead of advanced calendar control. Screens instead of pop-ups, etc.


3. Basic validation – Complex validation.
Validation sometimes can be really complex and it may be useful to make first step with minimum validation functionality and then add it in the next cuts. Example…
Story: As a user I can register in the system.
Cut 1: …required fields not empty Cut 2: …email fully validated; username to satisfy the pattern and to be unique; zip code validated against DB; Street address validated against pattern; DOB within the range. Field length requirements checked on client side.

4. Functional UI – UI/UX standards, styles.
Because usually functionality may open a wide bandwidth for communication and feedback, it makes sense to develop functional UI as a First cut and apply styles and standards later as Cut 2.

5. Main UI functionality – All UI functionality
E.g.: the “advanced” parts would be: “auto-complete”, “Image zoom”, “drag & drop”, “pagination” (instead of longer list) etc.


Story: As a user I can see a list of my monthly credit card transactions.
Cut 1: …in the table.
Cut 2: …in the table with pagination.

6. Fixed view – Adaptable view An ability to provide a user with his specific UI. User-specific UI may appear when we have different classes of users and so all UI or only some of the screens could be:
- Branded for different clients (companies)
- Adjusted to different personas
- Configurable by users themselves
- …
Story: As a user I can make flight and hotel reservations. The tool is used by two personas: end consumer and travel agency. This is reflected in somewhat different behaviors where travel agent may have additional capabilities on the screen to make group reservations. In Cut one we may either:
- Allow both personas use simplest user interface that still covers the needs of both, or
- Build two screens the simplest way possible
And then in Cut 2 we develop the foundation that allows for easy, metadata-based, customization of the screens.


7. Empty inputs – Good defaults
This method assumes not as trivial work in Cut 2 as it seems at a first glance. Example…
Story: As a user I can book flight tickets.
Cut 1: …all controls empty.
Cut 2: …My current location selected as possible place of departure, my most frequent destination – as the one; as I select a departure date the default for return date would be next Saturday after departure.

This example shows that good and useful default values may have non-trivial logic behind it and it may make a lot of sense in separating it out.

8. Single screen – Wizard.
Story: As a user I can enter all necessary information to make my online booking.
In Cut 1 we simply create a single screen with all necessary controls in it. Cut 2 will be a wizard that would collect the data in much more user-friendly manner.

9. Less controls – All controls
Story: As a user I can register in the system.
Cut 1: …providing only basic information.
Cut 2: ...providing richer demographic information.
This can be sometimes extremely useful as simple registration (or other generic function) may enable rest of system functionality work, while next cut will conclude the implementation of more complex registration requirements.


10. Interfacing user – Interfacing other systems.
UI may carry the burden of interfacing other systems, not just the user. Here are few examples:
- Search engine optimization – Web UI should be specially formatted (both visible and invisible parts); content adhering special rules; breadcrumbs navigation etc.
- Access to file system, user directories etc, network locations from the UI.
- Built-in screen printing function
- UI logging and statistics (for further analytical processing)
- Special layout requirements for screens (various reports etc) to be further exported and submitted for automated data indexing

In these cases Cut 1 would be implementing user interface the user and Cut two is extending it to further capabilities of interfacing with the rest of the systems.

11. Main platform – All platforms
Story: As a sales representative I can check product availability in real time.
Cut 1: …with my laptop. Cut 2: …via the interface for mobile devices.


12. Simplest technology – UI framework
Sometimes it can be very beneficial to start really fast development of a, say, classic JSP web page (Cut 1) that implements a story and then only (Cut 2) jump to some advanced UI framework like JSF, Struts or Maverick. This can be done not only in the beginning of the development of a product but also much later on, when UI framework is already in place, but a new piece of important functionality would be much faster to implement using “dirty” simpler methods. Usually these first cuts enable the rest of the backlog to be implemented and then at some point Cut 2 puts the story under the concrete of the framework.

11 comments:

  1. Currently we will touch another common class of stories – those including much of the UI work. Conveyor Systems

    ReplyDelete
  2. Formulation of an Assignment Help - This is the key level where the presented solutions are strategically placed. The plan is to apply a small procedure whereby the derived answers can be applied with maximum effectiveness. Assignment Help - Assignment-Corp The method can further be segregated under 3 categories, namely, The step involves performing multiple sources whereby data can be saved for the goal of deriving correct conclusions.

    ReplyDelete
  3. I came across your blog internet site on google and check a few of your earlier posts. Continue to keep up the extremely good operate. I just additional up your RSS feed to my Windows live messenger News Reader. Seeking toward reading much more from you afterwards!?- putlockers

    ReplyDelete
  4. As a matter of fact I am looking for sonnet related blog entries and by coincidentally visited your site.This post is extremely educational and you have posted such valuable and useful article which gave me parcel of data. I trust that you will keep it up and we will have increasingly useful and helping news from you. By and by thank you such a great amount for your post. Write my Essay provides writing help for those who seek help from them..

    ReplyDelete
  5. Say the words "technology management", and some people have a look of puzzlement on their faces - they have no idea what the term means. Basically, technology management follows the same course as other strategies applied in the workplace in order to further the success and sustainability of a company or organization: Planning, organizing, staffing, implementing and monitoring/evaluation. The one difference is that in technology management, you add the "technology" factor to the mix. อนิเมะ

    ReplyDelete
  6. Thanks for sharing the step-by-step instructions. I used to get useful information here and share my own recommendations. Which I can also get on this site .

    ReplyDelete
  7. If you have a question regarding your order or the help itself ( http://josepe.populr.me/write-my-business-report-quick-tips-for-beginners ), you can communicate with 24/7 customer support by phone, email or online chat. You can discuss the order and easily track its progress directly through the website 24/7.

    ReplyDelete
  8. This comment has been removed by the author.

    ReplyDelete
  9. This comment has been removed by the author.

    ReplyDelete
  10. เปลี่ยนสวนหลังบ้านที่รก ดูเเล้วไม่สบายตาของคุณได้ง่ายๆ ด้วยเทคนิคตกเเต่งสวนหลังบ้านด้วยพืชไม้นานาพันธุ์ เทคนิคดีๆจากทาง guide2job ดูข้อมูลเพิ่มเติม เว็บไซต์สำหรับคนจัดบ้าน เเต่งสวนโดยเฉพาะ เพราะเราได้รวบรวมทริคเเละเทคนิคต่างๆ เกี่ยวกับการตกเเต่งไว้ที่นี่เเล้ว เชิญเข้าชมได้แบบฟรีๆได้เลย.

    ReplyDelete