Next (and before #AEASF lunch LOL) is @kryshiggins about designing better onboarding. How do you balance understanding with “engagement” and features and prompts?
If we act on our fear (that our users will miss something!) then it can lead to unhelpful solutions! If you front-load instructions, they’re hard to remember, out of context, and have questionable value. @kryshiggins#AEASF
And framing is important. If you give people ALL the instructions up front, it can give the impression that a task must be super hard! Plus they’re costly to maintain. @kryshiggins#AEASF
Better onboarding is about guided interaction, not front-loaded instructions. It means:
- Anchoring info to action in context
- Onboarding users at their own pace
- Integrating guidance authentically instead of tacking it on
Guided interactions can mean putting call to actions in context, when your user can truly understand what they can get. Ex: @canva encouraging signups only after a new user has made and saved a graphic, so they can edit later. @kryshiggins#AEASF
Consider how you’re measuring onboarding success. Less signups and clickthrus, more retention and engagement. Onboarding ends when core use begins, when a user sustains their needs while contributing to the product. @kryshiggins#AEASF
You’ll need to figure out what actions define “core use,” then create a user journey with actions. Determine the prompt for an action, what work they’re doing, and what sort of follow-up they need. Think about what guidance the user might need at each stage. @kryshiggins#AEASF
When you create guided interactions in context, this gives users way more flexibility in how they use your product! And remember that a better onboarding experience comes from a good product design. It’s not just something tacked on that fixes everything. @kryshiggins#AEASF
Remember the basic of good product design before you consider extra fancy UI patterns: concepts, content, navigation, affordances, tutorials. @kryshiggins#AEASF
Beware onboarding overlays. If they interrupt a task, 90% of users will just ignore them! Plus overlays are likely to collide with each other since they’re designed in isolation. (Not to mention a mess for screenreaders!) @kryshiggins#AEASF
Ex of guided interactions just for new users: an in-field prompt to “tab” for Gmail smart replies, along with a tooltip off to the side of your composer window. The longer you use Gmail, eventually the prompts disappear. @kryshiggins#AEASF
Guided interactions can also help users of all levels. Brand new Notion users are shown a particular blank page template, with prompts. But even experienced users never encounter a wholly blank page. The default new page look different depending on user needs. @kryshiggins#AEASF
To get your team on board with better onboarding (harhar), define core use and break down *any* action they care about right now. Can try reducing overlays or front-loaded instructions, or improving an empty state. @kryshiggins#AEASF
Also try new user perspectives! Get your team using private browsing modes for a bit. Journal new experiences, and include new users in research plans. @kryshiggins#AEASF
We also need to get out of the “user education” mindset. We frame ourselves as the experts, and whyyy are new users not getting what we designed?? But we have to build products that adapt to our users! @kryshiggins#AEASF
Remember to build in ways to recover from errors. You cannot stop people from running into problems, but you can make easy ways to undo or recover from it. @kryshiggins#AEASF
• • •
Missing some Tweet in this thread? You can try to
force a refresh
Last at #AEASF (sadface) is @movie_pundit with his talk “What If People Weren’t the Product? Building a web that loves humanity.” (Yes, we gave each other high-fives about how we had talks about becoming person-oriented! 🙌)
Back in the truly olden days, we didn’t have mirrors. To see ourselves, we needed to find a still body of water. Instead, we looked at each other. @movie_pundit#AEASF
With the advent of mirrors, we suddenly became aware of how we looked to other people. The results ranged from 1st person novels to standing armies. Now the web, where “we cannot get away from ourselves” with ad personalization. We see ourselves as a product. @movie_pundit#AEASF
Here for @Folletto’s #AEASF talk about hybrid meetings. Remote collaboration should not actually default to calls or meetings. Think about if they’re sync/async or in-person/virtual, but they can be combined too.
.@Folletto wants to leverage the benefits of each approach - it’s not about not meeting anyone ever. Async can make it possible for the less boisterous people to contribute too. Ask what the outcome of this call should be. #AEASF
Also ask if the call is in the right format. @Folletto made a chart for it! #AEASF
Made it to the juicy part of @prestonso’s #AEASF talk about languages. 🏃♀️☕️ More CSS properties to help meet our users where they are, no matter what language they’re using:
- dir
- writing-mode
- lang (even mixed with another languages)
- text-orientation
- text-combine-upright
Remember to use HTML first to set the default reading direction, don’t just use CSS to do whatever you want. Set the structure first. @prestonso#AEASF
Markup that I never knew about, to help give readers of logographic languages more context about a character they might not know about: <ruby> and <rb>
Also, the CSS prop “text-emphasis” can customize text styles you want to bold, but bold wouldn’t look great. @prestonso#AEASF
Very apropo for me right now - @youngfonz is going to talk about navigating changes in your [fill in the blank] career! #AEASF
Tip #1 for navigating career changes - have patience and resilience. @youngfonz had to go outside his comfort zone seeking resources to bolster his computer science education. But it was a journey! #AEASF
Tip #2 for navigating career changes: Have a strategy. Don’t just react, have a plan. And remember to learn EQ aka “soft skills” not just hitting the books (IQ). It depends on where you’re at! @youngfonz#AEASF
Learning all about ARIA attributes with @tolu_xyz at #AEASF! Some really interesting examples about how you’d indicate to assistive technologies about what’s visually happening on a component.
Hah I like how #AEASF attendees are all 👎 about carousels! #SameTeam
.@tolu_xyz recommends doubling up in code when using native HTML landmarks, since assistive tech reads them out inconsistently. So even if you’re using <nav> it’s a good idea to also use <div role=“navigation”> to make sure all your bases are covered! #AEASF
First up at #AEASF is @adactio about declarative design! (Yes, I'm back to my live-tweeting thing!)
He's starting off with music - there's Mozart writing every note down, then there's Miles Davis doing improv. All sorts of ways to compose music, and both are considered genius!
@adactio Same thing in programming too - imperative programming gives the computer step by steps. Then there's declarative programming (like SQL), where you tell the computer the result you want. @adactio#AEASF
.@timberners_lee created the World Wide Web with the "principle of least power" - use the most efficient way to parse information. Both HTML and CSS are declarative, fault-tolerant languages. They ignore what they don't understand. @adactio#AEASF