• Home
    • User & System Flow
    • Responsive Design
    • Interaction Design & Rapid Prototyping
    • Icon Design / Iconography
    • Interface/Visual Design
    • Logo Design
    • Image Design
    • Presentations
    • Spotlight: X Games

Wilson VisD

Professional Design for your Business

Interaction Design & Rapid Prototyping

January 28, 2017 by Christopher Wilson


Interactions: Header Image

Some interactions are simple enough for static images. Others do better when animated.

Prototypes of interaction designs serve many purposes.

First, they save money. When creating new solutions, its often difficult to know if it will actually work, and sometimes you need to try out several ideas before settling on the ‘right’ one. It turns out that you can construct any number of prototypes and test them for less money than creating one, and potentially finding out too late that it doesn’t work the way you want it.

Second, interactions can sometimes be too complex for static images to fully describe. So, building a prototype that shows the developer exactly what needs to be built will help reduce the number of revisions needed and overall development time.

There are lots of tools to build prototypes with, including, but not limited to, Axure, InVision, Principle for Mac, and Flinto.

Mobile Breadcrumb Solution

Counter intuitively, the web app this pattern was designed for was built in reverse, and I was tasked with retrofitting features from the desktop into the smaller tablet and phone form factors.

The full sized website uses breadcrumbs and this was my solution for bringing it into the smaller form factor.

Additional features include:

  • One version of accessible drop menus that push the page down so as not don’t obscure page content
  • A collapsible natural language widget

Drop Nav and Card Sliders for Phone

One design I was working on included a number of sections, and lots of offerings within those sections. Options include:

  • Providing the user a VERY long scroll
  • Shortening a very long scroll with collapsing sections
  • Or this solution, which uses a much shorter vertical scroll, with horizontal scrolling within sections that need it.

Horizontal Card Sliders for Desktop and Tablet

The challenge for this design was to create several rows of horizontal sliding cards that wouldn’t present the user with rows of arrows.

I decided that arrows were NOT necessary for the tablet, as the cards would bleed off of the edge of the parent card, and mobile users are used to swiping through options.

However, desktop users might have a more difficult time, and swiping with a mouse can be more difficult, so I designed arrows that appear when the mouse cursor hovers over the row. These arrows can be clicked to advance or retreat the content.

For both platforms, the arrows fade down when the end of a row’s content is reached.

Ranking Question Pattern

This prototyped wireframe is for a simple “put these items in the right order” interaction. Interaction Flow:

  1. Start the Test.
  2. Acknowledge the general instructions for the “question type”.
    1. Instructions may be reopened if needed.
    2. Test may be exited at any time.
  3. Add items from the bin to the list.
  4. Reorder the items afterwards if interested.
  5. Submit and get results.

About Christopher Wilson

A seasoned digital designer with more than a decade of experience working in Technology; UX Design for mobile and web apps, Visual Design for websites, video 
games, and print.
--

A current resume can be viewed and downloaded as a PDF here.

Spotlight: X Games
Responsive Design

Contact Me


Fields marked with an * are required.

0 / 180

Service Area

Wilson VisD Service Area
Service Area

Always happy to work remotely for anyone, anywhere, but I'm also available to work daily, or a few days a week in select areas of Connecticut.

My Other Projects

  • Illustration Portfolio
  • Web Design & Hosting
  • Creative Independence Podcast
  • Answers for Freelancers!
  • Esmaya & Me Board Games

© 2023 · Chris Wilson & Aithene Multimedia