Prototyping

Essentials of Adobe XD

Want to learn how to use Adobe XD in your workflow? I will be giving an online training course through UXPA on August 1 and August 8, 2018. This workshop will first introduce you to its design tools, once we have our design in place, we will use its built-in prototyping features to create an interactive demonstration of our design. We will go further by showing how we can share our concepts with teammates, clients or even conduct user tests. Finally, the workshop will teach you how to take your project and export the content to the development team, as well as create a design spec.

Register Now

Price: Students: $70; UXPA International Members: $280; Non-members: $500

Course outline

Session 1 Session 2
  • Welcome and set up check
  • What is XD?
  • Overview of the UI
  • menus
  • tools
  • property panel
  • UI kits
  • Creating Artboards
  • Working with vectors
  • Working with text
  • Working with bitmaps
  • Understanding layers
  • Using symbols
  • Exploring the assets panel
  • Using the repeat grid
  • Working with other programs
  • Using CC libraries
  • Exercise: create a simple five screen design.
  • Prototyping
  • Creating interaction flow
  • Adjusting transitions
  • Previewing the prototype
  • Recording a walkthrough
  • Previewing on Device
  • Sharing a prototype
  • Reviewer comments
  • Manage links
  • Exporting assets
  • Creating a design spec
  • Using Zeplin with Adobe XD
  • Wrap up

Prototyping with Bootstrap workshop at UXPA 2015

logo

I am excited to announce that I will be giving a workshop on Monday evening at the upcoming UXPA conference entitled: “Rapid HTML prototyping with Bootstrap”. Registration for the conference is not open yet, but there are only 10 slots available. I am really looking forward to leading this workshop. Hope to see you there!

Details at: http://uxpa2015.org/

Multidevice Prototyping with Ratchet

Ratchet

My third lynda.com title has been released! This time I am presenting on “Multidevice Prototyping with Ratchet“. Here is the course description:

Learn how to prototype apps that look and act just like native iOS and Android apps, with the simple HTML, CSS, and JavaScript components included in the Ratchet prototyping framework.

If you are wondering what Ratchet is, it is mobile framework from the folks who brought you Bootstrap. 🙂 If you are a lynda.com subscriber, please check it out. If you are not, sign up for the free trial.

 

Like a Pro(totyper): Prototyping for Lean UX

sandchi

Like a Pro(totyper): Prototyping for Lean UX

I am pleased to be on a panel discussing one of my favorite topics, prototyping! Here are the details about the event:

Wednesday, October 29, 2014
6:00 PM to 8:30 PM
The Creative Group
4225 Executive Square, Suite 300, San Diego, CA

Happy October, UXers! We hope you’re keeping your cool during summer’s last stand, and maybe vacationing someplace where the leaves do that thing that leaves are supposed to do this time of year.

This month, we’re proud to offer up a panel of professional prototypers. These designers do prototyping in their daily work, either as their primary role or a fundamental part of their process. They often work within lean UX teams to design and test in collaboration with more traditional UXers. You’ll get to pick their brains, learn more about prototyping as a methodology and deliverable, and get advice on how to incorporate the practice into your own work.

This idea came from our Intuit lab tour event — which hey, by the way, thanks for attending! — where we heard a lot of feedback from folks who wanted to know more about the UX prototyper role that Intuit hires for. You’re smart cookies to be curious: prototyping is a hot topic these days, steadily gaining traction in design circles, and sometimes even replacing wireframes and mockups as a main deliverable. And since caring for our community is the name of our game, we wanted to throw together a little something to help you learn more about it.

We rounded up an awesome group of designers to make this possible, including:
Hooman Anvar
Principal, Hooman Anvar User Experience Design and Strategy

Adam Armstead
Senior Interaction Designer, Intuit, former Design Manager at TakeLessons

Elina Kim
Experience Design Prototyper, Intuit

Heather Daggett
Senior Experience Design Prototyper, Intuit

Chris Griffith
Staff Engineer, Qualcomm UX

And our shiny new president, Paul Hong, as moderator.

Beverages and light appetizers will be served.

RSVP now to ensure you get to attend!

Park in the 4225 parking structure just across Executive Square from the 4225 building. Your parking will be validated.

Prototypes, Process & Play Conference

p3

I so wish I could attend this conference, but alas I will be in the recording booth at lynda.com

Spend 3 days focused on advanced topics and leadership skills for designers and developers. You’ll learn from the wisdom and experience of brilliant professionals who have been there, done that, and have shown others how to do it, too. All of this happens in one of the coolest places in Chicago—The Museum of Science & Industry!

Why Prototyping Matters!

As a prototype for over 15 years, I certainly understand the value of creating them. I can go on for hours recounting tales of wonderful discoveries that prototypes found, or the issues that were corrected before they became too costly to fix.

If you are trying to add prototyping to your team’s workflow, take a moment and read my friend Stacey’s thoughts on prototyping! She captures some of the hurdles that one can face, and the rewards.

Flash Catalyst: Gallery & Datalists

When working with Flash Catalyst, often you will use the Datalist for displaying content. What is not always clear is how you can interact with each item in the Datalist. Let’s start with a simple Datalist of five photos.

The user can click on a photo, and view a larger version of the photo and some other information. But how to do this?

Gallery Details Sample

With the Datalist selected, go to the Interactions panel, and add an On Select interaction:

Interactions Panel

Now the additional setting that will make all this work, is the last option, “When a specific item is selected”. You will have to add an interaction for EACH item in your Datalist (this is where knowing ActionScript would play off, as you could write a simple event handler for this). Starting with 0 for the first item (programmers love to start counting from zero), keep adding interactions, and adjusting the item value.

Now you might encounter the 20 state limit of Flash Catalyst, so some up front planning might be needed to wrap the content within a custom component to work around that issue. (Again, if you were programming this design, you would have a template UI that is automatically populated via code).

On the state that displays our larger photo, I have included a Close button to return the user to the initial gallery screen. But there is a slight issue that the item we clicked on in the Datalist is still showing in a selected state. This is not the best user experience. To unselect the Datalist, we need to add an Action Sequence.

Again, with the Datalist selected on the Gallery screen, go to the Interactions panel, and Add Interaction – On Select. Now change the action to Play Action Sequence. Leave the last option to”When any item is selected”.

Now, select the Timelines Panel in the lower left. You should see an item under the Action Sequences panel. Select this item. The timeline will show an empty Action Sequence. There is a button along the button that says “+ Add Action”. Click this menu, then choose “Set Property”.

Available Actions

This will bring up the Properties Panel:

Properties Panel

Set the property to “Selected index” and the value to -1. Flash Catalyst uses -1 to mean that nothing is selected. Now when the user clicks on a photo, the selection state is forgotten.

Here is what a interactions panel will look like for a Datalist with 3 items clickable. Note that the Play Action Sequence is the last item in the list. If you place it before the Play Transition actions, it will not work.

Sample Interactions Panel

Here is a quick sample FXP that you can look at and play with.

Adding Keyboard Navigation to a Flash Catalyst project

Sometimes you might want to use the keyboard to control your Flash Catalyst application, but keyboard input is not directly supported. But with just a little bit of ActionScript code, you can create a prototype for navigating via your keyboard.

The first step is to create your Flash Catalyst application like you normally would. For this example, I have built a simple image viewer. Each image fades in, and a caption then fades over the image. Each adjacent state has a set of transitions applied to them. Don’t forget to have a transition to and from the first and final states.

Now, let’s import the FC project into Flash Builder. Remember to use Project > Flash Catalyst > Import menu and not the File >Open menu. This method preserves some of the metadata that Flash Catalyst uses for round-trip editing. In the Project Explorer, locate the Main.mxml file and open it.

Depending on if you have added any interactions, you might already have atag near the top of your file. If not, you will need to add it to your file. The first thing we need to create within this tag is a list of all the states that are used in the application. We are going to store these values in an array named theSlides.

private var theSlides:Array = ["State1","State2","State3","State4","State5"];

If you have forgotten what you named them, look for thetag in the Main.mxml file and you will see them listed.

We need to create a variable that will store the index value of our current state. Like I have written before, programmers love to start counting from zero, so the first state is actually 0 and 1. Since the number of states is not going to change, we can also store this value as well. It will be used to determine when the state is reached.

private var theCurrentSlide:Number = 0;
private var theNumOfSlides:Number = 5;

With our variables set up, we can now turn our attention to adding the code that will listen for our key press event. This is a three-step process. Your FC application might have an application_creationCompleteHandler function. If not, we need to add an attribute to thetag and write the function. For thetag, you will add this new attribute at the end.

To add this function, return to thetag, and after the variables that we defined, add the following:

protected function application_creationCompleteHandler():void
{
}

In this function, we will define the initial state of our application

currentState='State1';

Next, we need to add our basic mouseEvent listener. Wait, I thought we were going to be using the keyboard and not the mouse! The funny thing is for this to work correctly, we need to give focus to application, and not the browser. Hence the need for this bit of code:

this.addEventListener(MouseEvent.CLICK, clickHandler);

On the next line we can add our event listener for our key events

this.addEventListener(KeyboardEvent.KEY_DOWN, slideChange);

If you see little yellow triangles in your editor next to these lines, don’t fret. These are just warnings from Flash Builder saying that we have not written the functions that our event listeners will call when triggered. So, let’s fix these problems.

First, we can add the function to handle the mouse click event, and give our application the focus it deserves.

private function clickHandler(event:MouseEvent):void
{
    stage.focus = this;
}

Now let’s add the final piece of the puzzle, the keyboard event handler. This function is a bit more complex, so hang in there as we walk through it. The function looks similar to our other functions we have added:

private function slideChange(evt:KeyboardEvent):void
{
}
You might notice that this function accepts a keyboard event as a parameter. One of the items within this keyboard event is the numeric code that identifies which key the user pressed. The left arrow key’s code is 37, the right arrow key’s code is 39, the up arrow key’s code is 38, and the down arrow key’s code is 40. So with an if-else statement we can act properly upon each key press. Here is the framework for this:
if (evt.keyCode == 39) {
} else if (evt.keyCode == 37) {
} else if (evt.keyCode == 38) {
} else if (evt.keyCode == 40) {
}

Now that we have a framework, we need to apply the logic to change our application to the proper state. To advance to the next state, we need to increment our counter by one. Then we need to check if we have exceeded the total number of states (or slides). If we have exceeded, we then need to reset the counter back to zero. Once our counter has a valid value, we can look up the name of the next state, and tell our application to change to it. Here is the code for this:

++theCurrentSlide;
if (theCurrentSlide == theNumOfSlides) {
   theCurrentSlide = 0;
}
currentState = theSlides[theCurrentSlide];

If we want to view the previous state, the process is almost identical to the code above, we just need to subtract 1 from the counter, then check that the value is not less than 0. If it is, set it to the last index value. (Remember, programmers start counting from 0, so the last index value is actually 1 less than the total number of states).

--theCurrentSlide;
if (theCurrentSlide == -1) {
   theCurrentSlide = theNumOfSlides - 1;
}
 currentState = theSlides[theCurrentSlide];

For the up key, I have the application return to the first state. Conversely, the down arrow sets the application to the last state. I did not create transitions for these state changes, so the visuals will just pop in.

And that is it! It may seem like a lot when you write it all down, but in reality it is just a few lines of ActionScript. Here is FXP of the project, and here is the example working.