December 31, 2019
Marvelapp Masterclass Part 2: 7 Tricks To Improve Your Workflow Experience
As part of this two-article Marvelapp masterclass tailored for Topcoder, my intention is to show you what tricks you can use to enhance the workflow experience through Marvelapp. Welcome to part two. In part one, we studied the reason why you should focus on creating an experience instead of a plain screens navigator.
We previously learned that it’s wise to align the prototype experience with the solution for the design problem. It sounds simple, but how can we achieve that? What is so special about Marvelapp that can help me with this? Well, it’s not just Marvelapp, it’s the combination of its capabilities plus your intelligence to carefully select paths that convey the user’s goals. Let’s see seven simple tricks we can use.
WHAT’S THE PROBLEM?
As seen in the first article, we had a design problem to solve. Let’s refresh this problem before we move forward
Exercise:
Let’s say the spec asks to create a website redesign which includes the following:
A jaw-dropping landing page.
A set of content pages for all the services they offer.
The ability to quickly navigate through all the services.
There is a problem with the current experience, users are not getting the idea of how this company works. In order to try to solve that problem, there are insights that show that creating a “How It Works” page, solely dedicated to breakdown the business model, would be more convenient to achieve conversions.
It’s important to easily get to a how it works section.
Quick Glossary:
Hotspot: dimensional space used as a clickable area to click or hover the UI.
Transition: type of effect to navigate among screens.
Section: fragments of the project that allow you to organize content or - segments by theme, navigation or sections.
1. COMMUNICATE THE IDEA
Our starting point is our launch pad, but before launching the rocket we need the countdown, to communicate. It’s healthy to assume that clients have never used Marvelapp, so how do you communicate that you created a special workflow experience for them? Some people think of commenting as a basic feature but for our purpose it becomes a powerful communication tool to explain the design decisions to the customer. You should always wonder if it’s worth adding comments to your prototype and when.
Here are a few examples where comments are beneficial:
When you want to add comments on your first screen to explain the overall approach and thoughts.
When you create an alternative screen and want to highlight the differences / advantages.
When you want to share a short video of how the user will interact with the application.
✔︎ Do:
Add comments only when it helps clarify the user experience.
Link the comments to specific design features.
Add a Marvelapp comment on your first screen to explain what the workflow is about and how it solves the client’s problem.
✘ Don’t:
Don’t add too many comments, as the customer might not have the patience to go through them all.
2. GUIDE THE USER
What’s the best path to take the user from point X to point Y in a frictionless fashion? Well, that’s a design problem, not a prototype problem. In order to get there, you have probably done lots of research, sketches, designs, and testing. Now that you have it ready and uploaded to your Marvelapp project, it’s time to fool around with the journey to success.
Ask yourself what are the most important paths I must cover? Now that you wrote them down, trace your screens and notice which links or actions will lead the user there. The key is: place only those as hotspots!
Caption: Guide the user from the landing page to the how it works page.
✔︎ Do:
Define a frictionless path aligned with the goals.
Define an X screen (home/dashboard) and Y screen (success/desired screen)
Place hotspots in locations that will lead the client to see how you solve the design problem.
Provide a way to access other important sections after the client reaches Y.
✘ Don’t:
Don’t add all the available hotspots to the X screen.
Don’t deny the user the choice of going back to the X screen.
3. MAKE GOOD USE OF GLOBAL NAVIGATION
When you have a website or app that uses the same navigation pattern, let’s say, home + products + contact us, you will be tempted to create hotspots to each one of these pages in all the mentioned pages.
Duplicity is not your friend. Save time by implementing a master or global navigation. It allows you to create a collection of hotspots one single time, then implement instances of this header to make it easily available in many other pages. One of the sweet advantages of using global navigation is that once you change the destination of one hotspot, it also changes in all the pages that use it. Technically (and ironically), this feature is known in Marvelapp as a “duplicate” hotspot. We can see here how to use it.
Caption: Time-saving gunpowder!
✔︎ Do:
Limit creating mastheads for navigation only.
Nest sub-navigation with mastheads too.
✘ Don’t:
Don’t waste time creating single links when you can group at least two hotspots at a minimum.
4. USE TRANSITIONS WISELY
There are several types of transitions available in Marvelapp, from classic fade in-out to flipping screens. You may feel tempted to use transitions in innovative ways, however, you must be wise. Transitions need to make sense and you must consider the target device; is it desktop or mobile? Does it make sense to make a website page slide in from left to right? Doesn’t sound right, maybe for slide panels, yes, but for pages… hmm fishy. On the other hand for mobile there’s more room to experiment, including with gestures! But again, wisely remember that there are existing patterns. If you plan to make the user try something new, there could be friction on the adoption of new features.
Caption: Drop-downs never looked sexier.
✔︎ Do:
Decide on transitions or gestures based on the target device.
Use slide transitions for panels.
Use fade transitions for overlays.
✘ Don’t:
Don’t overwhelm the experience with meaningless transitions.
Don’t use time triggers, they are proven to confuse the experience. Use click instead.
5. FIXED HEADERS CAN IMPROVE THE EXPERIENCE
Providing a realistic experience is sensitive during the aforementioned pivotal review session. Marvelapp provides the ability to create fixed headers, footers, and navigation. This is useful for reproducing the typical sticky header feature you see mostly in a mobile experience to keep the header fixed while allowing scroll.
Caption: Let it fly.
✔︎ Do:
Implement sticky side navigations, headers, and footers when appropriate.
✘ Don’t:
Don’t create multiple fixed elements, normally header or footer is just enough.
Don’t over select the fixed area allowed by Marvelapp.
6. MODALS CAN BE REPRODUCED
Modal overlays and dropdowns are one of those items that tend to create noise during the review experience if the client doesn’t have access to them or if it’s not evident how to access their triggers. Lucky for us, this behavior can be achieved in Marvelapp.
Caption: Voilà, it’s that easy.
✔︎ Do:
Export your modal as a transparent PNG file.
Add it as another screen in your Marvelapp project.
Keep modals and overlays as part of a separate section dedicated to assets.
✘ Don’t:
Don’t put a modal screen as the first element to see in the prototype.
Don’t make modals show up as hover options, it’s better to make them clickable (even if you mean hovering).
7. ORGANIZE YOUR CONTENT
Marvelapp provides a mechanism of classification that will save you time. You can group screens into sections, label them and set the order of screens as you wish them to show up when the client is navigating.
✔︎ Do:
Group sections by experiences (purchase, login, etc).
Add the set of screens that create a path of each experience, e.g. purchase experience contains login, home, add product to cart, overview page, payment, and success.
✘ Don’t:
Don’t provide a single section for the complete project.
Don’t create a section for each page.
ABRACADABRA
For your convenience, I created this example project in Marvelapp where you can see all these tips in practice:
https://marvelapp.com/82aaafb
If you would like to see the project organization to take a look at the hotspots, navigation tricks and modal implementation, do not hesitate to contact me, I will gladly send a duplicate version to you. Here is my inbox: mahestro.topcoder [at] gmail [dot] com.