...
| Panel |
|---|
When you decide to start a project, you see this screen. It is a list of the steps of the project, with a short version of the instructions ("Print out pattern pieces", "Cut out pattern pieces", "Sew piece X and Y together"). You can click on each step to go directly to that step for easier navigation. There is also a very large and obvious "BEGIN" button that will start you on step 1. As you complete steps, you can also check off individual steps here, and uncheck them as well. This does not make any major changes to the system, but is there for the user's own benefit to help them visualize their progress.
|
| Panel |
|---|
When you are actually doing one of your steps, it looks something like this. It is primary primarily a screen that has a big illustration of the step and the short instruction for that step in large text, to make it easier to see clearly on a small screen. Detailed text instructions can be pulled up if you swipe the bottom upwards, as well as a video link for this step, if it is available. Because it can be difficult to use your hands or keep watching the screen while you are busy sewing, you can press the button on the upper right to have the detailed instructions read aloud to you. There is also a very prominent (and red, not shown in this sketch) alert button on the top right of the screen. Tapping on it will pull up common mistakes and warnings for this step. It may also flash briefly the first time you navigate to this step as an additional reminder. The bottom right contains tips and additional help. If you tap on that, it can provide links to relevant tutorials. For example, in the sewing step illustrated in this sketch, it may lead you to a tutorial on how to sew a back stitch.
You can navigate to previous/later steps by swiping left and right on the screen. |
...
The interface itself should be reasonably learnable, as long as the various text buttons are made visible and easy to find and clearly labeled. For the search/filter screen and the additional text description on the working through steps screen, it should be made very clear to the user through some kind of affordance that this can be pulled up by swiping the bottom of the screen upwards. In addition, the buttons along the corners of the working through steps screen may not be clear initially, but should be apparently apparent upon clicking for the first time. The text-to-speech button in particular may be confusing, since people think of it as a volume button, which seems really strange for a sewing screen. This could be remedied perhaps by adding a text label, or switching to a different icon that is more obviously text-to-speech(?). Another idea is to create a brief how-to-use-this-app tutorial when the user first makes an account, that runs through something like this storyboard and goes through these functionalities very briefly.
...
Having the buttons in the four corners in the working through the steps screen is efficient due to Fitt's Law. Having autocomplete when searching through patterns and tutorials would also increase efficiency. Because it would be inefficient to go through all of the steps of the project one by one to find where you left off, it is important to have the screen which shows are the steps and you can click to any one of them to get to there, as well as the resume project option in the active projects screen.
...