Full Frontal for the Backend Pack

Slide 1

Slide 1 text

Full Frontal for the Backend Pack Jarkko Laine

Slide 2

Slide 2 text

Slide 3

Slide 3 text

FU Follow-up

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

Dumped the clutch

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

@jarkko jlaine.net / notkea.fi hacking at wildfireapp.com consulting and training at odesign.fi

Slide 10

Slide 10 text

Design

Slide 11

Slide 11 text

Ich bin ein Berliner

Slide 12

Slide 12 text

I am a designer

Slide 13

Slide 13 text

Design

Slide 14

Slide 14 text

Design What is ?

Slide 15

Slide 15 text

Aesthetics i.e. graphic design

Slide 16

Slide 16 text

Aesthetics Functional design Cost Logistics

Slide 17

Slide 17 text

This talk is NOT about graphic design

Slide 18

Slide 18 text

“I will never buy a Mac because I won’t pay extra for design”

Slide 19

Slide 19 text

Finlandia Hall http://www.flickr.com/photos/ilkkarinne/1322522488

Slide 20

Slide 20 text

Alvar Aalto http://www.flickr.com/photos/pntphoto/3948734361

Slide 21

Slide 21 text

“Sure I'll buy the web app from you but I won't pay a dime more for design”

Slide 22

Slide 22 text

“Design is not just what it looks like and feels like. Design is how it works.” http://www.flickr.com/photos/acaben/541420967/

Slide 23

Slide 23 text

“Damn, this sucks.”

Slide 24

Slide 24 text

“The products suck! There’s no sex in them anymore!” http://www.flickr.com/photos/acaben/541420967/

Slide 25

Slide 25 text

WATCH and (critically) OBSERVE

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

Four design principles from DOET: Conceptual models Feedback Constraints Affordances

Slide 28

Slide 28 text

Conceptual Models Mental Model Implementation model UI Model From Lukas Mathis: Designed for Use

Slide 29

Slide 29 text

Conceptual Models Exchanging money for a movie. Flipping bits in a bunch of databases. ? From Lukas Mathis: Designed for Use

Slide 30

Slide 30 text

Skeuomorphic design

Slide 31

Slide 31 text

Skeuomorphic design

Slide 32

Slide 32 text

How to find out whether the conceptual model of your product works?

Slide 33

Slide 33 text

WATCH and (critically) OBSERVE

Slide 34

Slide 34 text

Example: browsing history

Slide 35

Slide 35 text

Popup windows suck because they break users’ mental model of linear browsing history

Slide 36

Slide 36 text

A solved problem, right? Right?

Slide 37

Slide 37 text

“Technologists are not noted for learning from the error of the past” - Norman in 1988.

Slide 38

Slide 38 text

No content

Slide 39

Slide 39 text

JS and Ajax don’t have to break browsing history

Slide 40

Slide 40 text

No content

Slide 41

Slide 41 text

$(‘#slider a’).click(function() { history.pushState({ path: this.path }, ‘’, this.href) $.get(this.href, function(data) { $(‘#slider‘).slideTo(data) }) return false }) $(window).bind(‘popstate’, function() { $(‘#slider‘).slideTo(location.pathname) }) https://github.com/blog/760-the-tree-slider

Slide 42

Slide 42 text

History.js https://github.com/balupton/ History.js

Slide 43

Slide 43 text

To recap: “Designers should provide users with appropriate models: when they're not supplied, people are likely to make up inappropriate ones.”

Slide 44

Slide 44 text

Feedback

Slide 45

Slide 45 text

Feedback “Immediate and consistent feedback is the basis of learning.” John Medina, Brain Rules for Baby

Slide 46

Slide 46 text

Feedback http://www.flickr.com/photos/aschultz/3174440467

Slide 47

Slide 47 text

Feedback in the web

Slide 48

Slide 48 text

“The most egregious failures always come from the developers of the most recent technologies.” - Norman in 1988.

Slide 49

Slide 49 text

Hit a button in a pure- ajax form, and absolutely NOTHING HAPPENS.

Slide 50

Slide 50 text

Ajax-powered web applications need extra care as far as UI is considered.

Slide 51

Slide 51 text

Disable form buttons, show a spinner Don’t forget the feedback when an operation is over $(‘item_356’).fade( { duration: 3.0, from: 0, to: 1 }); $(‘spinner’).hide(); new Effect.Highlight( ‘new_item_element’, {duration: 5});

Slide 52

Slide 52 text

Feedback gone wrong

Slide 53

Slide 53 text

Are you sure?

Slide 54

Slide 54 text

No content

Slide 55

Slide 55 text

No content

Slide 56

Slide 56 text

confirmation popups...

Slide 57

Slide 57 text

confirmation popups... Break the user flow with modality

Slide 58

Slide 58 text

confirmation popups... Break the user flow with modality Annoy the hell out of the user

Slide 59

Slide 59 text

confirmation popups... Break the user flow with modality Annoy the hell out of the user do not work

Slide 60

Slide 60 text

confirmation popups don’t work, because...

Slide 61

Slide 61 text

confirmation popups don’t work, because... they are too close to the action ➔ user blindly confirms

Slide 62

Slide 62 text

confirmation popups don’t work, because... they are too close to the action ➔ user blindly confirms this makes the user wary of doing the right things

Slide 63

Slide 63 text

confirmation popups don’t work, because... they are too close to the action ➔ user blindly confirms this makes the user wary of doing the right things they try to fix the wrong problem: action vs the target

Slide 64

Slide 64 text

“The user has requested deletion of the wrong file but the computer's request for confirmation is unlikely to catch the error; the user is confirming the action, not the file name.” - Norman in 1988.

Slide 65

Slide 65 text

We had this covered with undo/redo/trash can

Slide 66

Slide 66 text

We had this covered with undo/redo/trash can And then the web (and to an extent, mobile) apps happened

Slide 67

Slide 67 text

“Technologists are not noted for learning from the error of the past” - Norman in 1988.

Slide 68

Slide 68 text

confirm() is the lazy, cover-my-ass solution

Slide 69

Slide 69 text

if gmail can do it, you can do it.

Slide 70

Slide 70 text

Rails-undo-redo (https://github.com/psq/ rails-undo-redo) Full undo manager for rails, but abandoned? Acts as paranoid (https://github.com/ goncalossilva/rails3_acts_as_paranoid) Oldie but goodie jQuery undo plugin http://docs.jquery.com/Plugins/Undo existing solutions

Slide 71

Slide 71 text

Constraints

Slide 72

Slide 72 text

Constraints “The surest way to make something easy to use, with few errors, is to make it impossible to do otherwise” - Norman in 1988.

Slide 73

Slide 73 text

Example: Make it impossible to insert a battery or cable the wrong way. http://www.flickr.com/photos/nandf/2434070753

Slide 74

Slide 74 text

Harder to find examples from the software world, but...

Slide 75

Slide 75 text

“When instructions have to be pasted on something it is badly designed” - Norman in 1988. Harder to find examples from the software world, but...

Slide 76

Slide 76 text

No content

Slide 77

Slide 77 text

The save plague

Slide 78

Slide 78 text

The save plague For once a problem from the GUI world

Slide 79

Slide 79 text

The save plague For once a problem from the GUI world

Slide 80

Slide 80 text

The save plague For once a problem from the GUI world Nothing persisted before I hit “Done”. Why?

Slide 81

Slide 81 text

In contrast

Slide 82

Slide 82 text

How to fix the save plague? Learn the lesson from OS X Lion (and Google Docs) Save automatically, version if needed

Slide 83

Slide 83 text

How to fix the save plague? Periodical Ajax calls are your friend.

Slide 84

Slide 84 text

Disk space is cheap, user confidence priceless

Slide 85

Slide 85 text

Affordances Properties of the product that tell how it is supposed to be operated The flip side of constraints

Slide 86

Slide 86 text

Affordances “Wherever labels seem necessary, consider another design” - Norman in 1988.

Slide 87

Slide 87 text

Affordances Visibility: Make relevant parts visible “Your user interface elements should be created in a way that suggests to your users how they can interact with them” — Lukas Mathis

Slide 88

Slide 88 text

Affordances Lessons: Make links discernible, and if possible, underlined. Links take you from place a to place b. Don’t use links for actions.

Slide 89

Slide 89 text

Affordances Lessons: Make buttons look like buttons, to make them distinct from links. Disable buttons when clicked.

Slide 90

Slide 90 text

The four principles of user interface design Conceptual models Make sure the conceptual models of your application's UI correspond to the mental model users have of the task at hand.

Slide 91

Slide 91 text

The four principles of user interface design Feedback Provide immediate and consistent feedback on user's actions

Slide 92

Slide 92 text

The four principles of user interface design Constraints Guide the user to do the correct things.

Slide 93

Slide 93 text

The four principles of user interface design Affordances Make relevant parts visible, irrelevant parts invisible. User should be able to know how to operate a thing just by looking at it.