Placeholder Image

Subtitles section Play video

  • (bubbly music)

  • - There was a phrase that I tend

  • to regularly drop on my students and it is this:

  • Fall in love with the user, not the technology.

  • It is quite common for UX designers

  • to get caught up in the UX technology process

  • of research, mapping user journeys, creating personas,

  • and somehow forgetting there is a user

  • who will actually use the product.

  • The result is something we've all encountered.

  • We open an app and don't have a clue how to use it.

  • The result is the app will inevitably be ignored or deleted.

  • This is exactly why onboarding experiences are so important.

  • They help the user ease into the application

  • by providing useful interactions or simple instructions.

  • And the upside to all of this is a happy and long-term user.

  • In this example, which you can see here,

  • I am using what is called the nickel tour.

  • This design pattern uses a few short screens

  • that outline the value of the app

  • and the basics of navigating through it.

  • In this case,

  • we will assume it is an app for Canada's Georgian Bay,

  • designed to allow people to explore

  • what they can do when they visit.

  • In this case, the onboarding screens

  • are a medium fidelity version of the sequence

  • and as you can see, it's prepared in sketch.

  • Each card has a short headline, a dramatic image,

  • and a concise explanation of activities to pursue.

  • As well, the dots down here give the user a visual clue

  • regarding where they are in the sequence,

  • and the skip button at the bottom

  • allows the user to bail out at any time.

  • In short, there's a lot of user love here.

  • The problem with sketch is that it is static.

  • We can't prototype the user

  • dragging between the onboarding screens.

  • Thus the decision to create that interaction

  • in Adobe Experience Design.

  • Okay, so why XD and not such applications

  • as UX Pin, Principle, InVision, or any other tool?

  • Simple.

  • Nobody cares how you did it,

  • they just care that you did it.

  • So we need to prepare the sketch project for XD.

  • Now, the first thing to realize is

  • you don't need all three screens.

  • XD can directly open a sketch file

  • and all elements will be in place and editable.

  • To accomplish this, I simply drag the paddling

  • and the hiking cards into the climb art board.

  • These are going to be common to all the art boards,

  • so we don't even need this stuff.

  • So we'll just select paddle and hike,

  • and we can delete these two art boards.

  • Now, if I open the layers panel here,

  • you can see that everything is in place.

  • I'm just going to move this bars to the top.

  • I prefer to do that.

  • And you can see that each group is in place

  • and sort of in the order they were down at the page.

  • So all you have to do is to save the file and open it in XD.

  • (bubbly music)

(bubbly music)

Subtitles and vocabulary

Click the word to look it up Click the word to find further inforamtion about it