1 of 33

UX Design

Margus Luik

2 of 33

http://www.uxmatters.com/mt/archives/2007/11/images/FiveCompetencies.pdf

3 of 33

Information Architecture

  • Business level analyzes
  • UI structure analyzes

http://www.uxmatters.com/mt/archives/2007/11/images/infoArch.gif

4 of 33

Information Architecture

Answers questions like:

  • What are users primary goals?
  • How do users navigate in the user interface?
  • What is the applications optimal scope and feature set?
  • How are products featured and components branded?

5 of 33

Information Architecture Deliverables

Site map

  • Hierarchical diagram of the applications views.

http://courses.gossettphd.org/topperl/files/2013/04/Visio-Facebook_Site_Map_and_Task_Flows_Page_1.jpg

6 of 33

XCOM: Enemy Unknown UI map

7 of 33

Information Architecture | Service Blueprint

Service blueprint displays all touchpoints between the client and brand, as well as internal processes involved.

  • Customer actions
  • Frontstage actions
  • Backstage actions
  • Support processes
  • Physical evidence

http://36.media.tumblr.com/tumblr_mbxb2phPRR1rh9ygro1_r1_1280.jpg

8 of 33

9 of 33

Information Architecture | Personas

Personas are a way of documenting target audience.

  • Usually made up.
  • Used during design process.

https://cdn.tutsplus.com/webdesign/uploads/legacy/articles/090_personas/example_persona.jpeg

10 of 33

Information Architecture | User Stories

  • Help keept the product user focused.
  • Help prevent feature creep.
  • As a user i want to [user goal].

https://marketoonist.com/wp-content/uploads/2015/06/051212.creep_.jpg

11 of 33

Information Architecture

​

  • Consumer journey map
  • User stories
  • Ecosystem map
  • Competitive audit
  • Value Proposition
  • Stakeholders Interviews
  • Key performance Indicators

12 of 33

Information Architecture

https://xkcd.com/773/

13 of 33

Interaction Design

Answers questions like:

  • Which layout pattern to use?
  • How to draw on users intuition?
  • What happens mouse/keyboard input?
  • How to maintain consistency through application?
  • Which UI components to use?

​

http://www.uxmatters.com/mt/archives/2007/11/images/interactionDesign.gif

14 of 33

Interaction Design | Wireframe

  • Shows placement of UI elements in a view.
  • Usually in a single color.
  • No visual style

​

http://www.toobler.com/img/services/ux-flow-paper.png

15 of 33

Interaction Design | Statechart

  • ​

http://sehlhorst.smugmug.com/photos/139621064-M.jpg

16 of 33

Interaction Design | Statechart

In groups of n, create a state chart of an operating system graphical file browsers file selection states.

  • Mouse input
  • Modifier keys
  • Keyboard commands
  • Traversing the file tree

17 of 33

Interaction Design | Voronoi

http://www.visualcinnamon.com/2015/07/voronoi.html

18 of 33

Interaction Design

Methods and deliverables

  • User goals
  • Flow chart
  • Layouts
  • Storyboards

​

19 of 33

Interaction Design

​

https://xkcd.com/1309/

20 of 33

Functional Animation

Functiona animation is:

  • Subtle
  • Clear
  • Servers a logical purpose in design

​

​

Based on article[8] by Amit Daliot

​

21 of 33

Functional Animation | Orientation

  • Used to show transition between views
  • Open/close hidden panels
  • Avoids surprising transition
  • Keeps user oriented

Example Videos:

1

2

22 of 33

Functional Animation | Same location, new action

  • Emphazises change in function of an UI element.

​

​

Example Videos:

1

2

23 of 33

Functional Animation | Zoom In

  • Zooms into an element from a list
  • Similar to orientation group
  • New view should share the dominant color of listed element.
  • New view should have a clear button to return to previous list.

Example Videos:

1

2

24 of 33

Functional Animation | Visual hint

  • Hints user of a hidden action
  • Hints user of an unconventional transition method.

​

Example Videos:

1

2

3

25 of 33

Functional Animation | Highlight

  • Used to highlight outcome of an action.
  • Great for competing with noisy background/layout.

​

Example Videos:

1

26 of 33

Functional Animation | Simulation

  • Simulate topics that are otherwise hard to convey.

​

​

Example Videos:

1

27 of 33

Functional Animation | Visual Feedback

  • Acknowledge the user’s action.
  • Creates “tactile” feeling.

​

Example Videos:

1

2

28 of 33

Functional Animation | System Status

  • Used to entertain user while waiting.

​

​

Example videos:

1

2

29 of 33

References

  1. The five competences of user experience design
  2. Do not put labels inside text boxes
  3. Using a D3 Voronoi grid to improve a chart's interactive experience
  4. UX Methods and Deliverables
  5. UX 101: The Wireframe
  6. Documenting the Design of Rich Internet Applications
  7. You are a Developer? So, you are a UX Designer.
  8. Functional Animation In UX Design

30 of 33

Thank you!

31 of 33

Usability Engineering

Fancy words for testing

http://www.uxmatters.com/mt/archives/2007/11/images/usabilityEng.gif

32 of 33

Visual Design

  • Art stuff

​

http://www.uxmatters.com/mt/archives/2007/11/images/visualDesign.gif

33 of 33

Prototype Engineering

  • This really doesn’t need it’s own design category.

http://www.uxmatters.com/mt/archives/2007/11/images/protoEng3.gif