UI Access, Interactions, and Page Flows
Overview
You have determined your app users, the app's functional touchpoints, and how you will report on and secure your app data. Now, you will detail page flows and design wireframes to visualize the user experience. At this stage, you will use all of the information that you have collected to illustrate this experience. Then, you will work with your developer to refine any areas that need rethinking.
Objectives
By the end of this chapter, you will be able to:
- Determine the UI design, or displayed fields on each page.
- Determine if app will be mobile.
- Design high-level page structure.
- Determine page flow.
App Design and User Considerations
Users are the most important consideration as you design your app. They need an intuitive and efficient experience. Based on how users will interact with the app, a mobile version may deliver that experience.
As you construct page flows, consider the number of selections it takes to get from one page to another. As you mock up wireframes, review how intuitive the layout is.
Page Flows
Page flows define how users will get from one page to another. They allow you to imagine you are the user and detail the specific user experience for each role and task.
As you construct your page flows, you may find inefficiencies with your initial design. This process can help identify those inefficiencies so you can correct them. You will also collaborate with your developer to further refine your page flows.
Wireframes
Wireframes allow you to mock up a design of each page. You can show key elements, like logos or buttons, that should appear on each page. Wireframes help you visualize the experience and ultimately save time (or resources). By illustrating how users will move through the app, you can work through potential inefficiencies up front before your developer begins any coding.
Wireframe Example
Keep in mind that your app is meant to appear like it is a part of Workday, so the Workday UI will influence your app.
You can control things like:
- What images you want to include.
- What elements you would like grouped together.
- What order items appear on the page.
Due to the Workday UI, you may not have precise control over what appears where. For example, you may want to include an image on the upper left side of the page. However, the Workday UI may only allow for an image in the upper center of the page.
Widget Dictionary
Refer to the widget dictionary to view available components and which components will appear in an app. These predesigned widgets are helpful to reference as you create wireframes.
Note
: You may need to work with your developer to access this resource.Chapter Summary
In this chapter, you learned:
- Page flows define how users get from one page to another and detail the specific user experience for each role and task.
- Wireframes allow you to mock up a design of each page.