I was sick for this lesson but that will not stop me from my quest of teaching folks how to make toast. Following the flowchart and storyboard, we then had to create a UI flow, a sitemap, and then quickly sketch out an interface design.
UI FLOWS
This shows the flow of the user interface. They’re important for visualizing an interactive and how well it flows. I simply implemented the steps from my storyboard into the UI flow. There are small arrows to indicate the next page a user clicks through.
EXTENDING CONTENT
After making this quick sketch, you can see some possibilities of adding extra content. With extending the content we can add information and further educate the user on their toast choices. From the waiting card, there could be an extension about your toast not being cooked enough, with instructions on how to acquire your ideal crunch. When the user picks the amount of bread, there could be additional information on types of bread, what types toast the best, how long for each type, etc. In the final card, information about toppings could also be added.
NAVIGATION AND SITEMAP
After this we had to take our maps, list any primary and secondary navigation elements and then produce a site map. Primary navigation elements follow the normal linear sequence of toast making, secondary elements are for branching out with the extended content options.
Primary Elements:
- Start (first step)
- Next
- Back
- Done (last step)
Secondary Elements:
- Not toasty enough/adjust toastiness?
- Type of bread?
- Toppings?
These make up the interactive part of the site and provide users with control. The primary and secondary elements must now be implemented into a sitemap, shown below.
INTERFACE DESIGN
Once a sitemap is created, it’s then time for the interface design. I made a rough sketch of my interface so I can see where to place the elements and to help me visualize the end product.
In creating this I gained a broader view of the design and saw places where things could be improved onto a digital mock-up.
Prototypin' 