Tweet
Tweet

Slide 1

Slide 1 text

Intro to basic UX concepts Callum Silcock / Message Media 2018

Slide 2

Slide 2 text

What is UX? Studying user behaviour and understanding user mo3va3ons with the goal of designing be7er digital experiences . Systems that confuse, in3midate or infuriate their users don’t have flawed users, but flawed designs that need to be fixed.

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

But business requirements "Customers don’t o.en get invited to mee2ngs, so don’t be afraid to speak up on their behalf."

Slide 5

Slide 5 text

Laws of UX

Slide 6

Slide 6 text

Fi#’s Law "The &me to acquire a target is a func&on of the distance to and size of the target."

Slide 7

Slide 7 text

Fi#’s Law • If a func)on needs to be accessed o0en and/or quickly, make the bu;on big • Users should be able to click anywhere within the clearly defined boundaries • Make objects as close to one another when they are used in the same sequence chain • Make interac)ve elements of the screen as large as is sensible

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

Hick’s Law "The &me it takes to make a decision increases with the number and complexity of choices. "

Slide 10

Slide 10 text

Hick’s Law • K.I.S.S. method • Only provide choices when a good default does not exist • Amazon shopping cart (1 click buy)

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

Jakob’s Law "Users spend most of their 0me on other sites. This means that users prefer your site to work the same way as all the other sites they already know."

Slide 14

Slide 14 text

Jakob’s Law • Respect the pla,orm’s conven3ons and interface guidelines • Don’t have a weird site naviga3on • 80% or more of websites use the same design approach. Users strongly expect standard elements to work a certain way when they visit a new site because that's how things always work

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

Law of Prägnanz "People will perceive and interpret ambiguous or complex images as the simplest form possible, because it is the interpreta:on that requires the least cogni:ve effort of us. "

Slide 17

Slide 17 text

Law of Prägnanz • Do not stuff too much detail into a small space • People tend to perceive objects as symmetrical shapes that form around their center • The law of Common Fate observes that when objects point in the same direc>on, we see them as a related group • Eg. if one navbar goes right, all nav bars should go right

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

Law of Proximity "Objects that are near, or proximate to each other, tend to be grouped together."

Slide 20

Slide 20 text

Law of Proximity • Objects that are near, or proximate to each other, tend to be grouped together • If you have a group of bu;ons / links etc., they should all relate

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

Miller’s Law "The average person can only keep 7 (plus or minus 2) items in their working memory."

Slide 24

Slide 24 text

Miller’s Law • Reduce the number of things your users have to remember • 1) too many choices, 2) too much thought required, or 3) lack of clarity • Avoid Unnecessary elements • Any element that isn’t helping the user achieve their goal is working against them • Use Iconography with CauEon

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

Pareto Principle / Parkinson’s Law "The Pareto principle states that, for many events, roughly 80% of the effects come from 20% of the causes."

Slide 27

Slide 27 text

Pareto Principle / Parkinson’s Law • Any task will inflate un0l all of the available 0me is spent • Make tasks short, simple and with set deadlines • It’s a ma>er of narrowing your focus down to essen0al cause and effect principles, so as to priori0se your a>en0on and resources • eg. 80% of your users will do a specific task, those are the people to focus on

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

Serial Posi+on Effect "Users have a propensity to best remember the first and last items in a series."

Slide 30

Slide 30 text

Serial Posi+on Effect • Pre%y straigh.orward - Put the important things at the beginning or at the end • When the user doesn’t set the pace of the presented items, such as in video and audio, it is usually be%er to present the most important items last.

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

Tesler’s Law "Tesler's Law, also known as The Law of Conserva4on of Complexity, states that for any system there is a certain amount of complexity which cannot be reduced."

Slide 33

Slide 33 text

Tesler’s Law • Removing features from your product may result in users not being able to achieve some goals • The ques:on is who handles it, the system or the user? • There is a reason cameras have many se>ngs… including auto • Find a balance • Give users control

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

Von Restorff Effect "The Von Restorff effect, also known as The Isola5on Effect, predicts that when mul5ple similar objects are present, the one that differs from the rest is most likely to be remembered."

Slide 36

Slide 36 text

Von Restorff Effect • Make the most important thing stand out • Also If you want to stand out from compe::on, find a feature which is always the same and make it different. • Why do call to ac:on buAons always have a different color? • They will remember that color

Slide 37

Slide 37 text

No content

Slide 38

Slide 38 text

No content

Slide 39

Slide 39 text

Zeigarnik Effect "People remember uncompleted or interrupted tasks be4er than completed tasks."

Slide 40

Slide 40 text

Zeigarnik Effect • Always signal to a user they s2ll have things to do • Even if they are in the middle of a task they will switch context • Trick users into making them do certain things they wouldn’t do otherwise. Eg. LinkedIn uses this trick to make users complete their profiles.

Slide 41

Slide 41 text

No content

Slide 42

Slide 42 text

Resources • Intro to user experience design • Home | Laws of UX • Fi;s’s Law: The Importance of Size and Distance in UI Design | InteracCon Design FoundaCon • Design principles of hicks law • Laws of praegnaz, fate gestalt • Design Principles: Visual PercepCon And The Principles Of