Beyond Pretty

Taking Design Beyond the Basics to Create Richer User Experiences

Created by It's Just Eileen

Hello There

hello! it's just eileen, here. i'm a designer and developer of user experiences and interfaces for wordpress websites and products. i'm the founder at sidetrack studio and wpblockshop and the user success advocate for castos and the seriously simple podcasting plugin.

   

My Stack

adobe xd icon css icon php icon html icon wordpress icon

Intro

what is design
Not Pretty Pictures
accordion block view
Design is concerned with how things work, how they are controlled, and the nature of the interaction between people and technology.

I like to say, design solves problems.

“Good design is actually a lot harder to notice than poor design, in part because good design fits our needs so well that the design is invisible, serving us without drawing attention to itself. Bad design, on the other hand, screams out its inadequacies, making itself very noticeable.”

— Don Norman, The Design of Everyday Things

TL:DR
Good design gets out of the way

“Good design is actually a lot harder to notice than poor design, in part because good design fits our needs so well that the design is invisible, serving us without drawing attention to itself. Bad design, on the other hand, screams out its inadequacies, making itself very noticeable.”

— Don Norman, The Design of Everyday Things

TL:DR
Good design gets out of the way

Hick's Law

hick's law states
The time it takes for a person to make a decision depends on the choices available.

— OR —

As the number of choices increases, the time to make a decision also increases.
Overwhelmed
accordion block view
plugin-view

Execution


Limit choices, but dont use it when there are too many small chunks

— OR —

there are too many complex decisions.

Zeigarnik Effect

zeigarnik effect states
People remember uncompleted or interrupted tasks better than completed tasks.

Execution

Use progress bars for complex tasks to visually indicate when a task is incomplete, and thus increase the likelihood it will be completed.

Examples

serial-position

Gestalt Principles

gestalt principles
Describe how humans typically see objects by grouping similar elements, recognizing patterns and simplifying complex images.

Similarity

similarity

Symmetry

continuation

Proximity

continuation

Common Region

continuation

Peridoctiy

continuation

Serial Position Effect

serial position effect states
Users have a propensity to best remember the first and last items in a series.

Examples


Include Cues in the User Interface

Maintain Task-relevant Information within the User Interface

Emphasize Key Information in the Beginning and End

Limit the Amount of Recall Required

serial-position

Miller's Law

miller's law states
The average person can only keep 7 (plus or minus 2) items in their working memory.

execution

Break down large bands of information into manageable bites.

for example

plugin admin view
plugin admin view

Soapbox

here's the rant

no matter your stack


Front End

Back End

Design

Development

we all have an obligation to make the best web possible for our users. Applying simple concepts can help get us there.

Thank You

- Design Journal
- Github

itsjusteileen  ❘   beyond pretty

Beyond Pretty

Design is not about pretty pictures,
it's about solving problems.

itsjusteileen ❘ WCPHilly2019