As a user, I would like to know where I am at any given point in the permit purchase process.
Opened this issue · 19 comments
Notes
Acceptance criteria
- progress bar or other type of visual indentifier present
Tasks
- design based on user research (Jane, Bryan, and Nate)
- implement design (Will)
- hide progress bar if season is closed (will)
- TTS approval
- PO approval
Definition of Done
- Code unit / e2e tested and comply with QWASP
- No new security vulnerabilities
- Internal team code review
- Documentation / readme.md / CircleCI updated
- Docker updated
- Compare finished design with mockup
- Usability tested
@MelissaBraxton @tram - Please see below for the permit process progress indicator. This non-clickable component uses the icons from the homepage for consistency and as the user moves from page to page, the green bar will progress. With the first step already done when the user gets to this page, the progress will move to the half way mark. With the last step being multiple pages in size, the green bar will progress in smaller chunks until the user gets to the end. Thinking that this would not show up within the pay.gov step as that is a separate site but show the progress bar fully complete at the confirmation page after pay.gov. Thoughts?
Looking good! A couple points…
- I'd recommend a verb for the middle step that is more descriptive of the action and a noun that makes it feel more important and non-skippable. I'm spitballing here… Something like "Learn the fine points", "Prepare", "Learn the policies", "Learn and prepare"…
- That first movement of the bar from Step 1 to Step 2 suggests to the user how long the entire process will take. Broken down like this, the purchaser will think the process will go much more quickly than it actually will and is bound to be disappointed. Generally, if progress bars speed up toward the end, it leaves the impression that the process was fast. The more they slow toward the end, the more the whole transaction is remembered as slow.
@ASprinkle - Reposting an updated mockup per Mark's #2 comment above and showing break lines to better show the remaining number of steps. Regarding #1, thoughts on this knowing we did spend some time last sprint on some different options?
I think this is a good first step.
It doesn't look clear to me exactly how many steps are left. While the headers are clear, the progress bar continues beyond the "buy a permit" header, and there are multiple breaks in the line. When I see that, I think "wow, I have a long way to go", instead of, "cool, I am almost done".
Is there a way to add an arrow or something to the progress bar to indicate the direction of the next step?
Is there a way to add something that indicates that buying the permit is the end of the online purchase process? Should we add an envelope or some kind of icon that says "check your email" or print your permit.. or something along those lines?.
At the same time - It's important to keep the header clean.
As the user scrolls down the page, are they going to still wonder where they are in the purchase process if they cannot see the steps?
@ASprinkle - Have added a bookend (Check email) to the progress bar like you referenced above. I think that's a good idea. Have also added more focus to the breaks in the progress bar to better show what's left as well as the arrow to give the progress bar some direction. I think we want to show the user how many "steps" are left rather than not to make them aware? hence the breaks. As far as being able to see the progress bar at all times, am thinking since progress doesn't increase until you move to the next page, it is fine to just include at the top.
@MelissaBraxton @tram - Here's the updated version per discussion we had in yesterday's design meeting. Please provide and feedback you see fit.
I prefer the 1-6 bubble tracker over the previous version.
I think this is a great direction! Can we explore options that don't push the content quite so far down the page?
Here are a couple options @MelissaBraxton - One with the nav included as the first content in the body (Option A) and the other keeping it right aligned before the content (Option B).
I had some more thoughts on this last night.
I think showing 6 steps for the 6 screens people will move through makes the process appear overly complicated. I still think we can reduce this to fewer steps, as I don't think its necessary to indicate progress through every single page. (Even the Delta example we looked at the other day consolidates several screens into a single "flights" phase). This will allow us to make the entire graphic a bit smaller and maybe reduce the space between the dots so that we can put it online with the breadcrumbs. At the very least, we could consolidate down to these 4:
- Choose forest
- Permit details (includes progress through Forest specific info page, permit data entry form, and rules)
- Payment
- Print permit
We could also consider removing step 4, but then we lose the opportunity to reinforce the "print" action, so I'm open to other thoughts on this.
A few other tweaks:
- We should indicate the directionality of the flow. Consider adding arrow heads to the connectors.
- We should signal to users the difference between a step that's been completed and the step that they're currently on. Consider changing the state of the completed step from a number to a check mark.
@MelissaBraxton - I like the checkmark idea to differentiate completed steps. I also think the "print" step is a good step to keep. Like Mark brought up the other day, its preparing the user to what they actually will need to do at the end of this process. Please see updated version below.
@MelissaBraxton @ASprinkle - Here's the updated version we just discussed (making the current step's circle larger and center aligning text under the circles).
I think that looks really great @npage123
I look forward to seeing it on staging!
@tram - With Melissa out for the time being, would you be able to provide some feedback on the latest version of the progress pattern (above) please? Also, we may have an issue with it not being able to be on the same row as the breadcrumbs which was something wanted to avoid empty space. I know we discussed previously the possibility of removing that last step to save some horizontal space.
Apologies for being slow to respond on this one!
- Given that the breadcrumbs only go three levels in, I am surprised it will not fit on the same grid line as the breadcrumbs (even for forests with really long names). We also discussed making the progress bar disappear on mobile and smaller formats, so wrapping on mobile won't be an issue.
- Further refinements - I think it's a bit more eye catching than it should be, given it's relative importance to the other content, and it throws the visual hierarchy a bit off. I'd recommend lightening the overall appearance - consider using using a finer pt. line and having the circles outlined in green, rather than filled.
- I did have a thought re: focusing people on the current step - instead of making the current step larger, we might consider using the "focus" dotted line that's in the standards, but I'm open to other ideas.
@MelissaBraxton - I like the idea of using the focus pattern. A more subtle visual cue but effective. Please see updated version here. Will also brought up using a dotted line in between the steps to better match the dotted lines used on the landing page.
@MelissaBraxton - Updated screenshot.
LGTM!
I think that looks great!! I have been away much of the last two days, so I assume there is reasoning for no longer being on the same grid line as the breadcrumb. I am interested in seeing what users think about reading through the breadcrumb, progress bar, menu and page header.