Web and mobile user interfaces have been static for a long time. The
work of designer mainly involved user interactions with the interfaces
mainly related to transitions from one screen to the other. The
traditional tools of wire-framing are mainly to visualize multiple
screens as user moves from one screen to another.
Gestures
With advent of javascript/Ajax in browser-based interfaces and touch
screens on smartphones, tablets and watches, user interactions with
devices has become richer. They involve both new actions for input
more than simple hovers and clicks. The new actions mainly with
touch-screen can be swipe left-right, top-down, rotate, pull-down,
long-press etc. There is design movement to keep users on a single
page and allow them to interact with various elements on the screen
intuitively using these different types of gestures. Google material
design (used in Google Inbox) also allows for new interactions like seeing hidden menus
behind elements in the list by slightly sliding them sideways,
scrolling of lists below + icon which is setup at z-axis. New
generation of apps like Tinder have major functions that make use of
swipe left-right gestures. The new devices like smart-watch are adding
elements on dial-rotation which adds new gesture support. The new
generation of smart-phone users are getting raised with these actions
and find them as a natural way of browsing any app without much
training. This requires designers to make use of interactive tools like Invision in high-fidelity mockups to show in-screen interactions so they can be visualized and adjusted for good effects during design phase.
Motion in reactions
Similar to user actions, there is a move towards creating interesting
movements on the screen to grab user’s attention or add element of fun
with motion. Some of the examples are throbbing icons in slack,
LinkedIn moving in-out of messages at the top, bouncing login screen
before it settles in some of the apps, animation in analytics
visualization like rotating pie-charts, moving graph lines, slow
forming letters, animated gifs etc.
With advent of movements both as input and output, and user community
being raised with expectations of support for such interactions,
designers of new generation apps are challenged with thinking about
new ways interaction with apps. They need to think about using right
set of tools to convey their designs to developers. Also designing
interactions that are useful, intuitive, fun and at the same time, subtle so as to not be distracting from the main functionality is a new challenge in user
experience design.
What actions and reactions have you used successfully in your web and mobile application design?
