Iteration 4
September 10, 2022
![Iteration 4](/static/2f8f13f2fff5b6f866640e2d9515b72e/92b8e/main-screen--tabs-with-previews--form-factor.png)
Iteration Overview
Changes
Change | Intent |
---|---|
New navigation | Make features more discoverable. |
Add in-context help dialogs | Make the interface more accessible for new bookbinders (Nikki). |
New Feature: title page | Build out an expected feature, implemented relatively easily. |
Book navigation | Make navigation of the book less cumbersome and less glitchy. |
Inputs informing this iteration
- 3 peer reviews
- ~30 graduate students working in groups tested the app and wrote usability reports, graciously introduced through a colleague who taught user experience design at her local university. They provided the rawest of feedback, for which I was very grateful.
New Navigation
For greater feature discoverability
About half of the notes received from the usability reports centered around the discoverability of features. Participants did not easily find things such as changing the number of pages or setting the pattern.
Before
![Before, tabs were identified by icon only, making feature discovery difficult. Before, tabs were identified by icon only, making feature discovery difficult.](/static/e721678bc3832a14586a4557e882a31e/07a9c/main-screen-0.3.png)
After
![After: Folio Forge “feeds forward” more cues about tab contents, including a visual of the primary setting in each tab as the user hovers over it. After: Folio Forge “feeds forward” more cues about tab contents, including a visual of the primary setting in each tab as the user hovers over it.](/6a7026e62b02a83d660beaf5f5c0f1d9/new-navigation.gif)
After: Folio Forge “feeds forward” more cues about tab contents, including a visual of the primary setting in each tab as the user hovers over it.
Instead of solely relying on hovering over icons to know what each tab is, the new iteration “feeds forward” with much more information:
- Title of the tab
- A summary of the settings
- A visual of the settings
Reorganization
Additionally, I reorganized the controls to fit within fewer tabs.
![sidebar variations sidebar variations](/static/148fba46b40c3bed6dc875f89ee03902/ce034/sidebar-variations.png)
In-Context Help
Addressing participant confusion about terms and features
In the usability studies, participants were confused at certain terms such as flyleaf, signature binding, page turn direction, etc.
To that, I added two help dialogs:
Binding Options
![New binding options help dialog arrange the binding options from simple to complex and point to tutorials to find more information. New binding options help dialog arrange the binding options from simple to complex and point to tutorials to find more information.](/76410b57e64009e705c2b8c0e969f07e/new-guidance-binding.gif)
New binding options help dialog arrange the binding options from simple to complex and point to tutorials to find more information.
![The new binding options guidance dialog The new binding options guidance dialog](/static/ab8b68c934eed772f6cd1ff2b08077f5/b8c63/dialog-guidance-binding.png)
Flyleaf
![Flyleaf is among many of the settings behind an unfamiliar term. The dialog helps visualize what the choices mean. Flyleaf is among many of the settings behind an unfamiliar term. The dialog helps visualize what the choices mean.](/368fe44acb2aea92bf304c885cd08a39/new-guidance-flyleaf.gif)
Flyleaf is among many of the settings behind an unfamiliar term. The dialog helps visualize what the choices mean.
![The new flyleaf guidance dialog The new flyleaf guidance dialog](/static/99d521f5d5838c0a72e126f1d4940768/6976b/dialog-guidance-flyleaf.png)
Microinteraction: More Streamlined Decision Support
As you see with the .gifs above, the pattern to be followed in these dialogs is that they are enlarged selectors. In other words, the user can make a selection after using the guidance, and the selection will propagate to the main app once they close the dialog.
Title Page
Including a title page was often requested in peer as well as participant feedback. I hypothesize that users will expect this feature given how common it’s found in manufactured notebooks. Additionally, it should be easy to implement. Therefore, I added it to this design iteration.
![Users can add basic elements of a title page and preview the results. Users can add basic elements of a title page and preview the results.](/static/f62ce1bfe67f92d225326222f93e5bf5/669cd/main-screen--tabs-with-previews--title-page.png)
New Notebook Preview
The previous iteration used the standard page navigation control seen in PDF viewers: you type in a page to jump to and can arrow back and forth.
Not only was this strangely tricky to implement, but I also didn’t think navigating to arbitrary pages benefitted the user since all pages are identical.
![Before: Navigate to any spread using arrows and a slider, like an e-reader or PDF viewer. Before: Navigate to any spread using arrows and a slider, like an e-reader or PDF viewer.](/static/e721678bc3832a14586a4557e882a31e/07a9c/main-screen-0.3.png)
![After: Navigate only to key spreads, omitting duplicates After: Navigate only to key spreads, omitting duplicates](/static/2f8f13f2fff5b6f866640e2d9515b72e/669cd/main-screen--tabs-with-previews--form-factor.png)
Retrospective
I realized the number of new terms that Nikki, the new bookbinder, will encounter is high enough that I should add a design principle to the list:
New Design Principle
Visualize the options available to makers and guide them through their decision.