Creating the User Screen Flows
Last updated
Last updated
Used Research Methods:
Relevant Research Questions:
What technological solution at the Fontys Strijp TQ building can be used to stimulate the productive feel of the building users?
In the last chapter, the buddy components were mentioned. Before I could have an informed choice of the hardware components (ex. how many physical buttons for interaction to have), I had to decide on the user interaction and based on the required actions, decide how many physical buttons I needed to order. Hence, this entry is dedicated to the creation of the user interaction flows in the manner of the buttons to which any action is assigned.
First I created an overview of all the screens that I needed for the buddy. The image below displays all the types of screens the buddy covers. The numbers on the left are shown on the other flows that are covered in this chapter. Generally, the screens are divided into four categories:
Time pickers - the screens that let the user pick a working time.
Time Counters - the screens that give the user feedback on how much time has passed/is left of their working time.
Notifications/Dialogues - those screens give feedback to the user on specific events - like noise or time for break alerts.
Animation - those screens are extra animations that add to the experience but are not needing any buttons.
As all the screens were covered, I created an overview of how and when every screen would load in the manner of the Scenario flows (covered in the last chapter).
After covering the full user screen flow, I needed to create a flow for every one of the above-mentioned screens and decide how the actions of those screens are connected to the physical buttons. In that way, I could decide how many physical buttons I needed for the buddy's hardware.
I would be using the screen "1.1 Working Time Picker" to explain how I have connected the buttons to the logic of the flow. This screen is shown whenever the students are at their working table and are starting to work. The example below displays the connection of the buttons as a flow. In a yellow circle, I have shown a reference to the physical buttons. As visible, every button leads to a specific action: left, right - iterates through the time presets; clock - accepts the choice; x - cancels. At the top left corner, I have put how many of the buttons were needed (as in some places not all buttons were needed.)
Visually the flow can be represented with the following wireframe. On the left of the image below, I have shown the (num.1, blue) predefined time picker on the screen (the face of the buddy) and (num.2, pink) - the physical buttons. On the right, I have put an explanation of the role of each button.(it was already explained in the flow).
In this way, I created a flow for each of the screens, covered in Definition of the Screen Types.
The above-mentioned sketch was used and the users picked option B as it was more consistent with the way the time picker worked.
In the end, I had a flow for every mentioned screen and I could conclude that the four buttons that were shown in the wireframes, are enough and would work for every user screen flow.
If you want to see all the screen flows: User Screen Flows.
As both the scenarios and the screen flows were decided, it was time to use the new knowledge and ideate on proper hardware that can support both the needed requirements.
Workshop: Thinkering
Lab: AB Testing
For some interactions, I was not sure how to proceed. Therefore I created two options and asked my target users which options A or B would be more natural for them. An example of such an occasion was "Screnn 3.1 Break Extend Dialougue". There I could toggle between the two options (break and extend) with the <- -> button, or directly use , and assign them to the two options. The two flows look the following way:
