UX Design Fundamentals

UI / UX Design Specialization by California Institute of Arts (CalArts).

Ideation

Take ideas. Ideas come from client. Ideas should be about content, concept and needs.

• Good ideas
  • Real problems
  • Solvable by app
  • Loved by users
• Good process
  • Research
  • Testing
  • Revisions
• Good focus
  • Articulation
  • Clarity
  • User feedback

Goals

We need to know:

• What does it do? For Ideation & Articulation.
• How does it work? For Research & Development.
• Who benefits from it? For Audience & Rationale.
• Why would someone use it? For Goals & Outcomes.

Research & Development

Check out the competition:

• What apps exist that do the same thing?
• What apps do something similar?
• What apps are content-adjacent?
• What apps are structural models?

Develop and test new ideas. Map possibilities. Shape your solution.

Audience & Rationale

Identify your audience:

• Who benefits from my app?
• Who is my audience?
• Who is my initial user target group?

Differentiate audience through political, economic, social, functional and other categories.

That is User Centered Design.

Goals & Outcomes

We need to define 100% between:

• Political: Fulfill out main objective.
• Financial: Make money.
• Social: Build community.
• Functional: Provide a useful app.

Naming and Mission

Naming has to have a topic to be based on (mythological, contemporary, scientific, historical, fictional, etc). Mission needs to be concise, descriptive and pragmatic.

Here we need keywords and a mind map for defining our language.

Always keeping in mind the appropriate tone and mood for the brand.

Mapping Content & Interaction

The process comes from non-visual, app idea (words). To semi-visual, envision (words, maps, sketches). Then, visual, prototype (experience, final designs).

So we start the content mapping, developing ideas, making paper prototypes for some testing and the visual development, the actual UI. We also do wireframing, functionality / logic, some visual refinement and check the continuity / coherence of the UI system.

Mapping Content

Identify the main objective (usually as home page), each module and its attributes, and the potential to grow by itself (scale). It’s a diagram / map.

Mapping Interaction

Think about the users possible pathways, from the start, to all the actions he can make, all the inputs that should be needed (even optional ones). Independent of visuals, UI elements or specific screens. It’s a flowchart / map.

Non-Visual Testing

Paper Prototyping

All mapped ideas have to be put on paper, making revisions, moving parts around as needed, and looking for changes. It’s an internal test, developers by themselves will see if the prototype works or not.

User Testing

Here the user will be taking decisions from the available options, interacting with the system and, if it’s all fine, doing what he is supposed to do with the app. Also telling testers whether or not there is a problem, something that can’t be done or understood.

Sitemap

A site map is a hierarchical diagram of a web / app, that shows how pages are prioritized, linked, and labeled. If the flowchart is like the street view, the sitemap is like the bird’s eye view.

Process scheme:

1. Content Map & Interaction Map.
2. Paper Prototyping ⟶ Testing UX ⟶ User Testing UX.
3. Sitemap (here we are).
4. Wireframe ⟶ Testing UI.
5. Prototyping ⟶ Testing UI ⟶ User Testing UI.

Nielsen’s 10 Usability Heuristics

1. Visibility of system status.
2. Match between the system and the real world.
3. User control and freedom.
4. Consistency and standards.
5. Error prevention.
6. Recognition rather than recall.
7. Flexibility and efficiency of use.
8. Aesthetic and minimalist design.
9. Help users recognize, diagnose, and recover from errors.
10. Help and documentation.

Wireframe

A wireframe defines what goes where.

They are functional, minimal, consistent, and user-centric. Simple and clear.

Creating a wireframe:

• Sketch (hand or computer).
• Geometric shapes and lines.
• Scale and hierarchy.
• Don’t get lost in details.
• Black and white, and grey.
• Placement on screen.
• Reuse elements.
• Visually indicate the type of interface elements.

Prototype

It’s made for:

• Simulating the final experience.
• Refining final UI and UX.
• Creating a digital prototype for realistic user testing.

It must simulate:

• The platform:
  • Scale (relates to eye).
  • Physicality (relates to body).
  • Visual + Tactile (together).
• The interface:
  • Believable UI design.
  • Believable content.
  • Believable language.
• The Interaction:
  • Believable UX design.
  • Believable path.
  • Believable responses.
• The experience:
  • Believable UI design (needs to be on a screen).
  • Believable UX design (needs to be interactive).
  • Believable platform / context (needs to be a physical device).