User stories are conversation starters. They are informal and bring the users into picture as opposed to tedious and lengthy requirements which are more formal and are highly objective.We write user stories as a requirement told from the user’s perspective.
An User story can be converted into a page, a module in a page, or even as a flow between different pages. But stories can be distilled down to it’s core elements, the UI controls, too. When these tiny stories are combined to form a user story,they provide more ground for opportunities and innovations to solve the problems.
Even these UI controls have histories, and they were created as a part of the solution to the problems, people were trying to solve. But the reason for their creation has been abstracted over time, and we are seeing them as mere controls now.
For example, Radio buttons have a quite interesting history. The reason them being called “radio” button is not clear though. Some say that they look similar to the options in the OMR sheets, where we need to fill a circle fully to select it. Multiple options were there, but mostly they were used to get single response for the question. And some source say that they look similar to the knobs in the radio, where pressing one knob pop the other knobs out.
Let’s see some of the controls and potential stories or conversation that could be formed based on them.
Below listed statements are something that we say to others or think inside our head when we do tasks using one of the controls. If we tell stories or have conversations while using the product or services, why not tell them before and see how it works during design phase itself.
Selection and display Controls
Button: When I tried to save the article after writing, it threw me some errors.
Checkbox: I selected all conditions that applied for getting scholarship.I hope my chances of getting the scholarship is high.
Radio Button: I was confused as to which offers suit me the best, since I cannot choose them both.
Slider: I was trying to get the price range but I am not able the select the accurate price. How do i select the exact amount?
Drop-down: Oh !!.This movie runs in so many theatres. I didn’t expect.
Icon: I tried to copy the content, but i got a new document opened instead.I am not sure what it means. I need some explanation as what it tries to convey.
Date Picker: When we went to the cinema, they told we didn’t book the tickets for that show. I checked again,My bad, I had selected the nearby date by mistake.We have to go tomorrow.
Time Picker: Hey bert! Please be careful to set the reminder for AM. I had set the alarm for PM and I slept nicely.
Menu: I have to save this document as PDF. Where do I go and find the option?
Navigation Controls
Navigation Menu: There is no useful information in this page. Let me go to the home page and find if I can get something useful
Links: This question is not interesting. Let me check these related questions
Tab: There are too many sections.I am confused.
Breadcrumb: Where am I?.I am in mobile detail page. I need to find the mobiles listing page.
Pagination: There are too many results. I need to go to the last result.I might start from there.
Tags: I don’t remember the exact category, let me check if I can find anything related.
Search Field: Give me a minute.I am just looking for the hotel that my friend told me over phone.
Image Carousel: This resort looks quite interesting. Shall we check it’s full details.
Input Controls
Text-box: Oh jeez. I forgot the correct name. Shall I fill it afterwards.
Combo-box: Oh jeez. I forgot the correct name. Let me try, it starts with s, and, oh! here it is.
File Upload: Tim, Please change your profile picture.I have your latest photo in my photos folder.
Output Controls
Tooltip:
Victor: Hello Madam, I am not able to find any details related to the price in this page.
Support team: Sir, Please hover over the “i” icon.
Label: I am clicking on the text and nothing is happening, but I am able to select the text. Please help.
Progress bar: Only 2 more steps to go, we will finish soon.
Status bar: We have completed 35 pages so far, only 10 more pages remaining.
Notifications: The image that we sent yesterday has been processed successfully. I just came to know now.
Message box: Hi John, Yeah I am pretty sure. I closed the tab only after the transfer was successful.I don’t know what is the issue.
Container
Accordion: Go to the help page in the website. Frequently asked questions are in the same page.They are all collapsed. You can expand them to find the answer.
Modal Window: The feedback keeps on coming in the middle and interrupting my workflow. How can I turn it off ?.
Dialog box: You need to confirm before moving to the next page, or else you cannot proceed and there is no alternate way.
Palette window: Hey Rahul !I guess you are using this application for the first time. You can draw, edit an image, paint and do whatever you can in this app. You will be finding different tools in this section.
Scenario
Let’s consider the user saying, “I am lost” while navigating through different sections in an E-Commerce website. What could be some of the possible options to help him or her?
- Browser back button
- Logo in the top menu that takes back to the home page
- Bread crumbs
- Menu options in the top menu bar
These smaller stories or conversations could help in realising the bigger picture — the user stories
