Interaction Design and Prototyping

Interaction Design (IxD) is what most people think of when they think of UX. But it’s so much more than wireframes.

If we’ve been following our UCD process and not skipping steps, we now have our content (and strategy) as well as our sitemap and hierarchy. Interaction Design is where we design the product.

We show layouts, processes and flows, options, and errors. We typically work in “medium fidelity” (not yet visually designed). Medium fidelity keeps people focused on UX rather than being distracted by graphic design.

IxD is the execution of the idea, feature, upgrade, or product. Until this point, we’ve been working with concepts and pieces. Now it comes together and comes to life.

Interaction Design Deliverables

Wireframes can be great for documentation. They show layouts, interactions, buttons, etc…

This example is a set of wireframes we did for an IT company. They can seem generic without final copy, final visual design, media, etc… but that makes it a great example to show you without giving away who they are.
Password: ptype

While these look like wireframes, this is a published Axure prototype. There is very minimal interaction but there are adaptive views. If you change your browser window size, you will see tablet and phone versions.

We love to jump into prototyping immediately. We don’t see a great reason to make flat, lifeless, “imagine this button does this” wireframes and then later prototype. We prototype right away. Bringing the design concept to life helps us quickly see if it is a possible winner or needs iteration.

It also helps us communicate it to you. Instead of sending a pile of wireframes, assuming you’ll read all the annotations, or trying to get you to imagine how a “dead” mockup works, you’ll just use the prototype. Great for communication, collaboration, clarity, connection.

This example was done for a bank. It’s high fidelity (fully visually designed) and has some advanced interactive features. You can calculate what interest rate you would get and how much interest you would make on a CD investment.

Check out the “CDs” page in the prototype and thrill to the realistic, quick prototyping we can do with Axure. The bank had budgeted 200 hours for this project. It took us 65, including an adaptive phone version.
Password: ptype

Can’t Anybody Make Wireframes?

We sometimes hear that a company or agency doesn’t need a UX specialist because their graphic designers can do wireframes. Interaction design, visual design, they’re both design (or so we hear). Or the programmers are pretty good at laying things out.

Since wireframes look like a bunch of boxes on a page, UX is greatly misunderstood. “Anybody can make wireframes.” And anybody can “fix” your car. Or pull your teeth. Your mail carrier could pull your teeth but there are many trained and experienced people who are way better at it than he or she would be.

User Research and Testing would determine if your users are happy with the UX work being done by your non-UX roles.

Architecture, construction, and interior design aren’t the same. Someone educated and experienced in one typically only knows a little about the others. You usually don’t have your interior designer be the construction company… even if they are sure they’d be good at it.

UX specialists use empathy, a knowledge of psychology, an ability to accurately predict how people will behave, and other models and approaches in order to design products, interfaces, services, and every moment the user experiences down to the microinteractions.

Explore the User-Centered Design Process

User Research, Audits, & Analyses

Content & Media Strategy

Information Architecture

Interaction Design & Prototyping

User Testing & Validation

Visual Design & Documentation