Introducing 

Prezi AI.

Your new presentation assistant.

Refine, enhance, and tailor your content, source relevant images, and edit visuals quicker than ever before.

Loading…
Transcript

GIMM 200

Professor Karen Doty | Spring 2020

The Human Interface

The

Human

Interface

Designing applications for mobile devices

User Experience

& Emotion

The experience of UX

Why did this experience change the way users chose to use the stairs?

Donald Norman

UX Concepts

  • Visceral
  • Behavioral
  • Reflective

Visceral

Aesthetics of an interface. If something looks good, users are more likely to want to use it.

Behavioral

The actions while using a product should make sense.

Reflective

The product should create a lasting impression on the user. It should be memorable.

Well designed apps with a memorable experience will provide a stronger user experience and thus be more successful.

Concept

of

Commonality

The Concept of Commonality

A common belief among designers is that graphical elements will produce a more universal interpretation because we all live in the same physical world.

  • Red traffic lights mean stop
  • Question marks means help
  • Folder icon means data files

Does designing for commonality work?

Abstract images vs. Realistic images

Designing for Mobile

  • Understanding the Environment
  • User Movement
  • Initialization
  • Interactions
  • Interface Design

Understand the Environment

  • How does your app respond to the environment and the constraints it has.

Initialization

  • Understanding if users know how to interact with the device and application

Provide Affordances that Make Sense

  • What is an affordance that may be useful in a mobile app?
  • Sound

  • Visual

  • Location

  • 3D option

  • Menu

  • Help

UX Testing

Procedures

App Project Requirements

  • Information Architecture
  • Wireframes
  • Prototype
  • Prototype Testing

Information Architecture

Information architecture is all about organization of information in a clear and logical way.

Cognitive Psychology

Cognitive psychology is the study of how our minds work — what mental activities take place in our brain and what different factors influence our attention.

Most UI/UX design rules we have today have roots in cognitive psychology.

Information Architecture

What Information Architecture Looks Like

Wireframes

Mid, Lo and High Fidelity Wireframes

https://justuxdesign.com/blog/wireframe-fidelity

Lo-Fidelity Prototype

Lo-Fidelity Prototype

  • Very rough layouts of screens.

  • Little to no detail to the specifics of content or layout. We may divide the screen into a series zones or blocks, rather than going into detail.

  • No sense of scale, grid or pixel-accuracy.

Mid-Fidelity Prototype

Mid-Fidelity Prototype

  • More accurate depictions of the layout.

  • Detail is given to specific components, differentiating things like buttons from text only links.

  • Varying text weights might be used to separate headings and body content.

  • Though still black and white, they can use different shades of grey. This can be used to communicate the visual prominence of certain elements.

  • Avoids final images or font styles.

High-Fidelity Prototype

High-Fidelity Prototype

  • Pixel-specific layouts. Often uses a grid system.

  • Real images, typography styles and color if appropriate.

  • Little or no placeholder text.

  • Responsive behavior and fluid widths (if prototyping).

Prototype Programs

  • InVision: https://www.invisionapp.com/
  • Adobe XD : https://www.adobe.com/products/xd/details.html

UX Testing for Projects

  • Surveys
  • Interviews (preliminary and post)
  • Observations
  • Screen Capture

Pre-Qualification Surveys

Things to consider asking for pre-qualification surveys

  • Language
  • Age
  • Technology Comfort, Usage, Experience
  • Health Ailments

If you plan to record the participant in any way, always get their approval. It is also important to explain that participants will remain anonymous and all responses will be kept confidential. Explain the purpose of the test is to understand how to make the best experience.

Post Testing Surveys

Things to consider asking for post surveys

  • Task-related questions
  • Emotional responses
  • Recommendations from participant

Always thank your participants!!!

Survey Tools

Qualtrics

Survey Legend

Feedier

SoGoSurvey

https://www.boisestate.edu/oit-learning/qualtrics/

Interviews

Interviews can be formal or they can be casual. A lot depends on the kind of interview you are aiming for and the type of information you are looking to gain.

Sometimes it helps to have an interview instead of a post-survey for demographics that may not respond to a digital survey

Interview possibilities

Question and Answer: Consider yourself a journalist, sit down, ask questions, make sure the participant is comfortable. If you plan to record the audio of the interview, always, always ask permission.

Video Recordings - Make sure the camera does not disturb the participant. Always, always ask permission. Make sure clients know video and audio recordings will remain anonymous during analysis

Observation

Ethnographic observation: set of qualitative methods that are used in social sciences that focus on the observation of social practices and interactions

During testing, ask one group member to observe participants in the environment and take notes. Make sure the group member does not interrupt the experience for the participant.

Notes to consider taking:

  • Any concerns or mishaps the participant has
  • Emotional reaction to the experience
  • Positive responses to the experience

Screen Capture

Capturing the screen of an experience is a great way to see where issues may lie

  • Quicktime - Mac
  • OBS Studios - PC
  • Airplay - Mac/iPad
  • XMirage - Free Screencapture app
  • Chromecast - Oculus Quest
  • https://uploadvr.com/how-to-stream-oculus-quest/

Good &

Bad UI

Blackboard Post: The Good, Bad and the Awful UIs

Good UIs:

  • Easy to read and understand
  • Provides necessary input
  • Encourages interactive game play
  • Gives users control over experience

Bad UIs

  • Hard to understand
  • Cluttered
  • Doesn't make sense
  • Interrupts the gameflow

Good and Bad UIs Comparison

Persona 5 - Good UI

Unreal Engine VR Editor

Final Fantasy X1V - Bad UI

Alchemist Code - Bad UI

Skyrim - Bad UI

Text in UIs

UI Trends for Mobile Apps 2020

https://www.mobileappdaily.com/top-ui-design-trends

Homework

  • Post on Blackboard:
  • Example of both a good UI and bad UI with explanations as to why.

  • Comment on 2 of your peer's posts

  • Post due February 26th. Comments Due March 4th
Learn more about creating dynamic, engaging presentations with Prezi