77
designers & hackers

designers hackers - LibreOffice · information architecture information design, organization, findability visual design interaction design usability + accessibility “to contrive

  • Upload
    others

  • View
    4

  • Download
    0

Embed Size (px)

Citation preview

Page 1: designers hackers - LibreOffice · information architecture information design, organization, findability visual design interaction design usability + accessibility “to contrive

designers&

hackers

Page 2: designers hackers - LibreOffice · information architecture information design, organization, findability visual design interaction design usability + accessibility “to contrive

goal:motivate you topay attention to designwhen developing

Page 3: designers hackers - LibreOffice · information architecture information design, organization, findability visual design interaction design usability + accessibility “to contrive

design?

Page 4: designers hackers - LibreOffice · information architecture information design, organization, findability visual design interaction design usability + accessibility “to contrive

information architectureinformation design, organization, findability

visual design

interaction design

usability + accessibility

Page 5: designers hackers - LibreOffice · information architecture information design, organization, findability visual design interaction design usability + accessibility “to contrive

“to contrive for a purpose, to project for the attainment of a

particular end”- The Century Dictionary, 1911

Page 6: designers hackers - LibreOffice · information architecture information design, organization, findability visual design interaction design usability + accessibility “to contrive

osborn-parnescreative problem solving

process

Page 7: designers hackers - LibreOffice · information architecture information design, organization, findability visual design interaction design usability + accessibility “to contrive

explore the challenge

DEFINE THE GOAL

GATHER DATA

DEFINE THE SCOPE

Page 8: designers hackers - LibreOffice · information architecture information design, organization, findability visual design interaction design usability + accessibility “to contrive

generate ideas

Page 9: designers hackers - LibreOffice · information architecture information design, organization, findability visual design interaction design usability + accessibility “to contrive

prepare for action

FIND AN OPTIMAL SOLUTION

PREPARE TO IMPLEMENT IT

Page 10: designers hackers - LibreOffice · information architecture information design, organization, findability visual design interaction design usability + accessibility “to contrive

by Mozilla (w/ Alex Faaborg), based on work by Donald Norman, Jakob Nielsen, & Alan

Cooper

principles

Page 11: designers hackers - LibreOffice · information architecture information design, organization, findability visual design interaction design usability + accessibility “to contrive

SPEEDY

Page 12: designers hackers - LibreOffice · information architecture information design, organization, findability visual design interaction design usability + accessibility “to contrive

fitts's law

+ log2(1+ / )

TIME FOR MOVEMENT =

DEVICE SPEED

DEVICE LAG

DISTANCE

TARGET WIDTH ALONG AXIS OF

MOTION

Page 13: designers hackers - LibreOffice · information architecture information design, organization, findability visual design interaction design usability + accessibility “to contrive

ux-visual-hierarchy

Page 14: designers hackers - LibreOffice · information architecture information design, organization, findability visual design interaction design usability + accessibility “to contrive
Page 15: designers hackers - LibreOffice · information architecture information design, organization, findability visual design interaction design usability + accessibility “to contrive
Page 16: designers hackers - LibreOffice · information architecture information design, organization, findability visual design interaction design usability + accessibility “to contrive

hick's law

∑ log2(1/ +1)

TIME TO CHOOSE =

i=1

n

PROBABILITY OF CHOICE i

PROBABILITY OF CHOICE i

MENTALPROCESS

SPEED

Page 17: designers hackers - LibreOffice · information architecture information design, organization, findability visual design interaction design usability + accessibility “to contrive

ux-minimalism

Page 18: designers hackers - LibreOffice · information architecture information design, organization, findability visual design interaction design usability + accessibility “to contrive
Page 19: designers hackers - LibreOffice · information architecture information design, organization, findability visual design interaction design usability + accessibility “to contrive
Page 20: designers hackers - LibreOffice · information architecture information design, organization, findability visual design interaction design usability + accessibility “to contrive
Page 21: designers hackers - LibreOffice · information architecture information design, organization, findability visual design interaction design usability + accessibility “to contrive

ux-efficiency

Page 22: designers hackers - LibreOffice · information architecture information design, organization, findability visual design interaction design usability + accessibility “to contrive
Page 23: designers hackers - LibreOffice · information architecture information design, organization, findability visual design interaction design usability + accessibility “to contrive
Page 24: designers hackers - LibreOffice · information architecture information design, organization, findability visual design interaction design usability + accessibility “to contrive

ux-interruption

Page 25: designers hackers - LibreOffice · information architecture information design, organization, findability visual design interaction design usability + accessibility “to contrive
Page 26: designers hackers - LibreOffice · information architecture information design, organization, findability visual design interaction design usability + accessibility “to contrive
Page 27: designers hackers - LibreOffice · information architecture information design, organization, findability visual design interaction design usability + accessibility “to contrive
Page 28: designers hackers - LibreOffice · information architecture information design, organization, findability visual design interaction design usability + accessibility “to contrive

ux-consistency

Page 29: designers hackers - LibreOffice · information architecture information design, organization, findability visual design interaction design usability + accessibility “to contrive
Page 30: designers hackers - LibreOffice · information architecture information design, organization, findability visual design interaction design usability + accessibility “to contrive
Page 31: designers hackers - LibreOffice · information architecture information design, organization, findability visual design interaction design usability + accessibility “to contrive

SELF-EXPLANATORY

Page 32: designers hackers - LibreOffice · information architecture information design, organization, findability visual design interaction design usability + accessibility “to contrive

ux-affordance

Page 33: designers hackers - LibreOffice · information architecture information design, organization, findability visual design interaction design usability + accessibility “to contrive
Page 34: designers hackers - LibreOffice · information architecture information design, organization, findability visual design interaction design usability + accessibility “to contrive
Page 35: designers hackers - LibreOffice · information architecture information design, organization, findability visual design interaction design usability + accessibility “to contrive

ux-natural-mapping

Page 36: designers hackers - LibreOffice · information architecture information design, organization, findability visual design interaction design usability + accessibility “to contrive
Page 37: designers hackers - LibreOffice · information architecture information design, organization, findability visual design interaction design usability + accessibility “to contrive
Page 38: designers hackers - LibreOffice · information architecture information design, organization, findability visual design interaction design usability + accessibility “to contrive
Page 39: designers hackers - LibreOffice · information architecture information design, organization, findability visual design interaction design usability + accessibility “to contrive

ux-feedback

Page 40: designers hackers - LibreOffice · information architecture information design, organization, findability visual design interaction design usability + accessibility “to contrive
Page 41: designers hackers - LibreOffice · information architecture information design, organization, findability visual design interaction design usability + accessibility “to contrive
Page 42: designers hackers - LibreOffice · information architecture information design, organization, findability visual design interaction design usability + accessibility “to contrive

ux-discovery

Page 43: designers hackers - LibreOffice · information architecture information design, organization, findability visual design interaction design usability + accessibility “to contrive
Page 44: designers hackers - LibreOffice · information architecture information design, organization, findability visual design interaction design usability + accessibility “to contrive
Page 45: designers hackers - LibreOffice · information architecture information design, organization, findability visual design interaction design usability + accessibility “to contrive
Page 46: designers hackers - LibreOffice · information architecture information design, organization, findability visual design interaction design usability + accessibility “to contrive

ux-jargon

Page 47: designers hackers - LibreOffice · information architecture information design, organization, findability visual design interaction design usability + accessibility “to contrive
Page 48: designers hackers - LibreOffice · information architecture information design, organization, findability visual design interaction design usability + accessibility “to contrive

ERRORPROOF

Page 49: designers hackers - LibreOffice · information architecture information design, organization, findability visual design interaction design usability + accessibility “to contrive

ux-undo

Page 50: designers hackers - LibreOffice · information architecture information design, organization, findability visual design interaction design usability + accessibility “to contrive

ux-error-recovery

Page 51: designers hackers - LibreOffice · information architecture information design, organization, findability visual design interaction design usability + accessibility “to contrive
Page 52: designers hackers - LibreOffice · information architecture information design, organization, findability visual design interaction design usability + accessibility “to contrive
Page 53: designers hackers - LibreOffice · information architecture information design, organization, findability visual design interaction design usability + accessibility “to contrive

ux-error-prevention

Page 54: designers hackers - LibreOffice · information architecture information design, organization, findability visual design interaction design usability + accessibility “to contrive
Page 55: designers hackers - LibreOffice · information architecture information design, organization, findability visual design interaction design usability + accessibility “to contrive

ux-mode-error

Page 56: designers hackers - LibreOffice · information architecture information design, organization, findability visual design interaction design usability + accessibility “to contrive
Page 57: designers hackers - LibreOffice · information architecture information design, organization, findability visual design interaction design usability + accessibility “to contrive
Page 58: designers hackers - LibreOffice · information architecture information design, organization, findability visual design interaction design usability + accessibility “to contrive
Page 59: designers hackers - LibreOffice · information architecture information design, organization, findability visual design interaction design usability + accessibility “to contrive
Page 60: designers hackers - LibreOffice · information architecture information design, organization, findability visual design interaction design usability + accessibility “to contrive

ux-implementation-levelhave a good conceptual model

Page 61: designers hackers - LibreOffice · information architecture information design, organization, findability visual design interaction design usability + accessibility “to contrive

"A good conceptual model allows us to predict the effects of our actions.

Without a good model we operate by rote, blindly; we do operations

as we were told to do them; we can’t fully appreciate why, what effects

to expect, or what to do if things go wrong.“

– Donald A. Norman,The Design of Everyday Things

Page 62: designers hackers - LibreOffice · information architecture information design, organization, findability visual design interaction design usability + accessibility “to contrive
Page 63: designers hackers - LibreOffice · information architecture information design, organization, findability visual design interaction design usability + accessibility “to contrive
Page 64: designers hackers - LibreOffice · information architecture information design, organization, findability visual design interaction design usability + accessibility “to contrive

ux-control

Page 65: designers hackers - LibreOffice · information architecture information design, organization, findability visual design interaction design usability + accessibility “to contrive

ux-tone

Page 66: designers hackers - LibreOffice · information architecture information design, organization, findability visual design interaction design usability + accessibility “to contrive

what we do

Page 67: designers hackers - LibreOffice · information architecture information design, organization, findability visual design interaction design usability + accessibility “to contrive

analyses

whiteboards

playgrounds

user research

Page 68: designers hackers - LibreOffice · information architecture information design, organization, findability visual design interaction design usability + accessibility “to contrive
Page 69: designers hackers - LibreOffice · information architecture information design, organization, findability visual design interaction design usability + accessibility “to contrive
Page 70: designers hackers - LibreOffice · information architecture information design, organization, findability visual design interaction design usability + accessibility “to contrive
Page 71: designers hackers - LibreOffice · information architecture information design, organization, findability visual design interaction design usability + accessibility “to contrive
Page 72: designers hackers - LibreOffice · information architecture information design, organization, findability visual design interaction design usability + accessibility “to contrive
Page 73: designers hackers - LibreOffice · information architecture information design, organization, findability visual design interaction design usability + accessibility “to contrive

find us or join us

Page 74: designers hackers - LibreOffice · information architecture information design, organization, findability visual design interaction design usability + accessibility “to contrive

Design

LibreOffice Design

libreoffice-ux-advise

@lists.freedesktop.org

#libreoffice-design

Saturday, 16:00 UTC

WIKI

GOOGLE+

E-MAIL

FREENODE

Page 76: designers hackers - LibreOffice · information architecture information design, organization, findability visual design interaction design usability + accessibility “to contrive
Page 77: designers hackers - LibreOffice · information architecture information design, organization, findability visual design interaction design usability + accessibility “to contrive

DESIGNERS <=> HACKERS