 I'm gonna head off and start with with my presentation called the design of everyday things My name is Imre Gmeiligmeiling. I'm not gonna get into the name, but I'm Dutch the name is not I Worked at Crimson Drupal architects still do really but as of this week as you may know, we are Wunderkraut At Crimson, I'm doing the the operations I'm helping up out with the marketing and involved in some project management as well and I'll be focusing on the expansion to what's Holland as of now If you find something interesting in this session, I would kindly ask you to use the the hashtag Norman door I'm going to explain to you in a little bit what that's about My background is user experience design interface design I worked with Drupal since 2006 I was involved in development interface development and Lotus knows applications before that and Java applications and So then there's I got involved in project management team management and Now I'm not into the technology so much as all the things around Drupal So the title for my presentation is from this book the design of everyday things It's written by Donald Norman. It's the old and wise looking guy. They're on the right He's co-founder and principal of the Nielsen Norman group together with Jacob Nielsen the usability guy that you may have heard of and they do a usability analysis and studies and they They sell the the findings and Don't Norman also was professor at several universities in the United States in the United Kingdom and he well got involved in Behavioral studies and user analysis and such and I think it's I want to touch some themes in this book And I think it's a wonderful book that I think everyone involved in product development and software development particularly should read There are some pretty good things in there The presentation is not so much about How to how to design things well The presentation just before this one had some wonderful points I mean, there are many presentations and guidelines on on how to design things well, but I sort of Hope to invite you to look at the things that we all use on a daily basis a little bit differently And also the things that we make as as Drupal developers project managers as a team For ourselves basically within Drupal, but also for our clients and the websites that we make for our clients so I Don't have many bullet lists. I don't have many Drupal slides, but I have someone great examples. I think of Well a design fails and even touch base with Drupal, of course so the bad design of everyday things one of the central themes in the book is that users often get blamed for doing things wrong or they blame themselves, right and At Grimstone, we have a professional support services and I I regularly see support issues That start with hey It must be me who is doing something wrong, but can you please help me out here? So Norman states if an error can occur somebody will make it and It's it's it's this theme that I I want to focus on in this in this presentation Technology changes rapidly people change slowly I Think that one of the key points is that as new to not new technology Emerges as new software versions come out The people behind those the companies the developers that make them they forget the lessons of the past When it comes to putting the user first, it's often driven by Marketing departments that want stuff in there we want to put as many Functionalities as as possible in there and we forget to To focus on on the user So I think that the people who are the wonderful developers that the even the Drupal community is rich, of course They they they make wonderful functionalities. It's it's great code. It works well, but they are I think they're a lot of times They are ahead of their users so Here's the Norman door It's a it's a photo that it took from from Donald Norman's website. I don't know where it's located exactly but How how often do you walk into a door that you're supposed to pull and you push it or? The other way around right you just I had this this morning even in this hotel and you just slam into it and If you look closely at this at the same door you see A marvelous piece of work really some designer Really worked on a great sticker with all the typographic Things at the left and it's it says in German push and pull But as you can see the previous slide in the glare of the Sun, it's it's hard to tell right so you just You know it's a work of art and art doesn't have to to work. It just has to be appreciated, right? right, so Often with some some small visual cues Usability improves drastically without getting obtrusive, right? So more doors Here's a photo that I took at the local supermarket and I go there every Saturday to do groceries and in Holland From what I gather for my Belgian colleagues and my English in-laws is that we are We're sort of famous for our dairy products. We have a lot of them a lot of sweet milk-based desserts and products and there's like an aisle of 30 meters of refrigerated cells with this stuff, right? And you know the you have to open the door at the the slightly embossed latch But it's hard to tell the difference because the hinge side is almost identical and you know I don't have very long fingernails, but I am I often crack one when I try to open the wrong one Side and I observe other people doing that as well and there's this obscure yellow note at the hinge side So there's a space of about two meters With a doorway leading to the back of the store and then there's the deep freezer cells and they put handles there and the yellow Notice at the handle side and that one works Right. I never designed a building before I've seen the site and met the people who will be using it. I Think it's a great quote that applies to us all too Frank Lloyd Wright He was an American architect who apparently worked on on a thousand buildings and completed like 500 books So I took this photo from the the building that I I Worked previously and it was it was a cool building. It was a it was actually featured in some some design magazine But the the the array of buttons at the front of the the building they controlled all the lights and There were exterior lights and it had like an open floor You could look up onto the first floor, but you couldn't see what lights you switched off with every of the buttons So what happened was is that the last one to leave? Sometimes me sometimes others But we would we would be coming into the office the next day and lights would still be burning, right? Where in fact we might have turned on the lights because the switches weren't marked So here's a screenshot I'm sorry. It's in Dutch, but it's obviously the the publication settings for for Drupal and we tend to deliver our projects with handing out information to our clients on adding keywords and some SEO stuff in there, right and what you see is that That our clients tend to click on everything and they fill out everything and then sometimes things conflict or mix up Or they you know, they are marked. There's a clutter there. So Okay, different example here is the the remote control for a Siemens cartridge type AC unit the square one in the in the ceiling Well in Holland we have hot days. We have cold days But we use the AC unit daily, right? And we always had Troubles with the remote control by which it you know since it was in the ceiling you rely on the remote control And there are several buttons on there But you know the M swing and the a swing were the most ambiguous ones to us So we actually had a support engineer from Siemens come in Explaining to a small team what the buttons did and I you know, obviously some people were ill or I was out that day and I missed that So, you know for four years when when it was installed. We had we had a Fighting with the Siemens AC. We actually had a copy of part of the manual That was lying around so people could look it up. Anyway, we used it daily, but we had we had a lot of struggle and Here is the tiny mce editor with two very similar buttons and We use this in our projects and there was one particular project for a client last year that had a lot of content like Several thousand pages, right? There was a informational site. It was very a content rich and what happened was is that apparently the The website went to production with like thousands of staging URLs because the client had been using the wrong button Right, and we tend to blame the client, but is it really the client's fault? Anyway, we make good websites though Right so another example that I I took this photo. I had it from the internet We have these kinds of slight locks at our parking lots when you get your parking ticket and you can Get back to your car when you slide the car through the lock, right? No door opens, but I always tend to get the Sort of I can the wrong way, you know It's like the the stereo grams with with all the noise and you have to look at it real long And then I always see this in the reversed way And I just I just can't tune my head to see the right way And I have this with this as well, and I always you know, there's happens wrong all the time Where here's one from the citizen M hotel It's capable Amsterdam and it says to all late commerce party people and witches after midnight place your card on the scanner to enter You know and you get the card that you get when I check in you just have to hold it near and the door opens It's it's it's easy, you know It's it I think it's a nicely designed with some witty remark, and it's it's nice and works well better at least Right Flight safety instructions galore. I took this from a wonderful book that I have open here the art of instructional design By the way, I have a resources sheet at the end It contains all the the books and the links and the blog posts and links to the To everything that I that I touch here including some more so you don't need to write it down, but Anyway, the the actual page is a flip out so it's twice as big and what struck me is That with each type of airplane Times the types of the number of airline companies. There is like some new design for the safety instructions, right? so whenever there's like a new 707 coming out seems to me that there is some designer who who They go up to and say okay, here's here's another 50,000 and just you know work from scratch give us something new so Well, I came here by flight and what I see is that you know when the stewards and the stewardesses they They give the instructions on how this works, but everybody opens their their laptops and their iPads, right? So anyway, what could what could go wrong in flight, right? But here's another example. It's a roundabout it's near my house and In Holland, there's a lot of tax euros that go to infrastructure and I'm to be honest. I'm quite quite proud on how they do that because everything is in the right shape and in the right order Obviously, we have a tiny country. So there's not much to to maintain, right? But here cars have to yield so the cyclists go first So the the triangles that you see over there They indicate that the cars have to stop and the cyclists go first and we have a lot of bicycles in Holland Holland is a bicycle country So just a kilometer from there the cyclist yield before the cars right and this roundabout is governed by a small town the next town so not the same and Well behind the bush is a pool I have a nine-year-old who goes there on on his bike From time to time and to be honest. I'm I'm worried And I'm amazed that that nothing has gone wrong and I hope nothing ever will but there's there's a huge inconsistency there I think in Basic in system where you interface with the world Right and user license agreements I When I got my HTC desire phone last year it came with a Google premium navigation app and it works quite well So when I when I First started to work with with Grimstone I had a rental car and I didn't have satnav didn't have GPS navigation So I was I was relying on my phone to to to drive to Brussels and visit clients. I don't know the way in Brussels I can't imagine someone does but in any case Well, I was driving on the freeway 120 kilometers an hour when this popped up And I had to go through all 40 pages of license agreement because it has a very small screen, right? And then I had to purchase a license with my credit card Can you imagine that? So I was I was relying on my, you know a critical piece of interface with the world and I was sort of amazed that That they didn't include some form of piece of intelligence that that showed me this after my drive, right? I believe it's a route 66 thing actually, but the rest of it works quite well And this is the feeling that I get from from such, you know It's the the white tiles the ribbon tiles are for blind people with the white cane I'm not trying to make fun with blind people, of course, but There's a there's a different type of of ribbon when they have to cross But I somebody in his in his right mind put a stone there. So Anyway, this is and utilizes agreements for me And I have another remarkable image blah So, you know, who who who has actually read the The update for the license agreement on your iPad on your iPhone when it came out all back to back all 40 pages who read those Raise hands No, that's what I thought and hoped You know, I'm confronted with induced license agreement daily we have one in the in the hotel when we When we use internet and it's I mean, it's great internet as fast as cheap, but Everybody clicks it away, right? It's like a pop-up and I'm looking for the button don't bother me again next and there's people around me You know, I'm Computer savvy like to think so but there's people around me who don't even read the important pop-ups, right? so I'm not saying that That end user license agreement there are I mean, they're not important that they're not important they're an important part of of You know the things that we do software that we make they they belong with that but There was a great example that I that I once found I couldn't find it in time for the presentation But or I couldn't find it back, but it said well we need to to Offer you the license agreement. You're not gonna read it anyway. So click here. But if you want click here, so Drupal Right, so Drupal did a there was a usability study for Drupal early on this year in February It was held at Google and they took eight technology savvy people from Google and as usability studies go They have like this usability script that they post to people and they ask questions and tasks to do And then they observe them and it was recorded So what they did is they They put some essential Drupal functionalities to the tests including content creation Interfaces like views and styles and such So when you go to the URL the report is there the findings are there that did there's even a detailed report and there's a breakdown Into issues that you can help work out with so I think that's that's a great thing how to do that I don't want want to to get into that into the details now But I do want to go over the the findings real real briefly So what they what they concluded was that a new user feels confused and overwhelmed by Drupal's presentation of features and options alienated by unexplained terminology throughout Drupal helpless because of a perceived lack of support in the dark about the extent of Drupal's capabilities and uncertain about her His or her progress while performing tasks As stupid because they assumed they are drooping using Drupal incorrectly, which was one of the central themes that I started out with So from from Deez's keynote yesterday. I saw some remarkable things on what they did with usability. So Obviously a lot of things are happening and are improving Anyway, so I wanted to To show you this that all the examples and all the fun things that I that I showed just now they also happen in Drupal So Norman states if an error can occur somebody will make it There are a few principles on you know, why people make these mistakes and I wanted to to touch with those briefly so These t-shirts were tested on animals. They didn't fit. I Think this is a great. This is a great slide that will that will work in almost any case but a Common mistake that people make when trying to design something completely foolproof is to underestimate underestimate the ingenuity of complete fools Says Douglas Adams. He's the writer for The Hitchharkers guide to the galaxy, right and this is about users don't Always make the best choices They don't always use the quickest way to find information and they don't read webpages in a linear fashion, right? and I've seen Both clients as well as as the people around me Looking for things that were just like screaming to their faces like a big button at the top and they're missing that right? So instead users They they satisfies which is a term. I believe coined by Steve Krug The author for I don't mainly think it's a great book. I must read as well So it's a combination of that they try to find whatever is whatever Satisfies us and suffices. So whenever they they see something that might remotely Hold what they're looking for they click, right? It's an important thing to to take into mind Another thing is use metaphors and words And you know, there's this is a photo of a of a of a box from cool blue. It's a Hardware retail shop that we have in Belgium and the Netherlands and they sell all sorts of things of laptops and razors and tablets and dishwashers I believe And I love the way how they handle the entire process from ordering to to delivering your package To to returning it when when something is wrong Yeah, I like the thing what they did with the icons like you can't use a blowtorch to open You can't use an axe you can't use a saw but you can use a knife and you can use scissors But you know when using icons the thing is you know when you're relying on on metaphors People may not understand it or worse. They make it. They make take it to literally and I've seen people opening up search packages with a knife screwing up screwing up their Contents, right? So the case that I want to make is metaphors and words work best There's no intuitive interface not even the nipple it's all learned so When I submitted my my session on the Drupal com website I Stated things don't often don't work intuitively right and that there's often a mismatch between how things are made and How things how we perceive things intuitively in the world? And the thing is that users follow their intuition based on past experiences, right? They employ metaphors that are consistent with what they have already learned, but the thing is They have to be wrong, you know, there's misconceptions there. There's only half truths So, you know, I would make the case that there there cannot be an intuitive interface, you know, and you will run into the There's there's a lot of ambitious people out there designers who will make the case that Your interface should not require any learning on the part of the user, right? And I think that's not possible So that's when you bring out the nipple remark Okay, so How we really use the web? This is from don't make me think Steve crook that I mentioned earlier and I think it's a great slide on, you know the difference between how we how often Things are designed in a certain way even, you know applications in a very linear fashion Your clients also think in a very linear fashion We want to put up this first and then this and they use this eye tracing software to find out, you know How how users really use the web and this was really not an eye-opener when I when I first when I first saw this so Short sum up poor usability results in anger and frustration Which is what I what I had when I'm using my Google navigation decreased productivity in the workplace higher error rates physical and emotional injury One of the cases that that donald norman is is expanding about is he got involved in the in an exit In the study after the an accident with a nuclear power plant in the United States And I showed you the the example of the the roundabouts And well, I I hope that there that there won't be some physical injury there, but it can Equipment damage loss of customer loyalty So I I I spoke to to Steve Park's the other day and he he did a great job of of actually winning back a client that was so done with Drupal after two apparently projects that went totally amiss Because of of you know the the client struggling with with the way it was constructed and it costs money So if you go to to donald norman's website The link is in the resources slide. He has some there. There are many usability studies really, but there are some that that actually Have made calculations on you know the the minutes and and and seconds lost Especially, you know on in online applications and relatively large organizations the time that is lost You know because of poor usability and it costs money okay, so I Didn't want you to leave out some at least some guidelines and some you know help on on how to to improve things that we make and I think it's important to To to stress that I don't believe it's just The designers responsibility, so I made I have used the term design a lot But there are some as I said many there are many Drupal developers many of you who create Functionalities that are ready to plug in that we use that we employ in helping our clients and and you guys also make The interfaces you also you guys also Create on you know how that works how we need to operate it, so This I think it's it's important for everyone to to consider that you know Making things usable is a task for all of us as a team, but also individually Gilbert engineering is there anyone who doesn't know this slide Okay, good, so we have it on our office wall. I think it's a great illustration on you know the difference between You know how we make things and how Well speaks for itself I Want to get into the psychology of of user usability a little bit by Explain a little bit about design models and user models Also known as conceptual models and mental models and it's all about knowing your user and managing his expectations Right, so a conceptual model is how you think it up how you make it right and a user model is Basically how the user perceives the things that we make the things that you make you know and Designers often and developers as well don't often don't speak with end users and you know as a result You have suboptimal implementation suboptimal products and when you don't think of Proper user model when you don't consider your user and how he will perceive the thing that you will be making it Users are forced to make up their own user model Right and as I stated they're they're they're prone to be wrong because they're based on misconceptions in complete facts past experiences with other things So I think the the design model and user model art is a critical component Into into any software development into any module development everything that we that we make here Still you may be thinking well, you know What of it what is what has that to do with me? And I think it's cheaper for a reason it's it's all about the misconceptions between the the you know the Difference between what your user expects and what you create for him, right? So when there's there's a difference between the Conception model and the mental model your users will find your your module your website your own application Hard to learn and hard to use right often I think that That you know we will force the way how we make things the conceptual model onto your users And you need to change what's in the head of your users you want to adapt the users mental model Onto your conceptual model, which is which is training and which is basically what training should be all about so Providing feedback is critical. It's very important to to let let let know what's happening Otherwise people sent their prints like eight times. They turn their computer off and on And to be honest, it took me quite a while to find out that the the OS X Finder is only done searching when the title reverts back to the to the folder where you're at, right and I I will imagine that there are many people who will be having this question, but So provide feedback is important Provide constraints. This is a snapshot of the Ticketing machine at the Dutch railways at every railway station We have ticketing machines with this with this system on and I I think it's a it's great It's clean and it's it has very clear constraints So you have to go from left to right and at the end you will have to pay if you forget a step or skip one or do Something wrong. They have very visual clues very clear a very constraint affordances Affordances is all about how do I go about using this thing? There's many more in Donald Norman's book about this But remember the weight in Drupal where you have to to put in the weights obviously to to change the order And I actually had clients Asking say, okay if I put in like minus five does it float up or does it sink down? right and Affordances is where you make visually clear How it works, right? So now we have like we can we can slide things up and down Which is a great way to to improve based on affordances the trunk test It's I think is a great tool. It's also on our on our office wall It's all this this is from Steve crook Don't make me think as well, and it's about You getting into a trunk blindfolded taken out blindfold off and you have to tell like in seconds where you're at, right? so The importance important questions that you will have to be able to answer in like seconds is what website is this the site idea What page am I on? What are the major sections of this website or primary navigation? What are my options at this level secondary navigation? Where am I in the scheme of things the breadcrumbs? And how can I search? It's a great tool and I suggest that that you take into take this into account with With all your designers and developers and hang it on the on the on the office wall Jonathan Ivy. He's a senior vice president industrial designer at Apple Inc. And he designed the the iPhone and the iMac and the iBook So Well, you probably have heard about him There's a great interview in the Daily Telegraph and he says It's the finishing the back of the drawer You can argue that people will never see it and it's very hard to describe why it's important, but it just seems important It's a way that you demonstrate that you care for the people that you're making these products for and I think we see ourselves As having a civic responsibility to do that. It's important. It's right, but it's very hard to explain why so Another snapshot of my favorite box So this is a full blue again and at the bottom they they have this nice little thing that says ingredients, wood pulp, paper, some pentome collars, air bubble bags, some special skills, a lot of love and of course your order Now this is a physical product, right? And we're we're all in the business of making software But I think that this applies as much to the things that we make in in our you know Daily modules in our software as it does in products and in fact at Crimson we have a Physical box that we hand out to clients and it has some some important documents and a sign-off document and some goodies and a book And it it serves as a milestone for clients say okay We're done for you project is finished and another phase the support phase starts here Here's a snapshot of the website so One of the great things that I think they did is that at the top? It states you have eight hours and 90 minutes to ensure delivery tomorrow And you know when I don't know about you, but when I order something from the Internet I want it fast, you know, it's nice to have to receive real mail to receive packages and open it up Right, so but it's also a great incentive to you know to order now So I know when it's going to get there, but it also urges me to to make that purchase So I think that's a nice little detail that they there are many more but anyway, so Another thing how many is there anyone who knows how to to do the copyright symbol on Mac? How do you do that? How do you do the the copyright symbol on Mac? How do you type that? Yeah, it's option G. Anyway, I have to look it up all the time And same thing with the Euro sign. It's even harder for us. I believe in Windows It's like alt 0169 for the copyright, but anyway, you know, this is this is They're not doing everything right at that Okay, so I'm Going quite fast, but I'm almost through I Wanted to show you a very short video reel of guy Kawasaki and he was a He wrote a book called enchantment and the art of start And he was also involved at the the technology division at Apple And he's he's giving a lecture to two people setting up a company So he's he's talking to young entrepreneurs, but I think the the things that he says Apply as much to all of us working in our companies. I'm working for our clients because we're all basically in that business, so I'm gonna see if I can get that started The first thing I figured out and learns sometimes the hard way about Entrepreneurship is that the core the essence of entrepreneurship is about making meaning Many many people start companies to make money the quick flip the dot-com phenomena And I have noticed in both the companies that I've started and funded and been associated with that those companies that that are Fundamentally founded to change the world to make the world a better place to make Meaning are the companies that make a difference. They are the companies to succeed My naive and romantic belief is that if you make meaning you will probably make money But if you set out to make money, you will probably not make meaning and you won't make money So my first thought is you need to make meaning that should be the core of why you start a company There are three ways to make meaning first is to increase the quality of life My background is a Macintosh division of Apple computer Then I can tell you the total certainty that we were not motivated by making money We were motivated by changing the world to make people more creative and more productive We were trying to increase the quality of life for the Macintosh user and that was a great motivation It kept us going through many many difficult periods. We were waking up in the morning thinking how we could change people's lives a second way to make meaning is To write a wrong, you know that this fish is going to die after jumping out But to write a wrong means that you find something that's wrong in the world or you notice something that's wrong or you want to fix that This might be particularly applicable to not-for-profits where you know There's pollution or there's crime or there's abuse and they just they're very core is to end that wrong And the third way to make meaning is to prevent the end of something good That you see something beautiful something wonderful and you just can't stand the fact that it's been eroded. It's being changed It's being ruined So I ask you as you start your companies. You're not-for-profits your churches your schools whatever you're starting Please have one of those three motivations one or more of those motivations if you don't have any of those Motivations, I suggest that you rethink what you're doing. I think these three things are the key to starting a great organization right, so This is this is really a roundup to The principles of design thinking I think it's important that you know your users and you align with your users mental models And as I stated just now it don't think that's just just a thing for designers But for all of us for designers and developers alike and product owners and everyone involved To to know your user know what goes on in their heads and to to look at the things that you make for them from their end primarily, you know Developers designers You developers also use coffee machines and and dishwashers and vacuum cleaners And you don't want 12 buttons on your vacuum cleaner just to provide so many functions on there Right, you just want like three switches at most Provide appropriate feedback In everything that we make Let let let the user know what's happening Eliminate the opportunity for error as much as you can right and All things you make will have to make meaning so This is the resources slide it's on slide share It has all the links You can click on it and it takes you to all the books and everything There's some some additional things there as well. There's rework The guys behind base camp. That's a great book. I must read at our office You really want to rip out some pages and put it on your wall? Welcome to Macintosh is a great documentary Well smashing magazine, of course, so have a look there And that's it for me so It's it's sort of my little gimmick if you see a Norman door and have the time to tweet it use the hashtag Norman door and We'll try to make a collection over on So the slides are on slideshare and if you were willing to provide some feedback for me and the Drupal count organization Then please go to my session note afterwards That's it. Are there any questions? There aren't good Well, I didn't have that many technical details obviously, so okay. Thank you then