Below are my notes from the course.
Putting this up here for my personal reference.
Section 1 Introduction: A good designer should be able to: - Understanding peoples problems, - Managing peoples expectations, - Seeing any argument from both points of view, - Skills to come up with multiple creative solutions to a problem. 70-90% of digital products fail, which tells us how important it is to give great care when designing digital products. 80% of projects have high budgets. Most of these failures will be documented and this valuable information can be learned from. Designer Shortage:- There has been a great boost in demand for designers when the iPhone was first previewed to the public. Iteration (Learning from the past.) is one of the most important parts of Design. Most digital designers believe the history of digital design began in 2000. Assumptions by background people are from: - Business: Design is about politics. - Graphic Design: Design is about aesthetics. - Psychology: Design is about behaviour. Realistically is about all of these things. Many Senior Members of company in charge of Design do not have a background in all three which can more repetition of mistakes. We will be looking at the mentors that mattered and made Design history. And thought us the things we can actually learn from. Links: - https://www.designcouncil.org.uk/news-opinion/falling-level-numbers-could-create-critical-shortage-designers (Falling A-level numbers could create a critical shortage of designers) - https://www.fastcompany.com/90252229/how-to-capitalize-on-the-design-industrys-talent-shortage (There’s a design talent shortage–here’s how to capitalize on it) Life coaches in Design:- There is a parallel between state of design today and life coaching. One consults a business on how an application should work, and another consults a person on how their life should work. In the 90s Tony Robins released the book "Awaken the giant within" and told the world the importance of Goal Setting. This was about a Yale experiment where a group of people were asked to write down their goals. And the 3% that did went on to have more successful careers than the rest of the class combined. But this turned out to be a lie. And was something he just read in another book that had also gotten it wrong. Both authors don't like to be called Life coaches or motivation speakers and they say they are something new. This is a similar trend in the Design world. People call themselves User experience designer or Information architect, to make it hard to pin down if they previously failed to meet their responsibilities or aren't doing the full job. One might call themselves a Web designer, while another might call themselves a digital brand strategist, while doing the same exact job. This book by this disgraced author still remains a best seller. And many authors went on to copy the story in this book. Another newer study conducted, showed that people who did do the goal setting experiment, and write down were they see themselves in the future, tend to apply for less jobs and achieve less success, and earn less overall. The lesson being flexibility and little stress is important to achieve goals. And the advice given in such books can be damaging advice. In the Design world there is all kinds of ideas, rules, processes, activities that don't help people and can be damaging. But some make good stories, and end up in books and become well talked about. The skills that make a good Designer and need to constantly be worked on are: - Communication - Perception - Creativity The design process used on one project could be completely irrelevant toward another project. That it was useful at one time, but absolutely no use to us now. Telling another of the software used on a project is useless compared to Communication, Perception and Creativity skills. There is no easy to follow system to follow every time. And most quotes about UX sound like nonsense and something sham life coaches might say. Even many of the quotes that will be used in this course can be often wrong and will have valid criticism. Design advice is like life advice, and what worked from one person, might not work for another. Each Designer has a unique problem being solved, with a unique set of requirements, and a unique set of resources, which will require a unique process. Links: - https://ask.library.yale.edu/faq/175224 (Q. Where can I find information on Yale's 1953 goal study?) - https://www.fastcompany.com/27953/if-your-goal-success-dont-consult-these-gurus (If Your Goal Is Success, Don’t Consult These Gurus) - https://uxmyths.com/ (Build your product based on evidence, not false beliefs. 34 Myths) Make it Preety:- Early Disigner worked on this principal and was backed by recruiters and Design/CSS awards. Which sent the message of make the design preety please. An overexcitement of rounded corners, gradients, fonts, colours. Drop Shadow, rounded corner, text shadow, backgrounds and gradients are a part of the Web 2.0 movement. The first conversations about User Experience where about making websites more usable. And 10 years ago books and courses about it critiqued the overuse of all this and broke down why it was terrible. That talking out many of these made it easier to use the website. To make things as bland as possible. This turned out to be wrong. Now the conversations about User Experience talks about the purpose of drop shadows and rounded corners and gradients, and how it make it easier to perceive something as a button. Learing about memory tells us having textured backgrounds can help make things easier to remember. What was read and the activities done would be easier to remember. Learning about style tells us why Web 2.0 style was killed off. Links: - https://dribbble.com/ (Discover the world’s top designers & creatives) - https://www.fastcompany.com/3058094/the-problem-with-flat-design-according-to-a-ux-expert (The Problem With Flat Design, According To A UX Expert) - https://www.nngroup.com/articles/flat-design/ (Flat Design: Its Origins, Its Problems, and Why Flat 2.0 Is Better for Users) Copy Inspiration:- About 10 years ago there was a lot of backlash and anger towards sites like Dribble, Behance, Adobe inspiration page, or a site like design fridge that no longer exists, because the focus was all about being preety. Today one of the most important activities as a designer to improve creativity skills, and perception skills is to be more aware of whats out there, is to take different designs from Dribble and recreate them in different styles to exercise the muscles and then upload them. This is an increadibly valuable practice, and every designer of any kind should do this as regulerly as possible. Never blatently copy a design and send it off. The goal is to copy the inspiration and not the design. To look at it and try and understand why it is done in that way. But this has instead lead to people looking up the design process of an existing project and just following that, when designers should be growing their perception skills and utalizing that. There will be a lot of focus in the industry where designers are told what Google's Design Process is, and about Design Sprints, and IDEO Design Thinking Process. These should only be used as inspiration, and never just followed to the T. It is encouraged to see how one Designer conducts their interviews, but it should never be done exactly the same way, as each designer has their own perception and way of thinking. It is important to understand why its being done a certain way. The goal is to think better so that a better design process can be made. This would better help one in whatever situation they end up in. It is vital to exercise the design muscles. Links: - https://www.intercom.com/blog/the-dribbblisation-of-design/ (The dribbblisation of design) - https://www.toptal.com/designers/graphic/design-plagiarism (Following Trends: Homage vs. Design Plagiarism) Section 1 Summary:- Doing something exactly as its been done is not innovation. Listing activities and a prescribed process does not teach design. Design is about how one thinks and sees the world. Learning to accurately see the world, and any argument from any point of view, and always being on the lookout for why our opnion might be wrong. Be a good listener to really understand people and what makes them tick. Why they do the things they do, and what they need. Learning to be creative is about learning to solve problems in peoples lives and ones own life. Be a therapist not a life coach. Following a process that works for another is a crutch, and will only help one get started but will later stunt development. The course must NOT be finished with an idea what a good designer is, because that would be missing the whole point of how deisgn thinking. --- Section 2: What is Design?: There is no one definition to design and every person has a different idea of what it is. Whats important is to have a skeptical mindset. Giving unsolicited feedback is being a bully and it makes one feel smart or like a hero. It can rob the confidence of the other who could have solved the problem themselves. Giving simple answers to complicated problems is the lifecoach's way and not the therapist's way or the way of a good support group. The First Design:- It is widely believed that the first design in history, or the first set of plans and requirements about how to build a product or artifact is by Qin Shi Huang. He noticed that in the army when an archers bow broke, the archer could not immidiatley pick up and use another bow. The weight and specifications were different. So he made a set of requirements or design for how every item needs to work that if it did not pass specific tests, it would not be allowed to be used in the army. The weight of each piece, the tension of each string and how much it should be able to take ,etc. This allowed for every archer to use every bow, and with that efficency and success they were able to conqure the whole of chine and form a single empire. There are similar stories for Romans and then creating specification for swords and armor. The quiestion becomes if fucntionality was all that was needed, why did they all have perticular aesthetics, and sacrifice money that could have been spend on other things for aestethics. A theory is the sence of unity that came from the similarity of the aestethics of their wear and weaponry. The differenciating status that came from perticular aestethics added to higher ranked soldiers. And designing for fear and respect from enemies and fellow soldiers. Sending the signal the army is able to afford to both look good and be powerful. The earliest of design specifications were more about emotion than utility, and the experience of the soldier than the usability of items. Some of the earliest designs were made into a book published in 850BC in the Mesopotamia area known today as Baghdad, and is called Book of Ingenious Devices. The book described 100 devices and how to use them. This was at that time as the engineering capital of the world, and would be for many 100 years after. The machinisims in the book thought us to make hydrolic systems, pumps and combustion engline. But this was not the purpose of the books creation, which was actually to make toys. A design for a toy elephant that could such up water and squirt it out again. Almost no invention comes out because of its utility, but because of emotional reasons, ex the first person to buy a motor car, when it would actually take several more decades to actually be of practical use. It is human experience that drives innovation. Links: - https://www.brainpickings.org/2013/03/15/alice-rawsthorn-hello-world/ (How China’s First Emperor Pioneered Design Thinking and Revolutionized the Branding of Legacy) - https://marcell.memoryoftheworld.org/Ibn%20al-Razzaz%20al-Jazari/The%20Book%20of%20Knowledge%20of%20Ingenious%20Mechanical%20Devices%20(2668)/The%20Book%20of%20Knowledge%20of%20Ingenious%20Mechani%20-%20Ibn%20al-Razzaz%20al-Jazari.pdf (The Book of Knowledge of Ingenious Machines) - https://www.atlasobscura.com/articles/book-of-ingenious-devices (3 Brothers From Baghdad and Their Remarkable 9th-Century Book of Inventions) Thonets Chair:- Michael Thonet was a German man who in 1859 created a chair called the number 14 chair. Considered one of the most important designs in history. Whats important here is not just the chair itself, but how it managed to get adopted globally. The number 14 chair relied on a new technique called wood steaming. By holding the wood over steam, allowed it to absorb moisture and be reshaped, and solid when cooled down. The entire chair is made of 6 pieces of wood and 10 screws. It was not only well functional but also easy to make. It was not the first item to be mass produced or factory produced, but it was extremely simple than any unskilled person could learn the process quickly and pieces were easy to be shipped and assembled at destination. Michael Thonet was a liftime carpenter, and did not create the number 14 chair until he was 63 years old. This meant a lifetime of experience in knowing what makes functional and beautiful chair. It was at this point the labor was divided. A designer who conceived it, and a factory worker who created it. This division of labour was argued about by Karl Marks, Adam Smith, and more to this day. It is not about if labour should be divided, but about what happened when they did. A designer specifies the structural properties of an object, and it is created elsewhere. A designer is therefore a planner. A fashion designer designs how the garment will look and it is made elsewhere. A chair designer designs how the chair will look, and it is constructed elsewhere. A digital product designer will design how the product will work, and it is created by another person. The word design can be thought to be synonymous with the word plan or the word strategize. You plan an event but you design a webpage. Links: - https://www.telegraph.co.uk/lifestyle/interiors/5043350/Interiors-Hooked-on-classics.html (Interiors: Hooked on classics) - https://www.core77.com/posts/21877/quick-vid-on-the-history-of-thonets-chair-no-14-21877 (Quick Vid on the History of Thonet's Chair No. 14) - https://dictionary.cambridge.org/dictionary/english/designer (a person who imagines how something could be made and draws plans for it: a fashion/software/theatrical designer, etc) Division of Labour:- There was no specific career called Designer until the mid to late 1800s. For web designers, a large part of the design directions, decisions made about how the website would look, comes from clients. The web designer acts as a facilitator between a group of people at a company to try to understand what is trying to be made and documenting it. Web designers are more like web design facilitators, to give a group of people clarity on what they want, and reach an agreement and show them what it will look like, before actually building it. User experience designers came out of another division of labor. Years ago as projects become larger, a new method of work called Atomic Design was becoming popular. ex if a blog web page was being made: are heading texts bold or not, what the the font being used, the amount of padding on a button, then adding of components on how buttons would relate to popups, etc. To have bits and pieces and work the way up to having a template, of how a list type of page would look. So that when the page is made it is known exactly how it will and should look. That button texts are always bold and action texts are always red, so that making new decisions are much quicker. Essentially the creation of reusable components. Then there came Jacob's Law, that users spend most of their time on other website. Which meant designing websites to work as similarly to other websites on the internet. That is is most websites place a button on a particular part of screen then we should do the same as user know where to look. There aren't real any laws of design, just suggestions. 90% of the time one shouldn't be innovating, just the other 10%. Some websites like http://ui-patterns.com/ can be used to see what other designers are doing. https://ux.stackexchange.com/ is a recommended site to ask questions about specific design problems and ask for the popular way of doing it, or the usual defined rules are for that situation. Then came a coding framework called Bootstrap. To have all the code in place and to decide where the buttons should go and how components should look. General Electric was the first to create a framework for how all their applications should work, and their programming team created the framework and shared it will all their teams so that when new applications were created the menu and icons would already be in place, and everything in the application would have the same look. This meant that for larger companies there would be a central team that works on the framework, and people in this team decide how the menu items and icons should look on all application and sharing with rest of team. Design guidelines for how app should look, feel and work. One person in individual teams draws the scribbly wireframes, called the User Experience Designer, and one person in the central team creates the components, and is called the User Interface Designer. Terrible role name designations as both are designing interfaces and both are responsible for experience. Links: - https://www.newstatesman.com/politics/2019/03/digital-age-could-spell-workplace-revolution-better-or-worse (The digital age could spell a workplace revolution – for better or worse) When to use Design:- The use of Design vs Plan is dependent on the importance of and activities comprised. Before making any decision, first decide how important it is on a scale of 1 to 10. How we rate somethings importance is dependent on the rules we have and the outcomes we expect to achieve. The more the rules, the more the importance of the decision. ex just going out for lunch vs while also having certain allergies. Most people stick to habits and make the same or similar decision, regardless of if it is the best option or not. These biases save time in making decisions, otherwise it would take forever to weigh all options and then decide. When opening a restaurant and deciding on the menu, it would be considered planning when using non complicated easier to make items for a menu, but if one were to create new recipes, that would require research and would be considered designing the menu and is innovation. The process of writing down the thought and notes of research is documentation or design. Design is like an important plan where we do not want to rely on existing solutions. Most elements in software will not be designed, as they are not important enough to be and we will plan them from pre-existing solutions. Links: - https://www.dezeen.com/2019/07/02/design-cant-solve-problems-christine-murray/ (Design can't solve all our problems, so stop pretending it can) Job Titles:- Two jobs can have the same job title, but have entirely different duties. The resposibilities of a particular role are in the job requirements. It is important to find out what the requirements and roles of a job are, and make it clear to others, as most others around you will be guessing. Advice from the book "Communicating the UX design" would be if one is starting work on a new project as a UX designer, one must make sure the boss and team have a shared understanding of what that term means as there is no fixed meaning. It is likely the team has many wrong assumptions based on what they have seen from misleading images and memes. Links: - https://www.yankodesign.com/2019/10/30/the-constant-evolution-of-product-design-and-how-semantics-stole-my-job/ (THE CONSTANT EVOLUTION OF PRODUCT DESIGN AND HOW SEMANTICS STOLE MY JOB…) Arrogant Design:- When somebody tries to create something new, without fully understanding the industry. Expecting their previous experience is more valid than other people. Arrogance is the enemy of design, as designer should be assuming they are constantly wrong, and keep the eyes open for reasons why we might be mistaken. ex an American fishing corporation hears of an area in the pacific which has a large number of fish capture, so they do research in making the perfect fishing hook, working optimally to the environment of that area, yet fail to capture any fish and go bankrupt, while the fishermen who grew up there continue having success. Wrong Rules:- Making rules and guideline for one medium based on other mediums and expecting things to work well. In the 90s newspaper companies in making and managing sites, designed webpages like a newspapers in putting all important content above the fold, without knowing that users would just scroll down and content of equal importance can be placed below the fold. That it did not need to be stuffed in above the fold or top of page. There are no rules in design. There are only guidelines and suggestions. Links: - https://www.fastcompany.com/90313720/a-comprehensive-list-of-ux-cliches (A comprehensive list of UX clichés) One Billion Experiences:- An app does not have an experience, it is the people using it that have the experience. You experience is yours alone. If there are three cars, a fun car, a comfortable car and a reliable car, and 3 people each with a different need from a car, it is likely all three would experience each car the same way, but each would value each experience differently based on whats important to them. To understand what people value we must speak to or interview them. To understand what they experience is something we can't do, but we can predict how well they will experience certain things or if they will enjoy how something looks. Our experience change drastically based on different factors in ones environment, that is where we are or who we are with, or the present or unpleasant sounds or smell of other things. Food made for airlines must be tried in the same conditions as when it will be had. The experience is entirely different. We cannot guess exactly how people will experience things, but we can try to replicate the environment and setting they will be in. There are billions of way of experiencing a product. The variable to change isn't the person but the environment it's being experienced in. Google and Yahoo have entirely different homepages, where one is filled with articles and posts. A search engine is used for its accuracy and quality. If yahoo became a blank page like google for aesthetic reasons, it would only end up loosing the people that liked how it was and kept coming back for it. Yahoo gets millions of visitors a day, because maybe these people like seeing what the weather is before making a search. In the rational 50s and 60s the vision of the future was food in pill form for substance, which turned out to be wrong as food is important to society as seem by cooking shows and all the restaurants out there. Each user values different things and experiences them differently in different context. We must make sure we are measuring the exact correct people in the exact correct context. Links: - https://www.infoq.com/news/2018/03/cooper-working-backwards/ (Alan Cooper on Working Backwards for Better Product Design) The Production Line:- User Experience is the overall experience of a person using a product or service. Everyone working for a company is in some way responsible for improving the experience of the product or service. There can be an entire design team working on a single product, and there needs to be a large amount of documentation for people in the team and throughout the company so that everyone is on the same page. A User Experience Researchers entire job might be to understand the values and experiences of the user and document them in a way that would help everyone in the company improve the user experience. For anyone working in the design department, an increasing part of their duties is documentation, making the duties of their job more specific over time. Some call this the McDonaldization of Design. A larger corporation does not want a variable output, but a consistent output. To not make the best one day and the worst the next, but to be consistent. The higher up a person is in an organization, the more risk averse they are, and the more they care about justification and documentation over innovation. Making products that are a good user experience has been a concern for as long as there have been products. When part of a team you are part of a production line, and it is as much about documentation and justification as it is about innovation. Links: - https://www.nngroup.com/articles/definition-user-experience/ (The Definition of User Experience (UX)) Section 2 Summary:- Designers were born out of the division of labor. Designers exist on a production line, and need to be able to communicate with the rest of the production line. On the production line, your role at the company is different from someone at a different company with the same job title. It is up to you to research what a job involves, and the designer at one company does not do the same thing as a designer in another company. People don't choose production for logic reasons, and the digital world is a more extreme version of this. Most digital products are designed with logical ideas, and industrial or corporate processes, when the internet is the most emotionally fuelled place mankind as ever made. --- Section 3: Getting Started (Exercises) Good Designers:- There are no right answers. Compare with what answers at end of course. Input:- As a designer it is important to have new daily input of ideas and store it to be used when you later need it. How certain problem were solved and such. This is important to have good sources of input, because of the Signal to Noice ratio. Online there is a lot of noice where people regurgitate the same ideas, and not think things all the way though, with a focus on quantity of content vs quality when throwing out ideas for the purpose of promoting themselves or their brand. Signal would be the genuinely interesting ideas to identify and read to enrich oneself and learn. It is important when reading a blog or article to understand the author's motivation for the post. Medium has some signal and a lot of noice. Invision has a great blog but is unlikely to criticize design by committee or collaborative design as they are a company that makes a collaborative design tool, and all these posts are made to market that, when creativity is something that is hard to achieve as team. - https://www.invisionapp.com/inside-design/ Adobe's 99U is a really great blog but its important to read the article while keeping their motive in mind. - https://99u.adobe.com/articles The blog is Don Norman, the author of The Design of Everyday Things, is great and insightful, and challenges perceptions. - https://jnd.org/tag/essays/ The Nielsen Norman Group is his partnership with Jakob Nielsen, and they have hardcore research reports on Design and Usability. They primarily do training and consulting, so its important to keep in mind that they will likely never cirque their own work, which compromises their blog. - https://www.nngroup.com/articles/ The integrity on Don Norman's page is better kept as it is his own reputation and integrity that are on the line. - https://jnd.org/tag/essays/ One must go through their daily list of inspiration and articles read, and think about the motivations behind them and if a good range and quality of opinions and contradictions are obtained from the article sources. More new ideas can come from architecture or print design or other that can be applied to digital design. It can be more important to look at design inspiration than looking at the rational behind why something is done a certain way as most post work rationalizations can be a complete lie. More can be learnt from visually looking at a person's solution. Some of the most important parts of design can be the parts that are hardest to articulate, and can also be the parts competitors aren't looking at. By looking at visual solutions to complicated problem, a deeper understanding can come rather than from reading it. Dribble is one, - https://dribbble.com/shots Designspiration is another and can be better, - https://www.designspiration.com/ Abduzeedo has their top inspiration for the day on page, - https://abduzeedo.com/ The point is to look at these things, store them in our brain and have that interesting solution to a complex problem that we know about and can be inspired by at any point as we work through design. Researching Values:- First we look at Our Values, by looking at our phone and asking ourselves why we picked this phone. For each reason we explore it by asking ourselves why 5 times, to really understand what it is we value. Why did we choose our phone and what it is we value about it. One person might say I use google maps a lot, and the why to that might be I did not want to print out a map every-time I go out and the why to that might be I did not want to waste paper and the why to that might be I care about the environment. It is really important when we design a product to know the values of the customer. We must know if the problems with the product contradict the values of the customer. A lamborgini is a bad product is the customer values price, reliability, convince or comfort, and it is a good product is customer values speed, excitement, style. We then ask another person what they value about their phone, and ask other open ended questions, and not leading questions, to find out their values. When asking open ended questions we must let them get out all their thoughts, before asking another question. (Why? or Why is it important to you?) x5 to get to root cause of user values. Job Title:- Current Skills: - Ask your current boss, old boss, coworkers, close friends, family. - What do you practice most?(Most, second most, third most) Net Job Responsibilities: - Search local jobs and companies you want to work at, and call them and get more clarity. - What skills do you need?(Most, Second most, third most) Future Skills: - Look at the career you want to have. Reach out to the person who has it. Find out what skills you need to learn. - What do you need to practice?(Most, second most, third most) Design jobs listed about and responsibilities can be vague. Collaborate closely with can mean Communication and Teamwork skills. Can say requires innovative design then also say iterative design. AB testing and data informed product design development is indicative of iterative design. This is something to clarify as they are not part of innovative design process which requires very different skills. Design thinking can mean thinking like a designer or can be a reference to the actual process called design thinking. Create and own the design process can be listed which is in contrast to using the process called design thinking. Most senior jobs require creating and owning a design process. Companies will appreciate a person critiquing the the job listing as if it is valid you will be on their radar of possible choices. Can say I just want to be clear on a few things listed on the job listing so that I can work on it and apply to you later. Design job adds can be vague, and the company will be glad to have you reach out and give them and yourself clarity on what is being looked for. Most junior designer will not need to collaborate a lot, and might be given an assignment that they need to return with in a week. Looking at LinkedIn at people in senior roles, seeing their work history and how they advanced, reaching out and asking them what skills did they master to jump from one level to another in the industry, will give you a list of skills to master. Could be practicing dealing with technical people, or practiced on presentations skills, or practiced tweaking visual designs to make things crisp.. ,etc. It is important to reach out to these designer rockstars and ask them what they did or deliberately practiced when at our current place in career. Support Group:- Comparing any digital design process with any design process in another discipline, is that there is one stage vitally important to other disciplines that is missing in most digital design processes. And the stage that is missing is called Crit, short for criticism. A structured feedback session where senior or fellow staff will tell you about what you missed or what problems it might have. This is a vital stage in all other design disciplines. The reason it is omitted in digital product design is because it is believed that data or logic rules the way, that google analytics is more insightful than Crit for feedback. Feedback comes from random people at random times than in a structured stage, which makes digital product designer bad at feedback. New aspiring designers should reach out to cool businesses that they are interested in working at and ask for a live brief, or an actual brief they use for clients, which are problems actually being worked on. Take the feedback they give you and publish it. This is better for personal portfolio that making your own brief. Reaching out shows you are keen. Design Brief:- As a designer you will be the person filling out the design brief. It is not in the customer or clients best interest to write a good design brief. A good design brief is for the designer so that they are sure they get it. The reason why it is not in the best interest of the customer is because once it is filled out they no longer have the right to change their mind later. If the brief is not filled out, it can be slightly changed throughout the project. A common question in design is, how do you know when a design is complete?, and the answer is when it meets the predefined requirements. Without predefined requirements the design is never complete. For contracting/freelancing writing good design briefs is important. Depending on the project, the brief format may look different. Below is a sample and explanation. --- - Client/Company: - Project Name: - Budget: - Final Approver: (The person who decides if the project is finished or not) (When when a new person takes this place, the whole project has to be start over) - Other Stakeholders: (Important that all stakeholders are written down and known, as they all have a say in the project) - Main Contact: (Phone number or email of one of stakeholders, to ask them questions or arrange something.) *** - About the Client: (Ask lot of questions about the company, how the company works, the culture they have. They might already have a process in place, that they want the project to fit into. They might have a team with specific skills. And the people that might be useful to talk to. They might also use specific software. We must ask the client to explain about their team, how they work together, and what their processes are. As this will get us a much better idea on how to get project approved eventually.) - Project Goals: (Is most important. Where we ask, how do we know when the project is complete? How do we measure if the design is successful? We must know the metric that will be used by the client/company. eg. We are trying to get more signups, we need you to redesign the homepage. Then the project goal is get more signups. Ideally we want to know the metric of how they will know if project is successful, as they won't implement the design well after the project is completed or handed in. This gives us something to aim towards. We also want to be careful that the solution is already prescribed to us. People usually talk about solutions when giving us the Brief. Wanting to redesign the homepage is a solution. Wanting more signups is the problem. What we want is a description of the company's problem and not a solution to the problem, as it is our job to find the solution.) - Target Audience: (What area they work in? Their Age? The more detail we get the better. We needed this because we need to find these people and test parts or the whole project on them later. We are going to research them and see how they experience the world and the things they value. If there is already an existing product they want to improving rather than a new project on its own, then we want to ask things like where do they use this product?, how do they use it?, anything they know about the target audience?. We want as much information upfront as possible. ) - Deliverables: (Almost as important as Project Goals. This is what will be provided to the clients/company. We want a good idea of how the deliverables will be accepted. It it is icons, do they need svg files. We need to know the file format. They could be using different design software as they might need to make edits in future and will need in that format.) - Scheduled Sessions: (We will need sessions with the stakeholders, the final approver and any other contacts, to make sure we are on the right track. This is really important to get feedback. We need as many sessions as possible. It can be hard to know what will be discussed or presented in these sessions upfront. There is a chance the clients will already have a schedule in mind. If they do not, some ones will be, a meeting to present research after meeting the target audience and finding out how they are using the existing sites or how they work without any technology, and a meeting to present that research back and see if they interpret it in any way different from us. Before final designs are presented, we will need to present wireframes or intermittent designs. This is important as they stakeholders do not want to be left out of this process. They want to be kept in the loop, have their say, and have us pass their approval. Realistically it doesn't end after presentation of design. They will ask to change things as they will say its not technically possible, or we have made changes to how we do things or we don't know if this will work with our customers, and they are the ones potentially paying the bills. So we may want to schedule multiple presentations of final design. It is worth scheduling this upfront, as it tells the client how many revisions they can make to final design. People will say iterative design is part of design process, but our part in it is only for a set period of time and we want to know when it's done. If we tell our customer they can have 2 or 3 stages of revisions, they are better about giving feedback earlier on. ) - ## Extra Notes: - Branding Keywords: (4-5 adjectives that describe the personality of the brand. By defining the brand adjectives upfront, it stops us from having superficial conversations about the aesthetics like I like this, do you like this?, and instead, does this represent the brands personality?. Which is a much easier question for us the designer, and anyone giving feedback to answer as well. Most companies hav done branding exercises to find 5 adjectives to describe their brand are. We must make sure everything lines up to how the brand should look.) - Branding Guidelines Supplied: Yes/No - Design System Supplied: Yes/No (If they alrealdy have a component library they use for their designs It is important to ask this.) *** - Tone of Voice: (We want to know if the brand has a masculine or feminine feel to it. If we are trying to present something that has a serious or playful tone. It will have a massive difference how we make design decisions.) Masculin(10) to (0) to Feminine (10) Young (10) to (0) to Mature (10) Luxury (10) to (0) to Economical(10) Playful (10) to (0) to Serious (10) Modern (10) to (0) to Classic (10) *** We must try to get this filled in and signed, so that once they have said what the goals are, and what the branding keywords are, they can't go back on it. And that is very important for us the designer. This is a business and you are a member of the production line. You need to know exactly what role you play. Depending on what the product is you are designing or the problem is you are solving we might need to go on for several sheets. Maybe you speak to an engineering firm, and they say we need our engineers on sight to be able to log problem they report onto a mobile app, so we need to design a whole mobile app, then we would need more than one page to make sure we have all details filled out beforehand. It is recommended that even for personal projects, we fill out the briefing for ourselves, so we know when we are finished. --- Section 4: Design Process Introduction:- Never follow an out of the box Design Process. But you do need a design process, and it has to be your own. Make your own plan, get it wrong and learn from it. We will look at the steps most processes have, and some of the processes most people use. We make a guess of the activities and tasks we might do, at each stage of the design process. There is no right way. No Process:- We are innovating and there is no prescribed solution, or simple 5 step process for success. Research, Analysis, Ideate, Test. Never copy a designer's style or a designer's process, and think for yourself. A designer must have a process for a project, and document something that the whole team has agreed we are doing, This module is about a standard design process, and it is important to have a design process to aid communication with your team. But you should never copy a design process exactly from a course or book. We must interpret these building blocks that make up a process, arrange it and make changes. Make it our own to suit the project at hand. There is no successful guaranteed to work design process. First UI Designer:- The B52 Bomber during WW2 has a User Interface that was so complicated, that they needed to employ design processes to improve it. A third of the planes lost during WW2, were lost due to human error. One common error was to raise the landing gear, after the plane was already landed. This would happen as the levers looked at felt the exact same, with all right next to each other. The sheer cost and damage to the aircrafts led the US military to try something new, with the help of Alphonse Chapanis. He realized the issue were the levers, and so he created two new designs for the levers, that felt different in the hand because of two different shapes. They looked different and they reduced the number of times a pilot raised the landing gear after the plane had landed. This could potentially make Alphonse Chapanis the worlds first UI designer, and not the designers of the interface in the B52 cockpit, as the placement of elements in cockpit were likely guessed as to be the best position for pilot. The difference between the two involves understanding what a basic design process is. There are a 100,000 design processes listed online, but they all boil down to 4 steps (not strictly in order), - Research: Do your research, - Analysis: Analyze your research, - Ideate: Generate ideas, - Test: Test your ideas. Some people say the first step is empathize, which is really just emphasizing the importance of listening to people, which is just a part of Research. There might be an extra step that says prototype and test, but prototype is an activity done in the testing phase. Before the importance of user interface design was know, it was common to blame the person, now the interface is blamed. What used to be a human error became a design error, thanks to the cost to the war effort. Links: - https://www.ft.com/content/19781330-e5cd-11e9-b112-9624ec9edc59 https://engineering-programs-2018.blogspot.com/2019/10/boeing-report-highlights-human-factors.html (Boeing report highlights human factors no company should ignore) - https://www.wired.com/story/how-dumb-design-wwii-plane-led-macintosh/ (How the Dumb Design of a WWII Plane Led to the Macintosh) Design Process:- The four steps in every design process are Research, Analyze, Ideate, and Test. There are three major problems people make with a design process. The first is not realizing there is a design process. These four steps have to be taken regardless of the design decline, whether its fashion designer, interior designer, web designer, or user experience designer. Showing a web app to another and asking them how to get more signups, more buys or another activity, and getting a answer back on the spot, is not designing. - Design must involve researching, - analyzing the research, - coming up with ideas and - testing the ideas. It is the same process with a doctor, where they run tests or research what is wrong with a body, they then analyze the research, then come up with ideas, and finally test those ideas or sending the patient away with medicine. The B32 cockpit interface cannot really be called a design as no research was done before determining the placement of elements in interface. Alphonse Chapanis in his research, analysis, ideating and testing, developed a design to solve the problem that pilots faced with B32s by redesigning the old levers. The process is different for every project, and is up to you to figure it out. - Without a process, it is not designing but deciding. Links: - https://www.designcouncil.org.uk/news-opinion/what-framework-innovation-design-councils-evolved-double-diamond (What is the framework for innovation? Design Council's evolved Double Diamond) Process Problems:- Every element of every design ever created is some form of compromise. Every element of every user interface is a design issue to some people, some of the time, to some degree. There are 100s of 100s of design flaws with Youtube or iOS, and 100s of 100s of design flaws with every possible solution to the problems that Youtube or iOS solves. The designers of Youtube or Apple know of them for sure. We ideally want a redundant amount of research, that most of it is going to get thrown away before we analyze it, and find out what is useful. And when we generate ideas, we want to find a 100 solutions, and try and identify the best solution to go for. If we were to trying to find issues with the B52 bomber, and only selected a few issues and moved on to next phase of design process, then there might be a 95% chance that the main issues we are trying to solve or improve for will still be happening. Assuming the cockpit already had 2 different levers, then we can think of multiple floors in this specific piece of design, such as how two different levers require two different manufacturing processes which is expensive, or how one is less comfortable than the other in hand, or how lever design in inconsistent. The solution to all design flaws can cause a much bigger design flaw. - If we looked at something and identify a problem, and fix it just because it was a problem, we would miss the important issues, and every change made will solve some design problem while creating other ones. If we are simply finding problems without identifying how important they are and fixing them, then we are caught in a perpetual loop. - You want to be drowning in research, before starting to analyze it. - And you want to be drowning in ideas, before you start to test them. Process Problem 2:- The first biggest problem with design is not realizing there is a design process. The second is not realizing there must be an excess of research before it is analyzed and an excess of ideas before it is tested. If you identify the important problem to solve, and you go with first idea for solving it that you came up with, then you are probably going with a bad idea, as it is usually the case that first ideas aren't great. We want to identify 100s of ideas before we begin to identify the best idea, and test the best few. The third problem with design, is not understanding that these four different phases of design, require different thinking. - - - Research - Analyze - Ideate - Test - - - Above is the double diamond process. In the first diamond, we collect all the research that is relevant, quantity over quality, as it might be relevant when we consider some other research. In the second diamond, we document all the ideas we find, because they might help us come up with with other different ideas and one might end up being valuable later. This phase is called divergence, as all thoughts and people are diverging in all directions, trying to find as much quantity of research as we can. Then when going from the many dots to one, this process is called convergence, as we want to eliminate as much information as possible, to get to the purest, simplest problem to solve, and best solution to problem at end. These two stages require us to think and act is different ways, and so we do different processes in divergence vs convergence. Divergence phase requires lot of energy and interactions. Convergence phase requires lot of quiet, and focused time, to go over all the information we have collected in our brains, figure out whats most important. Shifting between the divergence and convergence mindset, without changing the environment and activities being done, the change of creating a successful design is low. Walt Disney had multiple thinking or innovation rooms, where when people moved from one phase of design process into the next, they would also physically move into a different space, to help their brains adapt to they way they were working and thinking. Research and Idea generation are divergent stages, and Analysis and Testing are convergent stages, in the Design Process. Divergence and Convergence require different mental states, people and environments to perform well. Divergence & Convergence:- Design meeting without people being told before hand what they are trying to achieve, whether they are diverging or converging, time is wasted arguing over the same points endlessly about strongly help beliefs of how one thinks users behave or what one thinks looks good. Critical thinking can kill this off. Anything you research is good, all research is important, so write it all down. Collect everything, and every kind of research. What is nice about this divergence phase of quantity over quality is that there will not be arguments as there is nothing wrong that can be done. And arguments would be wasted time that could have been spent on research. As every discovery made in a divergent research stage is important, no meeting is needed until the end of research stage. A meeting while in this phase could be damaging, as any observation made by a colleague could damage potential perception and is also time that could be spent on research. In a convergence phase like creating final design for app, less people and smaller team are needed to keep focus. It is this phase where lot of arguments are had, and no one will be happy with the final design, as 99 of the 100 ideas you came up with were killed off. With design every person at company has a different opinion, from the marketers to the salesperson to the developers to the CEO. All potentially have several conflicting opinions that exist in their fantasies in their mind. Anything grounded in reality is not going to make people as happy as the fantasies in their head. Which is why no body will like the final design. A company after rebranding, or even book made into a movie are met by the public negatively because before, there were so many possibilities. The product at end of convergent stage of design process will never be popular. Some say if you work at a company as a designer, and you make friends, then you aren't doing your job well as people should hate you as you have to tell them things they don't want to hear. If they already knew how to design it then you would not have been hired in the first place. Working in the convergent stage of a process will upset people. We must ensure to manage expectations as best as one can and keep then in loop. We should not have a meeting if there is no agenda and if we do not know before hand if it is converging or diverging. - When diverging quantity is more important that quality. - The sign of a good designer is their trash bin should be full of discarded ideas at the end of converging. Summary: Do not use the design processes as they are, you need to try and vary it. Design is about curiosity, trail and error and not following a prescription. You must document your process, so that the people you work with know exactly what is happening and has been achieved at each step. Whether is just you and a client or you and a team of 30 or just yourself. We can create far better work when we document a process. Do not expect a great process the first time, but always create your own process. Research, Analyze, Ideate and Test. Divergence, convergence, divergence, convergence. Links: - https://www.peoplemanagement.co.uk/news/articles/most-meetings-not-lead-concrete-actions-academic (Most meetings do not lead to concrete actions, says academic) - https://www.designorate.com/disneys-creative-strategy/ (Disney’s Creative Strategy: The Dreamer, The Realist and The Critic) --- Section 5: Create Your Process (Exercise) Crit / Feedback:- Digital Product Designers are terrible at giving feedback. And feedback or crit sessions should always be private, as there are a lot of emotions around when critique and feedback happens. You might take it personally and feel hurt, or even feel attacked. On Career Foundry, there is an article where 3 designers critique 10 designs. This could be seen as an attack. There are two people in a feedback experiencing emotions. The person giving the feedback is probably feeling smart, and unsolicited feedback is a form of bullying. The rule of feedback is only give feedback to someone who has asked for it, and only receive feedback from someone who has asked you. A pro might say Can I give you some feedback? and then first ask some questions. In this public article, made with the intention of marketing for Career Foundry, it is clear that the person giving the feedback thinks they know better than the person receiving it. In every one of the 10 critiques, the designers claim they know best what the designer should have done, and this can be seen as an attack because all 3 designers agree with each other for each critique. If you have only been a designer for 30 days, but spent every one of those days researching a particular elevator to solve for a good interface, then you are the expert of that elevator's design and not someone who has decades of experience in design as they do not have more experience in the problem another is solving. - You are the expert of the problem you are solving. - The person giving feedback is an expert at design processes. Another problem with these 3 designers, is that they assume they are the experts, and the people who created these designs are not. The next rule of feedback is to seek first to understand, as you can not give feedback on something you do not understand. Just saying "What was going through the designers head when making this design decision?" is not trying to understand, that is just asking yourself a question. - To understand design decisions, you must talk to the designer responsible for the design and ask them yourself. When seeking to understand, we want to know: - what the persons motivations are, - what their budget is, - who they have spoken to, - what they have said, - and what their rational is for their decisions. One should never give or receive prescribed advice. And that mean someone should never tell a person I think you should make that button red, or this menu should work like this. There are no hard and fast rules to design. And the person who is giving you feedback is not the expert on the thing they are giving you feedback on, they are an expert on designing (research, analysis, ideate, test), that is the design process. An example of prescribed advice is this "When done well, UX design is virtually invisible to its users.", which is absolutely not true in all situations. The best interface is likely one where you get in or hold something and it automatically does the thing you want it to do. From module on Experience Economy, we will learn that things like the close button on an elevator is rarely every connected to the mechanism, and that the close button is purely, 100% for human experience. People push the close or open button and it makes them feel in control of the situation, and has no functional use. The reason its being pushed isn't functional its human and experience. Giving prescribed advice to solve all design problems is bad advice as well as bad feedback. In their Netflix critique, the three designers say the user should never be interrupted, and the Netflix main page autoplays trailers when you hover over it. To give this basic prescribed advice that nothing should automatically happen on a website, is bad advice. If you look at experience as a whole, and imagine the example right in front of us, when watching a film, half way through it there is a surprise, and it makes the film exciting for most people. There are a lot of differences between the design of an application and the design of a film, but there is also a lot of difference between the design of this application and the application being created. In the module on Perception, we will see there is also a mode of thinking someone has just because they have clicked the search icon or when they are browsing around the site. There is a good reason to assume that if someone is just browsing the site that they will welcome interruptions. It is not to clear if Netflix videos should autoplay on hover, but it is clear that the people who haven't done the research and are simply critiquing a piece of design do not know that it shouldn't. These 3 designers haven't gotten the understanding they need to give feedback but are giving advice. Good feedback begins with I feel or I don't understand, or I'm not clear about. They become responsible for their own thoughts and feelings. And they won't claim there is a set rule of how things are suppose to work and understand it. They will be telling you what their response is to your design. - An expert will not be giving feedback on the design solution, as you are the expert on the design solution. They will be giving feedback on the design process. The design process will be different for every project, and we should ideally never be using the design sprint or the design thinking process, you should always be creating our own process and it should adapt depending on the project being worked on. A senior designer has created and executed thousands of design processes for each project they have every worked on. And that is what they are an expert at. - Someone who is an expert at design and feedback will be recommending different stages of process and different activities that can be done at each of those stages, rather than prescribing a design solution to you. There are no rules to design, as it is too complex a topic to have rules for, but there are rules to giving feedback. - Feedback should always be private, - You should arrange a session in your process for giving and receiving feedback - Feedback should never be unsolicited. - People should only receive feedback when asked for it. - When someone asks you feedback, you should try and understand the problem they are solving in great detail before giving feedback. - Feedback should not be a prescribed design solution. - You should take responsibility for your own thoughts and feelings, saying I think, or I felt that at start of each feedback comment. It is important to practice giving and receiving feedback. It will not only help you learn how to be a better person or designer but will also help you help people around you better. It is recommended to fit a crit or feedback session into each stage of the design process with a group or one on one of experienced designers and ask for feedback on how to do your job better. We must be aware how poor the feedback system is in the digital design space, and we must seek crit out as much as possible, as the people around you will likely not be giving any. Links: - https://careerfoundry.com/en/blog/ux-design/10-classic-ux-design-fails/ (10 Classic UX Design Fails That Teach Us How Not To Do UX) - https://scottberkun.com/essays/23-how-to-run-a-design-critique/ (How To Run a Design Critique) - https://www.fastcompany.com/3019674/9-rules-for-running-a-productive-design-critique (9 Rules For Running A Productive Design Critique) - https://www.nngroup.com/articles/design-critiques/ (Design Critiques: Encourage a Positive Culture to Improve Products) Other Processes:- Here we look at some of the out of the box design processes that shouldn't be looked at, as we want to make our own design processes. Looking at these should inspire us with ideas on how we could possibly structure and the activities we could have in our own design processes. Every project we work on will require us to adjust the process slightly. The more inspiration and input you have on design processes the better. Do not blindly follow on of these processes. It is also important to know these processes as it is expected to be known by designers. There are a lot of well known processes and new ones appear all the time. A lot of academics take an existing process, add something and rebrand it. - Looking at the Stanford Design Thinking Process, it consists of Empathize, Define, Ideate, Prototype, and Test. The problem with this process is there is a focus on one thing in each stage of the process, which will likely make us miss other things. The first stage is called Empathize instead of research. The problem being most of Research does not deal with Empathizing. There will be research for budgets, what competitors have done, and many other things. Empathizing is just one vital area of research, and if this is all the research that is done, the final design would be pretty bad. Define and Ideate are same as essential parts of process. Test stage has been split into Prototype and Test. But this is fine as Prototype is a part of Test stage anyway, so we do not miss anything. Prototyping is only done for testing, but the small problem with splitting it is that there are many ideas you can test without having to create a prototype. - Now we look at IDEO's kit for Human Centered Design. Something they call it their Design Thinking Process. IDEO has reduced the 4 stages to 3 stages. Their process also overemphasizes Empathizing, instead of doing a range of research tasks. - Now we look at Design Sprints. This has taken the design process but given it a gimmick of, why not do the design process in 5 days. The big downside of this, though its mostly fine, as it forces you to speed up, is that to really innovate requires doing different things from competitors, or doing different things to what other people are trying. If everyone does a 5 day design sprint, the best thing to do is a sprint that is fewer days for something cheaper, and more days for something better. There is nothing particularly wrong with this process, except that following it is forcing us to do innovation the same way as everybody else. - Now we look at one that is more obscure, and it is the Jobs To Be Done Process. Something referenced as Clayton Christensen and sometimes from Anthony W. Ulwick who gave it to Clayton from HBS. This process has less of a process, but is the exact same 4 stage process. What is talked about in this process, is to focus on what the person is trying to achieve, rather than what the product is being made for. No design process contradicts this, so it is weird that it mentions this in particular as the focus. By hyper focusing on this one thing, one can become blinded to other important issues. One short quote from the book is, you don't need to give someone a lightbulb, what they want is lights, that is focusing on the thing they are trying to achieve. All designers are doing this anyway but this is a bad example, as one of the best parts of a lightbulb can be that it can be turned off. If someone wants a lightbulb, they don't just want lights, but the ability to control the lights. The brightness, the colour, etc. The Jobs To Be Done theory of design process, is similar to the misquoted meme of something Henry Ford did not say, "If I asked people what they wanted, they would have said faster horses.". Henry Ford did give us faster horses, but thinking like a designer makes us question, what does someone mean by faster horses, they mean I want to get from A to B faster. But it only means that if thought from a very narrow field of view. In London having a car is not faster than having a horse. What Henry Ford did give us was a horse that can shelter us from the rain, can let us travel with the whole family, that can be secured safely in a parking spot, that can store a lot of stuff, etc. And on an emotional note, cars are a perfect expression of our identity, and telling people who we are. The Jobs to be done theory is making that exact mistake. It is making us laser focus on a practical job. But since it is written by a Harvard processor, there might be something in it worth checking out. Make sure to understand these processes as you might need them for interviews or conversations. Also use them as inspiration to tweak your own design process. Links: - https://web.stanford.edu/~mshanks/MichaelShanks/files/509554.pdf (An Introduction to Design Thinking PROCESS GUIDE) - https://hbr.org/2016/09/know-your-customers-jobs-to-be-done (Know Your Customers’ “Jobs to Be Done”) - https://www.gv.com/sprint/ (The Design Sprint) - https://www.designkit.org/resources/1 (The Field Guide to Human-Centered Design) - https://jobs-to-be-done-book.com/ (JOBS TO BE DONE: Theory to Practice) Document Design Process:- It is useful to have the design process written out, so that everyone know what stage of a process we are at, and that tasks being done don't conflict with each other. For this exercise, we pick a general problem like, not eating healthy enough, or not getting enough sleep, or not exercising, etc. and try to figure out a design process to solve for this problem. It is up to use to use the standard 4 stages of a design process, or more or less. And up to us to choose the activities that we will do for each stage of the design process. You should not copy any existing process, but be inspired by them. We will later look at the essential activities, but for now we guess on what activities for each stage, that we would need for a good design process for a good solution. We might start with interviewing people with and people without the problem. Like people who consistently to the gym or exercise and people who do not. There is no guaranteed change that a company has a research phase. Some companies might try and come up with a design solution and not look up the problem much and just start actively trying to solve it. It is not that is definitely the wrong thing to do, but researching the problem before trying to solve it makes sense. Writing up the existing design process of a company, highlights the areas that might be missing or where enough work isn't being put into. Making mistakes, documenting it and revising it, is how you learn and how you will make a better design process in the future. --- Section 6: Critical Thinking Introduction:- Some say the internet has reduced our ability for critical thinking. Twitter stops most of us from saying anything controversial. Online courses remove controversial ideas by people giving a thumbs up to courses that don't challenge what they think, and a thumbs down to ones that challenge what they think. When what we said has been documented we can't backtrack. It would be terrible if politicians never changed their mind about ideas they had and stuck by it stubbornly. Recommendations make sure you're exposed to ideas that you already believe to be correct rather than ones that suggest you might be wrong. People are so shocked by ideas different from their own, that when a politician they did not vote for wins or nearly does, they blame hacks or cheating or conspiracies by foreign nations. That it can not be possible that there are opinions that contradict our own and what we think, but also that it's more popular. We ask how could there possibly be such a contradictory idea. We believe our thinking to be logical and rational, and have a solid argument for why we are right. It doesn't occur to us that the way we think about arguments is faulty. That maybe our logical argument is flawed because logic itself is flawed. The Birth of Rationalism:- There is no defined date for when one era ends and a new one begins. The modern era began around the 1500s. Some say when Descartes said "Cogito, ergo sum", that is "I think, therefore I am", was the beginning of the modern era. It could very well have been Christopher Columbus, when he said west to find a new passage to India, and bumped into the Americas. There was already some idea that the Americas did exist. But this was an era when people used to say, what is written in the book is what is true. It is written therefore it is. His voyages told us that the maps of the world we had and followed were wrong. But by finding out we were wrong, what was actually found was metaphorically speaking gold. Some of the longest navigable rivers in the world, perfectly harbourable coastlines, and some of the most valuable land. All this already belonged to other people, but it did not stop them from claiming and fighting over at the time. The modern era isn't about what is written in the book is what is true, but that maybe we are wrong so let's check. And for the next 500 years the heroes of mankind were the scientists, engineers and designers. All of these industries require us to say maybe we are wrong so let's check. It is part of a designers job to always assume you are wrong, and always be checking. Over the course of the modern era, we got really into rationality. That right towards the end rationality reigned supreme. - Rationality means we can reason with logic, instead of actually going in and checking. That we can argue about it and debate about it, instead of having to go and check to see what is actually correct. Logic is a kind of bias. It is a shortcut we can use to save us time, but is ultimately less accurate. And by the mid 20th century we loved rationality. It is such a time saver. Just think of a logical argument, and that is what is correct. Logic is often wrong as it is right. One case of this is with Khrushchyovka, an unofficial name for a type of low-cost, concrete-panelled or brick 3-5 storied apartment building which was developed in the Soviet Union during the early 1960s, sometimes compared to the Japanese danchi, similar (often government-sponsored) housing projects from the same period, which by some accounts were directly inspired by them. These ugly functional mid century modernist tower blocks popped up all over the Soviet Union and parts of Europe. There was a logical argument for them, so we built them, and at the first possible opportunity, they we were all torn down. It turns out what is rational is not always what is correct, and what is correct is not always what is rational. By the late 1960s and certainly by the 70s, we got a pretty good idea of this, and learnt that we shouldn't do something, just because you can rationalize it. And the most rational logic system created in this world is Communism. Some very intelligent people rationalized and logically thought about the best way the governments should be run, and that was what we chose. Sometime during the 70s we started to rationalize what had been going on the the Soviet Union, where are cameras and out press people could not see, and we realized the extent people could go to in the name of rationalism. And it was for worse than anybody had done in the name of a religion. You might say you have loads of rational arguments for why communism doesn't work, and we all do. - But the real problem is you can make a rational argument for anything. The modern era began, when we learned the value of challenging our beliefs. The modern era started to end, when we used rational and logic, to try and help guess how the world works, rather than find out. During the modern era we began to test things, but over time we started using this shortcut called logic and rationality. Our job to to communicate why something works or does not, and it might be the case that you work for an organization which still rationalizes like its the 1970s. Links: - https://bigthink.com/the-present/future-history-will-puzzle-over-the-short-lived-reign-of-rationalism/ (Plato Would Have Laughed at Our Era’s Faith In Rationalism) - https://www.lesswrong.com/posts/hgw3mYJnorskJG5RJ/why-don-t-rationalists-win (Why Don't Rationalists Win?) - https://www.britannica.com/topic/rationalism (Philosophical Issues - Rationalism or Apriorism or Intellectualism) Post Rational:- Antonio Damasio, a neuroscientist, found out something quite astonishing. While working with people who had a specific kind a brain damage, where they did not feel emotions, he found them unable to make decisions of any kind. When the average person makes a decision there could be millions of things to consider before deciding. And to save all this time and energy we rely on a bias, and that bias is deeply rooted in emotion. Antonio Damasio discovered that - we cannot make decisions without emotions. We are very good at making up a rational explanation for why we came up with a decision, but it's really a lie. In a corporate office, it is likely that the emotion that leads most of our decisions is fear. Fear of looking crazy or fear of getting blamed. In reality saying something rational and it turning out to be wrong doesn't get you fired, and saying something irrational and it turning out to be right does not get one much recognition. Emotions are the driving force to all our actions and decisions. Emotions are irrational and hard to talk about, especially in an office environment, when one is expected not to or is too scared to. The irony tough is offices are one of most emotional places on earth, and more often than not that emotion is fear. Aesthetics is one of the most important area of design, and people consciously distrust aesthetics for the exact same reason that they are subconsciously massively susceptible to them. That is, it is easy to manipulate people by making it beautiful. Emotions are the same, in that we consciously distrust our emotions because subconsciously we know they have immense power. Trying to look rational and logical in a design meeting, is a big issue because it forces us to do stupid things. It is irrational but can also be a big opportunity. Post rationalizing is when somebody tries to explain the logical reason for them doing or thinking something afterwords. - Sitting around in a meeting room with other designers, and post rationalizing why something is a better design option, would likely be a waste of time. Going and talking to customers and getting them to post rationalize why they do something, would also likely be a waste of time. If we stop trusting what people say and start watching what they do, then we might go to their house or place of work, and cooperatively design something they might actually use. - Talking about theory gets people guessing and post rationalizing why they think that guess. People are incapable of making decisions if they don't first feel emotions. Which would be fine if society did not expect us to behave only rationally, which itself is irrational. People's fear of letting on that they are actually irrational, forces them to post-rationalize, and try and guess why they think things happen or why they do things. This is true of coworkers and of customers. Asking people to rationalize, gets us lies. When people justify their actions or choices with a purely logical reason, it is a lie. All decisions or actions have some emotional rationale behind them. We can not make decisions without emotions. (Antonio Damasio's discovery that every decision is emotion based. We are expected to be rational beings in society. Humans are capable of rationalizing anything. There are millions of possible options for every decisions. We rely on a bias to make a quick decision. And when asked to explain why, we post rationalize it with logic. And we may even convince ourselves of it. But it would be a lie.) Links: - https://skepticink.com/tippling/2013/11/14/post-hoc-rationalisation-reasoning-our-intuition-and-changing-our-minds/ (POST HOC RATIONALISATION – REASONING OUR INTUITION AND CHANGING OUR MINDS) (When you ask people moral questions, time their responses and scan their brains, their answers and brain activation patterns indicate that they reach conclusions quickly and produce reasons later only to justify what they’ve decided.) - https://bigthink.com/personal-growth/decisions-are-emotional-not-logical-the-neuroscience-behind-decision-making/ (Decisions are largely emotional, not logical) Critical Thinking:- The first step to being a good critical thinkers is to accept that we are not logical or rational thinkers, and there likely is no such thing as a rational thinker. This would get us to think about how we are thinking and how to control our environments. Like Twitter, when someone makes a new Medium article, many take that post, recycle slightly and repost, without applying ones own critical thought to the post, which can spread flawed ideas, like user testing only needs 5 people. When people post on Medium, they are hoping for recognition that would likely get them a better job. There is not a lot of reason for them to critically analyze posts. When deciding where to go for lunch, when going out for lunch is an almost daily activity, it is not an important decision, and on a scale of 0 to 10, is maybe a 2. We rely on a bias for a faster decision, and maybe even rationalize or find a logical reason for why one lunch place is better than another. But we can not use critical thinking, as it would take us several days to decide where to go for lunch. Logic can help with some quick decisions, or even some of the 4-5 out of 10 on importance scale decisions. But the big high level decisions require critical thinking. At its roots any course in design is a course in critical thinking. There are few ways to ensure you are critically thinking: - Realize you are never 100% right, and the person you are talking to is never 100% wrong. Always be ready to be wrong, and always be looking for the reasons you are wrong. Also be thinking about the repercussions of being wrong. - Explore other points of view, or try out other points of view. If you work at a productivity messaging app company, see how your own teams productivity is effected by not using it. Notice where your point of view is and try moving it. Looking at an object from two angles gives us two different images. If you are working on the FAQ part of your page, maybe spend a week in the call center, and you will quickly understand what and why the questions keep coming. - Gather all the information. Data, testimonials, what experts believe, what customers believe are all okay. Combine it all together and you will have something powerful. Make sure to have all the information from across all mediums. - What motivations and assumptions are present. Be aware of the emotions and motivations you or the people you are working with currently have right now, and if any of them are conflicting with the problem trying to be solved. Do you or the people you work with have any assumptions believed to be true about people? Sometimes we assume people want the website to be easier to use, or that people want to complete the task quicker, when these don't have to be true. - Keep a single source of truth. Make sure you have a well documented single source of truth, for the problem you are trying to solve and for who, all the way though, because if it is not written down, you can change your mind a little about what you're solving. And if everyone on the team does that, everyone will be working on different projects. The larger the problem, the more we should to break it down into sub questions. A massive question would be how can we make people more healthy? A simpler question would be how can we make people exercise for 10 min earlier in the morning? Or how can we make people eat slightly less calories at lunchtime? Breaking down massive questions into simpler smaller questions, makes us aware of more specific things we are trying to solve one at a time. Critical thinking is what design is. Rather than using logic to formulate a good sounding argument, we try to find out the real answers to something. Documenting everything, making sure we are not changing our minds about the problem being solved, to never believe we are correct, to always be looking for reasons to be wrong, to question our assumptions, our motivations, our emotions, and to gather all information we can on the subject, and not just the data or from speaking to people but everything, including how competition works. Critical thinking is vital for making life decisions. Critical thinking is our antidote to rational logic. Links: - https://bigthink.com/neuropsych/lateral-thinking/ (The most undervalued skill? Lateral thinking.) - https://www.toptal.com/designers/ux/cognitive-bias-product-design (Understanding Cognitive Bias in Product Design, the Good and Bad (With Infographic)) (Some examples of cognitive biases that can be harnessed in design include the Goal Gradient Effect; Labor Illusion; Progressive Disclosure Effect; Social Proof; Halo Effect; Miller’s Law; Ikea Effect; Loss Aversion; Decision Fatigue; Variable Reward; Von Restorff Effect; and Center Stage Effect.) - Goal Gradient Effect: Motivation to finish a task increases as a user makes strides toward a goal. Breaking a larger undertaking into smaller steps and showing progress can be an incentive to save a little more for a dream vacation or walk more blocks to reach a daily exercise target. - Labor Illusion: People like to know a complicated system is working for them behind the scenes—for example, a ride-sharing site that shows how far away your driver is or a banner that reads “Retrieving your results." - Progressive Disclosure Effect: People often feel overwhelmed when embarking on a complicated project. Breaking it down into individual tasks that start off simple and then grow increasingly complex can encourage a user to stay with an endeavour, even as it gets harder. - Social Proof: For better or worse, people prefer to follow the actions of others when making decisions. Integrating ratings and reviews—even the negative ones—into a website or app helps a user feel validated in their choices. - Halo Effect: People’s opinions about one aspect of something colour their perceptions of an unrelated piece of it. It’s why attractive people are often seen as intelligent. User's initial interactions with an app must be flawless; otherwise, they’re likely to find fault with the entire site. - Miller’s Law: People can memorize only a finite amount of information. Designers should limit how much they present at once. Details should be broken into manageable chunks and organized into categories. - Ikea Effect: A user places extra value on things they help build. If a digital product requires a user to act as a co-creator in their own experience, they may be more likely to remain a consistent customer. Music-streaming apps, for example, allow users to do this by creating custom playlists. - Loss Aversion: People will go to great lengths to avoid loss, even if doing so means they’ll miss out on something better. That’s why free trials are popular; once a customer has a subscription, especially if they’ve put time into setting it up, they are loath to let it go. - Decision Fatigue: People tend to feel paralyzed by too many choices. Being faced with an abundance of options can dilute the quality of a user’s decisions, or cause them to abandon a site or app altogether. - Variable Reward: Rewards cause a hit of dopamine, the brain chemical associated with satisfaction. When a payoff, such as access to an exclusive deal, comes at random intervals, a user is more likely to keep using an app, thinking the reward is just around the corner. - Von Restorff Effect: When presented with a set of items, our brains tend to remember the one unlike the others. For example, designers can make a quote stand out from text by making it larger and applying a different colour or font. - Center Stage Effect: A user tends to select the middle item from a set of like choices. Designers trying to promote a particular pricing plan, for instance, may set it off by placing it between two others. Data Driven Design:- Data is the most valuable asset in the world. It's helped in accomplishing both great and destructive things. Our faith in data has led us to apply it to everything. Data can not be used for creating something new or innovation, as all data is based on things that do exist. But it can be used as an informant, but it can not drive design. Doctors use data. They aren't used by data. In AB testing, we use educated guesses to create alternate options and then find what works best for desired outcome. This would be considered the evolution of design, and not design. Mutation and survival. Some refer to this as innovative and iterative design. It is important when working on a project to know if you are iterating or innovating, as they require two different ways of working. But you can not just iterate alone. Booking.com for years were dominating the space and constastly iterating through the data they collected. This worked for a long time, but the data did not show the possibility of an Airbnb. If all designers in a company only know AB tests, then eventually they loose out to the competition. Corporations love data because it feels precise, and that they have a correct and wrong answer. The problem comes from treating data like gospel. The data points chosen for algorithms are biased, and the person writing the algorithms are biased. The value of a Designer comes from the developed skills of perception and developed skills of critical thinking. There is no point of being a designer unless you plan on being the top 10% of people good at critical thinking, and observing their perception of using their creative thinking and of acknowledging when there is a bias or data or logic being used incorrectly. And to be a good Data Analyst requires being in the top 1%, as there is so much room for misinterpretation and biases when collecting and analyzing data And unless one is both a good Analyst and Designer, they can not do data driven design. The two types of design are innovative and iterative design. Data analytics is hard, and there is more room for bias than most other fields. We love it because it feels precise when it isn't. Links: - https://www.youtube.com/watch?v=3QYsc48zzgs (Alberto Cairo: How We Lie to Ourselves With Charts | PyData Miami 2019) - https://www.youtube.com/watch?v=Sm5xF-UYgdg (How not to be ignorant about the world | Hans and Ola Rosling) - https://www.theguardian.com/books/2016/oct/27/cathy-oneil-weapons-of-math-destruction-algorithms-big-data (Weapons of Math Destruction: Cathy O'Neil adds up the damage of algorithms) Everybody Lies: The people who get the most angry about racism online, are the ones that make the most racist decisions in private. This anomaly is believed to be because people may have a set capacity for being good, and already being good on social media that day, means already having fulfilled their goodness, and they don't need to worry about being good in private. Plenty of examples can be found in book Everybody Lies by Seth Stephens-Davidowitz. Observations should be backed by data. And Designers love social psychology experiments because they help us understand people better. The single most cited sociology experiment of the 20th century was the Stanford Prison Experiment, in which a student misunderstood the experiment, and the organizer of the experiment was involved, tainting the entire thing. Multiple people went to write books and make movies about it, but we still do not know if the studies claims are really true. Never take social psychology as gospel, as it's never guaranteed to be true. The book 100 things every designer should know about people, can be used to spark our thoughts and get us thinking, but it absolutely not gospel and should not make decisions for us. We love social psychology experiments for the same reason we love data, or same reason we love talking to users and asking them what they want or how they work, because it feels factual, and feels like we are getting solid information. The possibility of everything a user says in a lie is too high. The data lies, the socio psychology experiment lies, coworkers lie and customers lie. Beware of people telling you their concerns about the user experience, but aren't concerned enough to research it. Also be concerned about people quoting socio psychology experiments. They are shortcuts to avoid design. Links: - https://www.theguardian.com/technology/2017/jul/09/everybody-lies-how-google-reveals-darkest-secrets-seth-stephens-davidowitz (Everybody lies: how Google search reveals our darkest secrets) - https://www.nngroup.com/articles/first-rule-of-usability-dont-listen-to-users/ (First Rule of Usability? Don't Listen to Users) (pay attention to what users do, not what they say) - http://mjparnell.com/bullshit_science_ux_design/ (Why so much “science” used in design is bullshit: Android, Losada and Frankfurt.) Focus Groups:- How do you know a product you're making is useful to people? After WW2, soldiers returning and overworked housewives in factories got used to ready meals. Betty Crokers had made a cake mix with everything needed in one pack, that only needed mixing with water and putting it in oven. It turned out that nobody wanted it. But they were so sure people did because everyone they spoke to said yes I want this. Betty Crocker brought in a man named Ernest Ditcher, a now famous marketing psychologist, and he said let's run a focus ground. He asked a group of housewives into the office, they sat round he quizzed them about what they like or didn't about the cake mix. They went home, made cake, and a week later reported their experience. The legend is one of the women after they spoke for sometime let slip that they felt guilty they were not providing for their family because it was too easy. Betty Crocker then changed the Cake mix so that you had to buy an egg separately and crack into mix. Sales then went up. This story is used often to prove people don't necessarily like products just because they are easy to use. But in reality it might be the cake tastes better with fresh ingredients or people perceive it will. People liked this story because it said focus groups work. We can now comfortably say focus groups do not work, and there are thousands of examples. The focus group Red Bull had said they would never drink something like it, that it tastes disgusting. The focus group for Aeron chair said they would never sit in something like that, that they needed a comfortable padded chair. It is now the best selling chair in history. Focus groups prove time and time again they do not work, and now we know why because of Behavioural Psychology. That people can not tell you what they did in the past, as they have bad memories about what they did just yesterday. That people cannot tell you what they did in the future, as they take out gym memberships for a year but only go twice. We are terrible at predicting what we will do in future events. The difference between a child and an adult is that children are emotionally honest. We cannot just ask people what they want because it turns out they don't really know. We have to find a while series of techniques to try and figure out what it is someone would use or buy or want if it existed. Asking them is not the way. Links: - https://www.theguardian.com/news/2018/feb/06/talk-is-cheap-the-myth-of-the-focus-group (Talk is cheap: the myth of the focus group) - https://hbr.org/2010/02/no-reference-points.html (Real Leaders Don’t Do Focus Groups) - https://analyticsweek.com/content/why-focus-groups-dont-work-and-cost-millions/ Eating Dogfood:- People are not emotionally honest to tell us what they want. Even children are not completely sure. One group that are sure is animals. In the 70s, dog food was low quality, and you wouldn't know what you would get in a can. There were rumours of the CEO of one company eating the dog food in investor meetings to prove it was healthy. The CEO of Alpo foods said and marketed, I feed my dog Alpo because I know it's good for him. That is it is so good, I feed it to my own dog. If the CEO of Alpo wants to check the quality, he just has to put it on the floor and observe his dogs response. He gets instant feedback. Paul Meritz from Microsoft was inspired by this, and he said to Brian Valentine, let's eat our own dog food. They decided to get their own staff to use Microsoft products, and observe the from afar. The Microsoft employees would now be completely unaware that they were actually giving good feedback. This meant Paul and Brian did not have to worry about the emotional dishonesty of peoples response, and only on how accurately they interpret peoples actions. This became known in the software design industry as dog fooding. There are many success and failure stories with this. Google buzz was a social network that failed, it was used by 20K employees before anyone outside got to try it. This helped iron out design issues and decide on features to add and take away. But there was a major issue when released. One of the main features was to automatically follow the people you email and chat with the most in gmail. But nobody wanted this because your best friend on Google Buzz could be your ex-wife, your therapist, or even your drug dealer. And not necessarily the people you want to be best friends with on a public social network. Google thought they were Dog Fooding but what they were actually doing was focus grouping because you cannot observe 20K people using a product. You can expect them to write and talk about guesses of what features they would think they would use, just like a focus group. In the early days of Apple computers, they became the king of dog fooding. Rumour was everyday a designer would watch a different member of staff using the operating system, identify things which looked like issues, or needs they had, and that same evening iterate a new version of the operating system and watch a different member of staff using a new version the next day. Apple and Microsoft were lucky because they were using a product used by all office workers in the world, so their own office workers became reasonably ok test subjects. People in different offices around the world might require different features and possibly even interpret icons differently. As time passed we learned we had to observe people in their own offices or homes to get a more rounded view of how different users work with our products. By the 90s Apple has the best user testers in the world. User testing is incredibly difficult, and we can misinterpret things people are doing, things they are saying, and having extra experience makes Apple the best at it. To be as good as Apple we must user test over and over again. It is not enough to stay ahead of the curve, but is a great opportunity to get regular practice user testing. Links: - https://deviq.com/practices/dogfooding (Dogfooding) - https://blog.codinghorror.com/the-ultimate-dogfooding-story/ (The Ultimate Dogfooding Story) Scandinavian Cooperative Design:- The US has always had a very scientific approach to design, seeing it like a form of behavioural psychology or anthropology. Generally the US believes the business should be run like a science lab or how people perceive one works. Some of the most important scientific discoveries from the last 100 years have come from scientists that think like artists. The discovery of penicillin, vulcanized rubber, shatterproof glass, all things scientists accidentally did something, got curious and looked into it more. Alexander Flemming who discovered penicillin was not the first person to notice it growing on his pitiridish, but went maybe this is suppose to be here, so let's look at it further. Flemming spent his free time doing art, which helped grow his perception skills, which could be what differentiated him from other scientists that had seen the same thing but had not given a second thought to. The best scientists don't follow a scientific process and instead work like artists. The true heroes of 20th century design was not the US but Scandinavia. Faced with limited resources and harsh weather, they had to be restrictive. In the 1500s they could not afford to have something break, so that had to have everything built be reliable and useful. Once the functional needs were met, they could then try to meet the emotional needs, but still had to be very minimal and sparing. Looking at their boats from that time, they managed to still have an aesthetic. They developed an immense skill in craftsmanship over 100s of years, while the rest of world relatively had more resources and could just throw gold at it to make it look nicer. It was not just boats and furniture that the Scandinavians became good at designing, when they created software, the general consensus worldwide was it didn't feel like it was made for them to use, except in Scandinavian countries, hospital software where instead of finding out whats needed and deciding where to put it into the softwares user interface, they worked with nurses to better understand what's involved in the job, creating prototypes with the nurses, and not creating then showing, but actually working together. Crating paper prototypes with them, so that when they built it, the nurses knew how to use it because they helped design it. When desktop publishing software came to the uk, most people were let go and told to retrain to be able to use the interface and come back. When the came to Scandinavian countries, nobody was let go, and it was a fairly straightforward interface for them, even having sophisticated features like being able to edit contract on images and changing type sizes, etc. The newspapers could have saved a lot of money if they worked with the people making the software. This was called Scandinavian Cooperative Design. One of the biggest furniture companies in the world in Swedish, and it isn't even a big country. Every furniture company tries to copy Ikea furniture, few think to copy their design process, though many have been trying for decades. Instead of treating the design process like how people believe scientists work, the Scandinavians started watching people working. Edward De Bono will later call this perceptual logic rather than rational logic. Your job as a designer is to perceive, not rationalize. Scandinavian Cooperative Design, was a process of facilitating the users to design their own software. Links: - https://www.theguardian.com/science/2012/sep/09/science-philosophy-debate-julian-baggini-lawrence-krauss (Philosophy v science: which can answer the big questions of life?) - https://link.springer.com/chapter/10.1007/978-3-642-23315-9_20 (UTOPIA: Participatory Design from Scandinavia to the World) Innovation Theater:- Every year Scandinavian Cooperative Design shows up around with world with a slightly different name. The first person that took this concept to the US called it participatory design. The reason for the name change was because the word cooperative sounded socialist. The most recent incarnation is called Design Thinking. We want to encourage designers to work with people who will use the tool, and we want to encourage designers to improve their perception skills, to understand what it is and why it is users are doing things. IDEO is a massively successful company using the exact same techniques used in Scandinavia. They brought together a cross functional team, with no hierarchy and worked directly with people who had the problems to try and find out how they would solve the problem best. They had amazing results until they tried to pass on the skills. Tom and David Kelly of IDEO have written many books and done many TED talks on it, to get people much more serious about design. Amongst other things, they told everybody that they have it in them to be creative. Creativity only applies to half the design process, and being creative is not binary, some are very good at it and some are ok. Most people who have heard they can be creative, assume it means the CEO or manager can design everything themselves, and have made the design work more exclusive and not inclusive. In 2013, Innovation labs popped up in design labs around the world, to answer the question to investors and stakeholders when they ask, "what are you doing about innovation?". The British Airways Underground Project claimed to be the first innovation lab in the sky, talking off from California, landing in London, with an innovation session taking place on the plane, making it the only airplane in the world not cooperating with customers, and in 2016 they shut down the innovation lab, as did many companies, as they proved to be anything but innovative. The labs consisted of cross functional teams from all around the organization who were there to try, find and solve the big problems that different customers or different parts of the organization have. The real issue comes back to refusing to use the word cooperative in big corporate companies. A senior manager can swan into the design lab and tell them what the correct answer is and which they should be working on, and which they should not, which ruins the entire point of the innovation lab. The other issue was IDEO thought everybody what their design thinking process was in a short workshop where people all expected to leave thinking like designers. One of Design Thinking's flagship products is the MRI scanner. MRI scanners for children can be seen with lots of cartoon art and stories encouraging kids it is not a scary but a welcoming place, with nurses dressed in a pirate costume. It has been documented why this is not a good design solution. There are specific ages where this would be a more scary experience. The design process is Research, Analyze, Ideate and Test. The design thinking process is Empathize, Define, Ideate, Prototype and Test. Research is called Empathize here, to get people to understand that they need to fully understand the problem from the users point of view. Doing research as a whole, would encapsulate speaking to the person and empathizing with them, but also speaking to people who have made similar products that are pleasant to use which would educate us how the make the whole experience more pleasurable. The real reason we see crazy quirky design processes advertised as cool design thinking approach is because of innovation theater. In the case of the children MRI, after a month the staff have likely lost the pirate costume and no one would be bothered to use them. The reason Scandinavian Cooperative Design has never made it big outside Scandinavia, is because of the way office environments are set up and the politics. People love taking design thinking courses and love having innovation labs because they are nice pieces of theatre they can photograph and video at stakeholder meetings and shareholder engagements and no interest in actual end user. Links: - https://hbr.org/2019/10/why-companies-do-innovation-theater-instead-of-actual-innovation (Why Companies Do “Innovation Theater” Instead of Actual Innovation) - https://www.ft.com/content/9e827b0b-a72d-3a52-8705-ffc27c1eeede (Fintech innovation labs as “innovation theatre”) Design Thinking:- Looking at where IDEO succeeded, they invented the worlds first affordable mouse. Before IDEO the mouse could only go up, down, left, right, and not all directions. When they presented the mouse to Steve Jobs, it was just parts and a rolling ball taped together. IDEO never failed as Designers, but only in teaching design. IDEO consisted entirely of cross functional teams without much ego. As Design got more involved in business, business got more involved in design. 4 out of 5 of Ikea's biggest stores are in Asia, 2 in South Korea. South Korea has had amazing success in designing products we all buy. They went from one of the poorest countries to one of the richest in record time. IKEA has a flat hierarchy, they work in cross functional teams, where designers are next to engineers next to marketing, all in a team together. They don't talk about doing it, but actually do it. Ikea starts all design processes not in workshops, but in peoples houses. Ikea likely has a better understanding of how people live in South Korea than Korean furniture manufacturers do. And that is how two of their largest furniture stores exist in a country far from its own. IDEO has perfectly emulated Scandinavian Cooperative Design to do amazing things in the world of design. Yasushi Kusume the innovation and creative manager of Ikea, has come out and said Design Thinking is garbage, that the over promotion of design has led to a deterioration of the quality of design on offer, that Scandinavian Cooperative Design has been repackaged as design thinking in a handy little 2 days workshop, where you spend way too much money on where you learn design is about process steps which are nice and easy to follow, but will actually ruin your designs. Design is not about a prescribed activity that everybody does and always works, it's a way of thinking. To improve perception, creativity skills, and listen more. A 2 day design thinking workshop will make a worse designer not a better one. IDEO is as successful as IKEA in a different industry. They have massively succeeded in using the Scandinavian Cooperative Design Process. They have massively failed at repackaging it and selling it as a 2 day workshop. We should facilitate users to be a part of the design process, but we should not let design thinking take over the design. Links: - https://www.designweek.co.uk/issues/5-11-march-2018/pentagrams-natasha-jen-design-monster-unleash-fix-world/ (Pentagram’s Natasha Jen: “Design is not a monster you ‘unleash’ to fix the world”) - https://www.designcouncil.org.uk/news-opinion/what-makes-knowledgeable-talented-and-skilled-designer (What makes a knowledgeable, talented, and skilled designer?) Summary: We love to assume the world is full of logical people using logical products, but it is not. Emotion is behind every action we take. And there is no such thing as a decision without emotion. Asking someone to rationalize why they did something, or why they would do something in future is asking them to lie, because they don't do things for rational reasons, they do them for emotional reasons. Coming up with a rational for why we did something or why a customer would like something is easy to us, we have been doing it our whole lives to explain every decision we have ever made. Humans are capable of rationalizing anything. We can easily come up with why a customer would want or not want a product feature. We cannot trust a logical argument anymore than we can trust a bias. If we battle out in a meeting room how a product should work, nothing gets done, as it stops us from learning and creating. The closer we work with person we are solving the design problems for the better. And this is Scandinavian Cooperative Design Process. With each new generation of digital designers trying to bring this to the wider world like participatory design thinking. It soon gets used as a buzzword to explain the same tired dysfunctional rationalizing in a boardroom with people who never meet their customers. Only now they are holding post it notes and suggesting ideas that look wacky for innovation theatre and not to help customers. - Some designers go undercover and work with the customers in secret in their own time. And when presented to the stakeholders later, they are normally happy to have some slides for the next shareholder meeting. --- Section 7 Research (Exercise): Test Assumptions:- This exercise involves taking 5 things you are pretty sure are true, but you have absolutely no evidence for them. The simple act of writing them and calling them an assumption, can be a benefit. The whole idea of testing your assumptions using this method, is based on cognitive behavioural therapy, where you take something you believe to be true about yourself, and you test it to prove that maybe it is not. Some people might say it doesn't matter if software looks nice, it matters if it works, and this would be an assumption. We assume if it runs fast people will like it, as an assumption. These aren't facts, there is almost no fact in design. If it is something only 3 clicks away... is an assumption. You could have an ugly and attractive version of site for experiment and check the metrics of how long people stay on site for. We assume if we change the sign up process of our website to have fewer fields, more people will sign up, is an assumption. This exercise helps us realize how often we are wrong, when we are absolutely sure we are right. Logic Fallacies:- Before we completely dismiss logic as unnecessary sideshow, it is important that we learn how it works and what it is, as everyone we work with will be reliant on the logic thing, and we will need it for part of our reasoning. There is debate of on Logic is and what it should be. It could be the belief of formulating a convincing argument. Striving for logic is like striving for correctness, and your proof that your correct is formulating an argument that has no flaws in it. These flaws are called logical fallacies. The problem is every argument has flaws in it. Every argument can be picked apart and there is no single truth. But that hasn't us as a species in becoming obsessed with logic, trying to find exactly why arguments don't stand up and therefore should be dismissed. And this is usually why politicians don't tell you anything anymore, because people have gotten very good at finding holes in their arguments, which are guaranteed to be there. It is also why designs don't have a philosophy anymore, as it can be picked apart. The site logicallyfallacious has a list of over 300 logical fallacies with examples and explanations, using which almost any argument can be picked apart. A debating class can help in learning to formulate better arguments and is recommended. Peterson is very good at formulating arguments, but most of the time he has nothing to argue about, he talks about how postmodernism is bad and should be done away with, but he doesn't really understand what postmodernism is, but he is incredibly good at arguing. He has great skill at manipulating logic that he always appears to be correct. But manipulating logic is not a very good skill for a designer. You don't want to never be wrong or win every argument. You want to be aware of when you might be wrong, so you can change how you're working. Everyone in your office is using logic, so we must be sure to be aware of logical fallacies. Some of the 300 fallacies are - Alphabet Soup: Where you confuse people by saying technical words, and acronyms, so it sounds like you are saying something smart and therefore you must be correct. Example #1: In programming CGI, a WYSIWYG interface doesn't handle PHP or CSS very well. If you sign up for my personal consulting, I will show you how to program effectively. The first sentence and second sentence have nothing to do with each other. The first sentence only purpose is to throw some acronyms and try and confuse people, so that it sounds like the person is smarter they are. If you are in this situation, you must get this person to explain what it all means, and what that first sentence has to do with that second sentence. This is a good fallacies to be aware of because technical people are going to do this all the time. To make simple concepts sound complicated. And it could be a trick they are doing to be right. Designers working at technical companies have also started to do this more, using very complicated sounding words to explain simple concepts. Doing user research some people say contextual inquiry, which just makes it sound like what being done is very important. - Ad Hominem (Guilt by association): The idea is you assault someones character if you cannot beat their argument. Very popular in politics, but also in design. Some might suggest a design solution, feature or idea, and the response from another could possibly be, yeah this other company does this and they aren't very good, and therefore it must be a bad idea. - Strawman Fallacy: Where you twist someones argument to make it easier to beat. Peterson often does this when criticizing post modernism. He changes what it is so it's easier to dismiss. People could do this, if for example, you gave a very good explanation as to why the background colour of the application should be blue, you could explain how its calming and how it contrasts better with some foreground colours, etc. And if somebody said I know you like blue, but I like red, so I think we should make it red. What they have done is twisted your argument. You didn't recommend blue because you liked it, but they twisted you argument to make it more simple, so that it's easier to push over. - Shifting of the Burden of Proof: Where you tell someone else that they have to prove something, to make it impossible to deny that it is not true. This is very common in design meetings. For example, people will say something like I don't like the menu, I think users will find it hard to use, so we should change it. They might be right that users might find it hard to use, but they are the ones bringing it up and not the user, so it is their burden to prove that the menu is hard to use. Imagine in the court of law if you had to prove you were not guilty for every single crime, then each of us would spend our entire lifetimes in court. As we could accuse each other of anything, and everyone would have to prove their own innocence. It would not work. Likewise, if everybody wanted to suggest what might be a design flaw, and left the designer to go and do all the research, they would never sleep. So if somebody wanted to suggest that something might be a usability issue, it is their burden to go and find out, if that is true or not. As you are already doing plenty of testing to try and find problems. Learn to find the fallacies in everything, every-time you read a book or an article, or watch the news, find one of their arguments and see how easy it is to find logical holes in the argument. This should be an ongoing project. Statistics has its own set of fallacies. One book to check out is "A field guide to lies and statistics". Data is the raw numbers you get back, and statistics is after a certain amount of analysis has been done already on the data. This is an interesting point to realize, because when somebody analyses the data, they are making it easier for us to interpret, but they are also making it easier for us to misinterpret. When you analyze your own research and document it in a worksheet, it is kind of like turning your data into statistics. Your making it easier for other to interpret, and you're also making it easier for them to potentially misinterpret. Another popular book about data fallacies is "Factfullness" by Hand Hans Roselyn. He has also got some good TED talks about how we fail to understand data, and charts and statistics. In the book he has 10 points to watch out for - The Gap Instinct(Locate the majority): Is there really a gap? Beware comparisons of averages. Beware comparisons of extremes. Looking down from above distorts the view. Everything else looks equally short, but it’s not. - The Negativity Instinct(Expect negative news): Would improvement get attention? Practice distinguishing between a level (e.g., bad) and a direction of change (e.g., better). Good news is almost never reported. When a trend is gradually improving, with periodic dips, you are more likely to notice the dips than the overall improvement. More bad news is sometimes due to better surveillance of suffering, not a worsening world. Beware of rosy pasts. People often glorify their early experiences, and nations often glorify their histories. - The Straight Line Instinct(Imagine bending lines): Why would a line not bend? recognizing the assumption that a line will just continue straight, and remembering that such lines are rare in reality. Many trends do not follow straight lines but are S-bends, slides, humps, or doubling lines. - The Fear Instinct(Calculate the risk): Is it really dangerous? Recognizing when frightening things get our attention, and remembering that these are not necessarily the most risky. Our natural fears make us systematically overestimate risks. - The Size Instinct(Check the proportions): Is it big in comparison? Big numbers always look big. Single numbers on their own are misleading and should make you suspicious. Always look for comparisons. In a long list look for the largest items and deal with those first. Amounts and rates can tell very different stories, look for rates per person when comparing between countries or regions. - The Generalization Instinct(Question your categories): How are they different? when the groups are large, look for ways to split them into smaller, more precise categories. If you find striking similarities between different groups, consider whether your categories are relevant. Do not assume that what applies for one group applies for another. Does the majority mentioned mean 51% or 99%. Vivid images are easier to recall but they might be the exception rather than the rule. Assume people are not idiots, be curious and humble, and think, In what way is this a smart solution? - The Destiny Instinct(Observe Slow Changes): Isn't it always changing slowly? A small change every year can translate to a huge change over decades. Update your knowledge, as it goes out of date quickly. If you want to be reminded of how values have changed, think about your grandparents’ values and how they differ from yours. Collect examples of cultural change, to challenge the idea that cultures aren't changing. Even small, slow changes gradually add up to big changes. - The Single Perspective Instinct(Use multiple tools): What other solutions exist? Recognizing that a single perspective can limit your imagination. Don’t collect only examples that show how excellent your favourite ideas are. Have people who disagree with you test your ideas and find their weaknesses. Don’t claim expertise beyond your field: be humble about what you don’t know. Be aware too of the limits of the expertise of others. The world cannot be understood without numbers, and it cannot be understood with numbers alone. History is full of visionaries who used simple utopian visions to justify terrible actions. Welcome complexity. Combine ideas. Compromise. Solve problems on a case-by-case basis. - The Blame Instinct(Resist pointing your finger): What system made this possible? When something goes wrong don’t look for an individual or a group to blame. Accept that bad things can happen without anyone intending them to. Instead spend your energy on understanding the multiple interacting causes, or system, that created the situation. When someone claims to have caused something good, ask whether the outcome might have happened anyway, even if that individual had done nothing. Give the system some credit. - The Urgency Instinct(Take small steps): Can we make decisions as we go? Take a breath, when your urgency instinct is triggered, your other instincts kick in and your analysis shuts down. Ask for more time and more information. It’s rarely now or never and it’s rarely either/or. Beware of data that is relevant but inaccurate, or accurate but irrelevant. Only relevant and accurate data is useful. Any prediction about the future is uncertain. Insist on a full range of scenarios, never just the best or worst case. Ask how often such predictions have been right before. Step-by-step practical improvements, and evaluation of their impact, are less dramatic but usually more effective. To avoid data fallacies you need to be an expert at statistics, and it's almost impossible to be an expert in design and statistics. Links: - https://www.logicallyfallacious.com/ (Collection of over 300 Logical Fallacies) - https://blog.prototypr.io/logical-fallacies-in-design-critiques-f5efe66771c (Logical Fallacies In Design Critiques) - https://www.gapminder.org/factfulness/instincts/ (Factfulness 10 Rules of Thumb) User Interview:- The better you get at your interview skills, the better the designer you are going to be. Interview someone about what they value, but this time don't trust everything they say. Sometimes people are going to lie a lot, but they don't do it maliciously, it's just easier to talk about somethings than other things. While conducting user interviews, many will say "If there was an app that did" so and so, "I would definitely use it." They try and solve their own problems for themselves and tell us the solution. You can't rely on that because thats them guessing about what they would potentially do in the future, something humans are terrible at. 9/10 times though you can google the app idea they mentioned, and it already exists and it would take just 2mins to find. This tells us they wouldn't really use that app if it existed. One good way of finding out what people's values are is looking for evidence of what their values are. And we can see evidence, because they spent time or money or energy on it. If a teacher spends 5h a week making worksheets, you know they value high quality worksheets in their classroom. If a teacher refuses to pay more than a reasonable amount on a worksheet online that somebody else created, you know they don't really value the quality of worksheets and classrooms particularly. It is work giving a full round of interviews about all kinds of behaviour that this user has, and all different kinds of values they have. In the last module we interviewed them about their phone, now we interview them about their day to day life, to help create better products for people. To help create better products for people, we want to see how it fits into their life as a whole. As we start looking at specific products or specific problems they are solving, we want to understand what they were doing beforehand, and what they were doing afterwords and how it fits into their whole overall picture. What we are trying to do is create a view of how this person is as a while, all their values, all the things they don't value, whether at their home or work or in their relationships. First write a list of questions you're going to ask, to help identify what their values are or what they don't value. We should be asking open ended questions that are not leading, but this time to try and find evidence. We can ask such questions as what they spend the majority of their day doing, or where they spend the majority of their money, and what they don't spend their time doing. These kind of questions are going to give us a much better picture of who they are as a person, than trying to get them to guess what they would do in future scenarios, or trying to get them to remember what they did in past scenarios. Then interview different people with the same questions, and see the values you come back with. Then change the questions and bit and see how it improves output and how accurate it is. Another User Interview: Different people have different values, so its very important that the person we are interviewing is our actual customer. A Lamborghini is perfect for someone who values style and excitement, but is terrible for someone who values comfort, safety, child safety, or economy. Now try the above interview with an actual customer, to try and identify their values. Because you don't want to make something exciting if all they value is price, or all they value is comfort. And you don't want to trust that all they value is excitement or price or comfort, just because they said they do. It is best to find evidence. You rarely want to interview your existing customers, the thing they hate about your product isn't really enough that they will go to one of your competitors. So your existing customers don't need to be interviewed much, you just have to keep them happy. You are more likely to find something from people who have tried your products or refuse to try your products, and find what their values are. One thing you will notice is if a problem is important to a person, they are already solving it in some way. You are never going to solve a problem that people aren't already solving, you are just going to help them solve it, do it better or more effectively. If the problem being tried to solve is helping people with a drinking problem. Asking them why they drink might get us answers like they like the taste or its sociable. There are non alcoholic options with the same taste, and other ways to socialize. The root cause of excessive drinking is a deeper issue. And the user is already trying to fix that deeper issue or problem with them with alcohol. They just haven't solved that problem effectively. If the issues are not drinking enough water or exercising enough, try and find the conflicting values that stop them from doing that. And then think about solutions after that. The first goal is to try and get a better picture of who they are and get evidence that you understand what their values are. Surveys:- Are a hugely overlooked design technique. They can be sent out everyday and can get back potentially useful data. There are a few advantages to creating a survey, and one of them is everybody lies. If you speak to someone face to face they are lying to you. When people write something down, they are less likely to lie, because there is evidence of what they have said. With a survey they are writing something down and its potentially anonymous. Meaning they have got almost no reason to exaggerate. We know everybody lies, but from the research it turns out surveys are one the things people rely on least. A huge advantage of surveys is they are easy to create on google docs, and can be sent out to people, stuck on a forum, and spend no money whatsoever and it will take you 10 mins. One person in your office, you don't need a meeting, you don't need to discus it. One person can create the survey and send it out and it will take 5 mins of their time, and cost them no money. And the response we can get as a google doc spreadsheet, so we have all the data there to create some nice charts, ready and good to go with almost no work. One reason people say surveys aren't great is the difference between quantitative and qualitative research. Qualitative is where you are actually interviewing people and getting real insights from their lives and hearing about their emotional problems. Quantitative is pure numbers, meaning the numbers you get, unless you are one of the top data analysts in the world, you are probably going to misinterpret something. Qualitative is the data that people that do the design thinking process think is the only thing you need to do. That you should only empathize with people, which is more dangerous than not getting any data at all. So survey is quickest way possible to get a bit of both. Lets assume we are making an application to help people with their gym habits or help them create a gym habit. We could call the survey Gym Habit Survey. For the first question, we are interested in getting some quantitative information on how valuable it is to people to be motivated to go to the gym. So we could make the big mistake people make on a survey and ask something like "how much would you spend on an application to help motivate you to go to the gym?", this would just get us lies as we have asked them to predict the future and they can't do that. We could get a much more accurate answer by asking "how much do you currently spend per month on exercising activities?". This would get us information on how valuable this problem is to them. If you were a Hollywood producer that asked, "would you watch a film with space robots fighting it out. An action packed film with really high quality special effects?". They might answer yeah that sounds cool. But if you asked "How many cinema tickets you've bought in your life to watch Transformers movies?", they might say zero. The second question gets you much more interesting information. By asking how much they currently spend, you know how much they would spend from their actual budget, and how important it is to them as a real human being, rather than an imagined future human being. Giving the answer option as a short answer allows us to data clean if people enter the answer in a weird format. Other good questions might be "how much time do you spend on your exercise regimes each week?". Which tells us how much time they actually spend on the problem now, then tell us how valuable it is to them, and how much spare time they have. Asking how much they would spend in future would get us lies. From Quantitative data we are asking more about their behaviours, than their experiences. And this could be really useful. We could ask them what applications, motivations and techniques they already use, to know what they already use. People might lie here and mention things they used once. But then we can try to understand why they used it only once. We could have a paragraph option and ask them to describe their activities in gym, or what stops you from going to gym. You might get lies in the form of an easy answer. Answers like "I don't have the time". Competitive Analysis:- One effective way of doing critical thinking, is seeing what definitely works in the real world, by looking at what the competition is doing, to solve the problems that our product solves. Competion can be anything that solves the same problem. In the case of project management software, we should look at people managing projects offline as well, by getting a team to do it without software and seeing how they do it differently. That is a competitor, as there are people who project manage without using software. They use whiteboards, post-it notes, and have non technical solutions. When we look at our competitors we want to see what working for them, because that is the critical thinking bit to actually see real world examples of what people are already doing, that work. But also see whats not working for them, because this gives us opportunity later for when we think of ideas for features for our own product. On the Competitive Analysis worksheet, we fill out the strengths and weaknesses of our competitors. In the design process worksheet we mark researching our competitor as a divergent part of process, a divergent task. Whereas documenting it on a small sheet, to share with rest of company is a convergent task. We shouldn't be going directly to a competitors website, looking at their site and filling this sheet. The competitive analysis sheet is to make it easy to communicate research with rest of team. As we said when we talked about data before, by simplifying and making it easy to understand, you are making it easy for rest of team to interpret and misinterpret too. You can't get all the research on the sheet, you are loosing stuff and making important decisions when you decide what goes on work sheet and what doesn't. Because you are going to do 20h of research into the competition and you can't share that with rest of company, as they won't be able to follow it. So the first thing to do is research the competition. You would first look at the main competitors, and non technical solutions and what different people are doing, to manage their projects. Monday.com is a new project management software, and their adverts tell you about the experience, about how it feels to complete a task, rather than how effective it is or how reliable it is. This is an interesting angle because its not something most of the software project management tools look at. It normally looks at making sure it is reliable and safe as possible, whereas here they are interested in how funky the interactions are, and how satisfying it is to close a task. Monday.com may have spotted an interesting gap in the market and may be doing quite well. This is an important one to look at because it may prove that customers are not always fascinated with security and to an extent they might be more interested in experience. It is going to be hard to articulate to someone that they like using a software because it feels good, when you close a task. But that could be the most important thing. You need to use each of the competitors products, technical and non-technical yourself, and see how it feels for you. Maybe also get another person in your office to use them too, and watch them use it and see how they feel and how they are affected. If something bugs a person they tend to write a review. An interesting place to do competitor analysis is to look at reviews. Trust Pilot is a good site for this, and the overall score for it is pretty good, but it does have some things people seem to hate from reading reviews, one of the things being their adverts and how aggressive it is, and there are some comments about how their customer service is pretty bad. We should be making a note of these on a piece of paper, and when we got all these notes down, we have diverged and gotten pages and pages of information, from reviews, from trying out ourselves, from watching people use it. Then we converge back and try to fill in the Competitive Analysis sheet. If one of the most important things about Monday.com being that their customer service is terrible, then there might be a gap in the market for phenomenal customer service. We know that its got nice engaging experiences when you complete a task so that would be a strength. The radial chart for each competitor forces you to restrict how you document your research, from all the pages of research we have, But it makes it really easy for other people in your team to have a clear understanding. In the radial chart, we might decide customer service is more important that cost so and we might change that point in the original component changing it for all of them. And if all three competitors have terrible customer service, then people who aren't primarily working on design of product can use this information to make sure our product actually takes care of that customer service issue, and fills that gap in the market. The success of Monday.com seems to be not from the focus on security or uptime but on experience. They wanted people who completed a task to feel good about completing the task. They wanted the interactions to feel natural and enjoyable, and to think about how people are actually feeling as they use it. This tells people who thought experience was not important that it is. There is two things we see from a Competitive Analysis. One is that there is a gap in the market, and one is that something you didn't know was a useful thing in that product, could be. We then have space for the Strengths and Weaknesses. Normally SWOT analysis are done for your own company, but it is useful to do it with competitor companies. We leave it open to interpretation for rest of team to contribute to telling us what opportunities and threats they think each company has. Paper Prototyping:- The mass adopted idea of a paper prototype is that a user can try and add the information and clicking of buttons, and someone will slide over to the next screen, and then can quickly and easily see if they are using the system interface correctly. It is basically the lowest fidelity quickest way to mock up ideas and see how users interact with it. These examples are classic cases of designers trying to control how a person should use a system, rather than learn. - The best paper prototype is a blank piece of paper. Suppose you are working at a hospital to make an application for doctors to quickly log patient data. You could come up with your ideas and present them like with the mass adopted idea of paper prototyping, and go and test with doctor if they click in correct places to input the patient data. Or you could give the doctor a blank piece of paper and say input the patient data. From this you can quickly learn if there are certain things they think should be on separate pages, but they should log first or log second. You should learn a lot more about how the doctors log the patients data, without the restriction of a users interface, and then you can create the interface around how they work, rather than seeing if they work around how your interface is drawn out. Paper Prototyping is all about you the designer replacing the UI. The word interface, means the meeting of two systems. You can have two systems interfacing with each other. When we say user interface, we are saying one of those interfaces is a human. A user interface simply put is the meeting of a human and a system. As a designer you can completely replace that meeting, and by replacing the meeting, you are discovering exactly how the human works, exactly how the system works, and therefore exactly how the interface should work. In the case of project management software, a team was asked not to use the software for a month, and document it all without a computer, which showed how they accomplished it with whiteboards, post-it notes, and paper, to organize the tasks and assign them times and work out who was doing what, and at the end of each meeting the designer was the UI, then take that information and put it back into the system. What the designer learns is how the team, project manager, members of staff in team would interact with system if they weren't restricted by an interface. The current mass adopted method of paper prototypes restrict the user, guiding them how they should use the system and seeing if the user can figure it out. We want to know how the user wants to use the system, and if the system can work out. The current mass adopted method of paper prototypes are an example of someone who has taken a design thinking workshop, learnt an exercise and have gone and followed it, without really thinking what it means. Worse still if you go to youtube, you will see every time a designer is doing a paper prototype with a user they can't stop laughing because they know its stupid, and not much help to anyone. Later on when we are at the stage where we are concerned about placement of button on screen or what page fits in where, we are better off creating it on a prototyping software or even writing in code, because as we observe people using it, we are going to iterate and change it a 100 times. The current mass adopted method of paper prototypes make a mockery of design, because it shows this isn't a designer listening to their users. The best paper prototype is a blank piece of paper. If you want to learn the best way a user wants to interface with the system, remove the UI. You as the designer should become the UI. You need to learn how to do their job, and then learn how to interface between them doing their job, and the system, before you can create a design. Paper Prototypes can be one of the most useful tools in a designers toolkit, but has been made a mockery of, as people haven't taken the time to understand it. Because it's been so misconceived and badly thought a lecture from Pelie Ehn at the Malmo University of Sweden, talking about the history of Scandinavian Cooperative Design, which conceived the idea of paper prototyping, and learning how the user is actually working without an interface, before western companies's misinterpretations that made a mockery of the industry, should clarify the misinterpretations. Go out to where your users actually are, and you be the interface between them and the system. The system could be an excel spreadsheet, where they log their workout for the week, it does not matter what the system is, you are going to be the person that inputs the data and you are going to be the person that interacts with the user, so that you understand best how they want that interface to exist. - Essentially, before you start designing the UI, you are going to be the UI. You are going to be the interface between the user and the system. Links: - https://archive.org/details/pelle_ehn_participatory_design_100_years (Design, Democracy and Participation: Exploring the Scandinavian Participatory Design Tradition) --- Section 8: Experience Economy: Introduction:- In the 60s when McLuhan said the medium is the message, he was talking about election debate between Nixon and JFK. It was the first televised debate and it changed politics. People understood messages differently, depending on if they watched the debate on TV or listened on radio. The first radio debate probably changed politics too. People had been used to reading the views of the political on paper, and in their own time arguing about it and mulling about it on their way to work. Now it moves much faster. Today the debate that takes place online and they have changed again. The internet is different, it moves at the speed the user wants it to move, but it changes and adjusts as we move around. It's colourful, it's interactive and it updates as we are using it and it's visual. It is the fastest most impulsive, emotionally fuelled environment we've ever created. The slow, thoughtful period between daily newspapers are gone. There is no time for reflection or conscious thought. Online biases control our users as they act primitively and irrationally. We try to understand them by thinking about what we think we would do or asking people to post rationalize. We can't ask people to explain their actions, and without impressive interview skills, we will never find out what makes them tick. The emotions that lead people to make decisions are impossible to articulate. People will tell us they want our websites to be faster or be accessible in less clicks, but thats never what they want, that is just easy to say. We no longer live in an economy that works on practical things that a person needs, we live in an experience economy. Experience Economy:- Around the late 80s and early 90s, we moved into the experience economy. The things that people valued, the things that people would pay for, changed drastically from what they were in the past. Going back 200 years ago you would see every person in the world, spending 10 hours a week washing their clothes. It was an obvious business opportunity that if it could be automated we could crate some kind of machine that could wash clothes, that would be massively valuable to people and people would definitely spend money on it. There are three variables with people's day, that if you could solve or improve them, they will reward you well, saving - Time - Money - Space Which used to make designing products or adding features to existing products extremely easy. However there was a point of diminishing returns. In 1976, Air France launched the Concorde, famous for being able to take off in London and land in New York, before it left. It went faster than the speed of sound, so the time difference was larger than flight time. However in Oct 2003, Concorde flew its final flight. The incredible cost of crating these planes, and the massive cost of maintaining them, meant they could only run if the tickets were so expensive, it wasn't worth people flying. An issue that echoed across many industries. The cost to make something cheaper, faster or smaller was so great that it was no longer worth doing. It is now quite rare that someone will find the opportunity for a new product or a new product feature within these areas of price, speed and size. The new economy values something much easier to provide, and much more valuable to the customer and that is experience. Improving the flight time by 20% can cost billions, and they won't even notice. Improve the inflight entertainment, the drinks, the comfiness of the seats by 20% and it will be the most favourite flight they have ever had, and they will come back again and again, and barely even notice how long they sat in the chair. The opportunities for products that reduce speed, space and cost, have run out, but also that improving the experience of a product is actually far more valuable and something people treasure, and pay for much more in modern society. Links: - https://interestingengineering.com/concorde-the-real-reason-why-the-supersonic-passenger-jet-failed (Concorde: The Real Reason Why the Supersonic Passenger Jet Failed) - https://www.airspacemag.com/flight-today/how-boeing-put-the-dream-in-dreamliner-20968765/ (How Boeing Put the Dream in Dreamliner) Case Study: Tinder:- Tinder is a good case study because it is an incredibly successful application. The product is entirely the application. There aren't any logistics or unlicensed taxi companies behind it. It's current success is slightly tained because it relies on a monopoly where most people are using it, so people who want to date will use tinder because that is where most people are. Fast setup and Free to get started, and you don't need to send any messages or anything to match with people, all you say is you like them and if they say they like you too, you match and arrange to meet. It made online dating much quicker. When we look at the traditional business models, like making a faster plane to make money by saving people time. You could say Tinder did well because its saves people time and money, and we know people want both of those things. But that isn't the full story. In 2018, a report in the UK found that between the ages of 18 and 30 were people spending an average of 10 hours a week using tinder. Tinder themselves have said a third of their active users never actually try and arrange to meet somebody, making it a very ineffective use of time, and the costs of Tinder premium are expensive. So all people aren't there to save money. Tinder is a perfect example of the experience economy in full swing. Looking at the online dating experiences before tinder came along, websites would force people to write really really long in depth profiles with all their pictures, to really try and sell themselves to the other daters on the site. They would then spend evening after evening hunting around, finding potential suitors and writing custom messages, really poring their heart out again and again, and almost every time they would get rejected. Most of the people didn't have time to reply to most of the messages. If somebody didn't reply in this scenario, you would put your entire life and heart into this profile, the pictures, the messages, and they had chosen not to reply to you. This meant most of your experience using an online application was rejection. Online dating was one of the most painful dating experience a person could go through again and again, like real dating. Tinder turned it all on its head, because nobody was sending personalized messages, no body was writing large profiles. If somebody didn't like you, you didn't even know if they had seen you, so there was no feelings of rejection. But also the entire time a person was using this application, their entire efforts are into them deciding if the other people are worthy of them. Tinder took a task that used to be emotionally painful and made it empowering, made people feel like a king in a throne room. They simply didn't click like and dislike, they put their thumb on the person and swiped them out of their lives or into their like bucket. An action that is entirely redundant and having to teach the person how to use the application. So its definitely not good usability, but it makes the person feel more powerful. - Right now people all around us are doing small tasks, that make them feel emotional pain. Tiny little daily tasks that they probably haven't though about. And you could find a way to let them do the task and make them feel great instead. It has nothing to do with how long the task takes, or how much it costs to do the task, and it doesn't even have anything to do with how easy the task is to do. Think about how people chose to swipe on peoples faces on Tinder, rather than just hitting the like button. 10 years ago if you had spotted the emotional pain people felt with online dating, you might now be a millionaire. Tinder had some success because it was fast and cheap, but it's real success was because it changed the experience of online dating, which used to be emotionally painful. And as we go about researching peoples experiences, we are looking for the emotional responses to the tasks they do, and that is incredibly hard to find because who wants to admit to feeling rejected. Designers Remorse:- In 2010 Nick Bilton from The New York Times was talking to Steve Jobs. He said your children, they must love the iPad. And Steve Jobs said no, they haven't used it, they aren't allowed to use it, they read books. This started getting people worried, it turns out it wasn't just Steve Jobs, but also Bill Gates who was restricting how much technology his children could use. And then it turned out many senior designers from big tech companies, who worked for big tech companies when they invented things like pull to refresh or push notifications, many left silicon valley. And in many cases set up companies to help people focus, and to help people be productive. This is called Designers Remorse. Aza Raskin who worked for Mozilla, Tristian Harris who worked at Google, and together they created a new organization to help try and control these design problems, and called it the Center for Human Technology, "our mission is to reverse human downgrading by inspiring a new race to the top and realigning technology with humanity.". They wanted to start focusing on making things good for people, rather than good experiences. It turns out these two things are in big conflict. If we design food with the pure goal of making it a great experience, we are going to design a cheeseburger. If we are going to use chemicals, for the sole intention of making chemicals, a good experience will create hard drugs. Both of these things have had a massive negative impact on society for the last 100 years, and over the last decade technology has been destroying lives. Tinder is an example of a great user experience, you feel positive rather than feeling rejection when on a dating app. But it is a terrible long term experience, and shouldn't be recommended to anybody. The paradox of choice tells us that after an incredibly small amount of options, we are dissatisfied with the option we go with. And tinder tells people they have a thousand options. It also makes people feel good about searching those options, when they used to feel bad about it. If we get addicted to those feelings, the same way we get addicted to cheeseburgers, drugs and gambling, and when we start numbing out, we might start seeing what else is out there and maybe even cheat on spouses. Choosing from multiple good choices, does not make us feel good, it makes us feel uncomfortable. We would be much happier with one terrible option, and one amazing option and making that choice. Focusing purely on making something a good experience, does not make it good. There are many contradictions. Sometimes rationality is good, sometimes it is bad. Sometimes making something look good is good. Something you want to focus on functionality. And it is up to you to decide what kind of designer you want to be. If all you think about is how good of an experience somebody is having in the short term, it could be having a big negative effect on the long term. The reality is every decision you make will have to make compromises. There is never a correct decision. Sometimes we sacrifice experience to make it useful in the long run. When we design purely for good experience, we run the risk of potentially making someone's life worse. A lot of times good experiences aren't good for people. A cheeseburger is an incredible experience but is really bad for you. Links: - https://www.businessinsider.com/screen-time-limits-bill-gates-steve-jobs-red-flag-2017-10?r=US&IR=T (Bill Gates and Steve Jobs raised their kids with limited tech — and it should have been a red flag about our own smartphone use) What's Easy:- Piet Mondrian was one of the greatest artists of the 20h century. Posters of paintings "grey Tree" and "Composition with Red Blue and Yellow" were taken to university campuses all around the US, and people were told take one of these two paintings home, and feel free to do whatever you want with it. Most people choose the second one. It is also much more valuable. When we later learn about form it shouldn't surprise us why people prefer the second painting. But if you had asked people to explain why they choose that painting over the other one, more people in more locations actually choose the first one over the second. If you hadn't asked for an explanation, most people chose the second. We know most people lie, that they post-rationalize. But why would that make our choice of painting change, just because of a question we asked before choosing it? We don't know for sure and can't but we can speculate, that it is harder to talk about abstract art, than it is to talk about figurative art. Explaining the first one is just easier to talk about. This is the problem when interviewing users, they won't tell us the main reason for doing something, they will tell us what's easy to talk about. A new parent will say they don't exercise because they are busy looking after their child, when in reality their child is jus the main thing on their mind and they talk about it all the time, it's easy for them to talk about. We also want to be aware of this rule when in design meetings. If you get 10 people together to talk about the design of something, they will all want to contribute. But they will all talk about the easiest thing to talk about. If you had to choose which of these paintings was best as a committee, you might choose badly just because the "grey Tree" is easier to talk about. It is far easier to talk about why the headphone sockets on a mobile phone are useful, than to explain why it is not. Even though we know apple makes huge amount of money selling successful products and they always take features away before we are ready. The Concord isn't made anymore, and the Dreamliner sell the best. It's very easy to articulate great drinks and a great entertainment system. Blake Emery who works at Boeing, says he tries to avoid working on problems people can articulate. He looks at what is hard to talk about, and this is interesting because the things that actually make a difference on a long flight is more about the cabin pressure and the temperature, things we might not even notice consciously, but they help us feel more relaxed, help us sleep, feel less anxious, and make us have a much more enjoyable time. And we will look back on the experience fondly afterwords. But we can't really explain why. If we talk to customers, they have a hard time telling us, and if we talk to people in a boardroom, they will have a hard time explaining why. Sometimes the best way of designing an experience, is to not have a surface level discussions. At work we like to look at things that are easy to measure, and then try to work out which measurement is the best. Which is a terrible way of designing. Someone might come to you and say, we need to change this because it currently takes 4 clicks, to get here from the home page, and if we change it we can do it in three. What is the correlation between someone clicking a mouse button, and the quality of their user experience? Nothing whatsoever. We can work to make a website less mentally difficult to navigate around, but making it less physically difficult is ridiculous. Even someone with severe arthritis has no problem in clicking a mouse button. People have even done tests to see if there is a correlation between clicking mouse buttons and quality of user experience, there isn't. We talk about it because it's easy to talk about, it's easy to rationalize and say less clicking is better. As we know, we can rationalize anything. These people that bring such issues up are never talking about the actual number of times someone clicks the mouse button, they are talking about the optimal number of clicks. One thing to be continuously aware of when we are interviewing users or having meeting in our offices, is that people are going to talk about what is easy to talk about, not what is most important. Users talking about whats easy to talk about a product. Co-workers talking about what is easy to criticize. Very rarely are they the most important issues. Perception:- Counting the number of times someone clicks is a waste of time, without counting the number of times someone clicks without making a mistake. You have to count how many times they actually click. But thats a lie too as people are terrible at remembering what they have done. We don't experience the world as it is. One thing that is of very little interest to us as designers is the real world, because no body lives in the real world. Everybody lives in their perception of the real world. The temperature inside a Boeing 747 is not important, it's what the temperature feels like. When you see a weather forecast they tell you what the weather is going to be and then they tell you what temperature it is going to feel like. We can find out the real number of times someone clicks a button, using google analytics or some analytics program. But it doesn't tell us anything about how to design, or what experience they had. If it made any difference how many times a user clicked a button, we would want to ask how many times they clicked and not look at data. Because how many times they think they clicked in not the same as how many times they actually clicked. Suppose someone tries to book a flight on a website, you would ask them about the experience afterwords, and they would say "you know what it took me ages, 15 min to book a flight, I don't want it to take that long.". If we look at the data we might see it only took them 7 mins. But it doesn't matter that it only took them 7 mins, it matters because it felt like 15mins. If somebody says it took them too long to do something on a website, what they are really saying is they don't like being on your website. Some things talking 15 mins is fine, you wouldn't complain about being on a roller coaster for 15 min, you would complain if an annoying website takes 15 mins. There is even evidence out there that people enjoy booking their holiday, more than they enjoy being in it. The experience of thinking about how good it is going to be, is actually more fun than the holiday sometimes. You want to elongate the experience of booking flights. People's experiences happen in their head, and they happen for all sorts of reasons. But it would be a big mistake to assume that people's experiences map onto reality. The hard thing with being a digital or user experience designer is that you have to explain things that are unexplainable to a large team of people. People like talking about the number of times you click a mouse button, because its really easy to measure, and then really easy to measure designs against each other. The fact that it's pointless doesn't seem to matter. Your job isn't just to measure and understand these experiences, but to go back to an office of rational people and explain to them why this is more important. Case Study: Uber:- We claimed that people don't mind things that take a long time, it seemed ridiculous. People don't care if things take longer. When Uber first came out, some of us said we don't understand it. Some people said its cheaper, but it's an unlicensed taxi and they are cheaper and always have been. It didn't make sense to some of us why people should use an app to book a taxi, when you could make a quick phone call. It had the cool feature of being able to rate taxi drivers and see if the taxi driver about to serve you was good. But not for the first people to use Uber. What got them was having a screen telling them how long it would be until the taxi arrives, and a map in case you didn't trust the time. You could see where the taxi was on the map, and step out of the house at the exact right time and feel good about it. It wasn't too long before Uber that all train stations in the UK or most of them installed screens saying exactly how long the wait was for the next train, if they were delayed and by how much. And interestingly people would happily wait longer for a train, as long as the know the exact time it's turning up. People will wait 5 mins happily if they know its 5 min, or angry for 2 min if they have no idea when it's going to show up. What people cannot stand is the unexpected, or the stuff that is out of their control. A taxi showing up as and when it feels like it, based on traffic or whatever else isn't nice. Suppose you are using a lift and the button to close the door has the paint rubbed off it, you might believe from this that this is the most important button, and that might be true, but what is interesting about this button, is that pushing it did not make the doors close any sooner, yet people pushed it over and over. All that happens in pressing the button is that the light comes on. More than anything else it makes the person feel like they are in control. The face that the pain is coming of doesn't mean its the most important button in the elevator, but that people using the lift don't feel much in control. Being kept informed of exactly whats going on, where it is, where the traffic is, and how long away it is, and exactly when it will show up at our door is a great experience. Suppose someone is using a website and they click a button, then that button needs to respond instantly, yes I know you have clicked me and I'm working on it. There needs to be instant feedback. If the next page takes 30 sec to load all or the changes to current page take 30 sec to load, it is not as important as making them wait 2 sec before anything changes on screen as a travesty. If someone complains about how long something took, it might be because it took longer than they expected, it might be they were deceived into thinking it would be quicker. Or if some of the form was hidden and you didn't tell them how many pages were in the form. What people can't stand is being deceived. People don't use Uber because its easier, they use it because they know exactly when their taxi is going to show up and nothing feels better than being in control. Don Norman:- In the 1980s Done Norman coined the term Human Centered Design. He noticed that everyday objects around us are actually quite difficult to use. A door might say push, but it has handles which suggest pull. We now call this the Norman door. He then spent the next decade going around and teaching all engineers maybe make your stuff easier to use, please. Later in Don's career he made an observation, he was doing research into cars, and what people liked about their cars, and he noticed nobody liked their car because it was easy to use, it wasn't important to them. They liked the feeling of the gears of the cars shifting, the feeling of the wheel in their hand, the sounds the engine makes, it was all experience based stuff. Don realized he might have been a bit wrong, he came up with a new term User Experience. This term is a little confusing because it encompasses all that stuff, about Human Centered Design, how easy and pleasurable something is to use, but now he is talking about the pleasurable things too. The feeling of the car. Some people make the mistake of thinking Human Centered Design and User Experience mean the same thing, maybe thinking Usability and User Experience make the same thing. The term is UX and not UE which is not Human Centered Design itself, but the term UX is cool, its a great experience. We like Xs, it sounds cool and so we keep saying it. In the post modernist 90s, there was a bar in London, with the door to the bathroom hidden, and the way to open it was to pull down a specific book from a shelf, which would reveal the bookshelf itself to be the door, many people who encountered it probably brought many other to the bar just to show them. The was not an easy door to use, but was a good experience. In Europe, they like gears in the car, making it harder to use, but they like them anyway, they like the feeling of being in control. Human Centered Designer from the 90s, might look at a surfboard, and see people using it falling off, and go oh no they are having a hard time surfing, lets make the board bigger, lets give it a motor, let's give it side so it doesn't fall over. But then it turned out surfing was just a great experience. People like it because its hard. This is true of product design. Don Norman wrote on an essay on his blog that "simplicity is highly overrated". Don Norman was talking to the head of marketing at Siemens. They brought out a new washing machine which had so many sensors in it, that it barely needed any controls at all. It knew everything about your clothes and how to wash them best. So he said how come it has more buttons than normal machines, and the two reasons for this were - People don't want to hand over controls to the machine. The machines might know better. But we want to pretend we still do. And sometimes we want to override those functions. - The other reality is we don't want to perceive the washing machine has been worth that much money, if it only has one button on it. This brings us back to the TV analogy, where if you go to a UX TED talk or conference and they will arrogantly say TV remotes are designed badly and they could do better. TV remotes have too many buttons because it makes the TV appear more valuable. They also have too many buttons because at some point we want to override something, even though we probably never will. Just in case for the comfortable feeling of knowing we can. Within a month we don't even need to look at the remote because we know where our favourite buttons are. We pick it up and without looking we are channel hoping around . - When we are testing our web applications, we are more interested in how people are feeling, than how they are behaving. - If someone falls off their surfboard over and over again, are fine and they jump back on it and paddle back to sea to give it another go. This would indicate terrible usability, but a great experience. They understand what went wrong, they know they are still learning. If someone is using our website and they click on the wrong button, and they fully understand why and they know exactly where they have come, where to go back and what went wrong. Then it is exactly like someone falling off a surfboard. They will probably feel okay about it. If someone is navigating around a website, and makes no mistake at all, but are still confused, they will feel much worse about that than if they had made some mistakes. - One emotion people seem to really enjoy, is feeling in control. - If you take away mouse clicks from the UX, the user might be upset about it. - If someone clicks something and the exact thing they thought about happens, they would feel good about it. - The difference between HCD and UX is that UX is used to measure experience in addition to usability. Creativity:- How should we decide if the tv button should have more buttons or less? If your an average shopper buying an expensive tv, you might buy one with lots of buttons you would never use, just in case. That they are spending a lot of money, so they don't want to miss out on the buttons. In learning about minimalism, we will see how some of the most successful designers go there, by taking things away. But none did it without replacing them with something unique, something creative, something original. A lot of buttons may increase the perceived value of an object, but nothing increases the perceived value like creativity. Jacob Nielsen told us most people are using others websites, most of the time so let's make them all similar. But we shouldn't make everything similar. We should have a 10-20% wiggle room to make things unique, beautiful, surprising, and joyful even. In a talk by Don Normal he was showing us his Phillip Stark lemon squeezer and explaining how he has a gold plated one at home, and he particularly liked the gold plated one, but he never used it to squeeze lemons. In fact it sat in its box, because he feared the gold plating might come off. This is a fantastically popular piece of design, because it is wildly unique, and an original way to squeeze lemons. To increase the perceived value of your tv remote, you can take most of the buttons off, but you better replace them with something unique. The Apple TV remote makes people perceive the value of an Apple TV high enough that they fly off the shelves. Some have a tv remote with a cursor on it, and it's so much harder to use than a normal TV remote. It doesn't follow Jacob Neilson's advice, but it makes the perceived value of tv higher, because it's unique, creative and different. If you can solve a problem like changing channels in a way that no one else has, even if its worse, it's still gonna have a perceived value because it's bold and a statement, it's confident. One of the projects people used to do at the early stage of art college was to come up with a 100 different ways or uses for something. Why not come up with a 100 different ways that you could change a tv channel, and find the one that brings the biggest smile to your face and add that to a remote, even if it's ridiculous. People will perceive it as valuable. Why is the acronym for User Experience, UX, so successful that we interchangeably use it as a word for design. OK is an acronym for All Correct. This acronym was so correct because it was wrong, people found it funny and enjoyed saying it. There is something endering about small margin for error. Nobody likes something that's perfect, it makes us feel bad for not being perfect ourselves. There is another similarity with OK, one of the reasons we love this acronym is because its unique. Very few words begin with letter K. It's the uniqueness not just the incorrectness. UX has an X, and almost nothing begins with X. People who believe software design is all about usability are incredibly endearing, and the thought can make one smile. How can they use an acronym with X in it and think its talking about usability, any more than it's talking about creativity. If you make a normal TV remote with just 10 buttons, people will perceive it as low value, but if it has a cool way of changing channels then it's valuable. Nothing in the known universe has a higher markup than creativity. The most valuable element in any design is creativity. Anything you crate needs to be unique in some way, even if it doesn't make sense. Summary: Before the experience economy, some of the biggest gains were made by products that saved us time, money and made our lives easier in some way. Maybe it is because our lives are so easy now, maybe because of our free time, and because many groups have have cash to burn, that innovation now is mostly about experience. Customers can't articulate this easily. Ask someone what they didn't like about flying in a Boeing, and they till tell you they didn't like the wait to get on the plane, when they might have been in a bad mood because of the cabin pressure, If someone is looking at your website, badly spaced typography might frustrate them, but they don't know how to talk about kerning, so they will just say the font is too small. They will tell us they have to click too many times, when really it feels monotonous because the site is boring. Our users talk, just like our colleague, talk about whats easy, not whats important. So we should give extra emphasis to any customer who can express their emotional experience accurately, and hone our interview skills to get to the real issues behind our customers problems. It's easy to talk about the number of mouse clicks, how fast someone scrolls or how long they are on a page, and this takes over the discussion. All of this may be real world data, but real world is a place where not a single one of out customers or colleagues live, we ourselves don't live there. Understanding our customers experience offers a unique opportunity, as a digital product designer. We are living in an experience economy. The most valuable new products solve experience problems. We are working with digital products where people are more emotionally biased driven than any place in time in human history and our competition, other design agencies and other tech companies, are mostly ignoring experience. It's one of the great confusions of our age, an oxymoron, just like the term design thinking, that people don't use to refer to thinking like a designer, but blindly following a process. The term UX has been used to not talk about experience at all but instead to talk about usability alone. The term spread because the acronym UX is a great experience, but has terrible usability. Yet most design teams are touting the unusable acronym, UX, while totally ignoring the customers actual experience. This leaves massive opportunity for any designer who can learn the skills which dominate which products sell in an experience economy, while being ignored by other designers. --- Section 9: Analysis(Exercise): Empathy Map:- We do another round of interviews this time. This time the focus of the interview being on the experience of the activities, not just what they value and not just evidence of what they value, but what they are feeling, their actual experience. You should be interviewing the people who are using the product, and not just the feelings about the product when using it, but also their life around it, to get us a better idea of who they are. This worksheet would be done afterwards in a convergence stage, to find the most important points. You wouldn't be using this working while interviewing the user, for that you would be talking down pages of notes, everything you can think of, everything you can notice about this person, and your going to be asking lots of open-ended non leading questions to get a much better idea about who they are and what they are feeling and what their values are, around the task that your software is going to solve in some way. The three main areas of an empathy map are - Thinking and Feeling(Beliefs, Desires, Motivations): - Hearing and Seeing(Influence, Environments, Friends & Coworkers): What newspapers they read, what people around they say, who do they surround themselves with. - Saying and Doing(Behaviour, Actions, Attitude, Appearance): Things that prove who they are. The empathy map sheet will be open to interpretation to whomever its shared with, but not everyone in your team, not developers, not product owners, not various stakeholders are going to be able to sit through every interview you do, so there are going to be problems when you communicate these things. We want to try and get what we believe to be the most important things about this person are down on this sheet, after the interview and reviewing the notes. Part of the empathy map is a picture of the user, and its important to get a picture on there, or quotes of things they actually said, because this means the people who weren't in the interviews, and spends their whole time in the office, and don't get to meet actual real people face to face, gives them some more empathy for the person. So definitely try and get the picture of person on it, and a little bit about their background and who they are. And finally we want to write a little bit about their - Pains(Obstacles, Frustrations, Fears): - Gains(Needs, Goals, Aspirations & Measures of Success): and what possibly this product could help them with. The goal is to try and understand the feelings, and emotions behind their actions. If you had spotted that one thing about online dating, you could have created Tinder. It was a very emotional thing, and it was something people aren't going to give up easily. A therapist might take quite a bit of time understanding the emotions that lie behind someone actions, and is a very hard skill. You will become a better listener and interviewer the more times you do it. So do this exercise as often as possible. Persona:- Different designers, with different theories about what is good and bad design, genuinely agree that Persona is a good worksheet to have filled out. You use the same research used to make the Empathy Map sheet, where one was created for each person interviewed, but this time you amalgamate them into the archetype of people who will use your product. If we take the project management software idea, which is easy to split up into archetypes, you might have the team leader, individual contributor, individual worker and you might have an overall manager. Those are three different people who are going to use project management software in quite different ways. The overall manager whats to see some nice charts that tell you exactly what each team is doing and as a whole. The team leader wants to see things about specific contributors performances. Individual person just wants to know what kind of tasks they have to work on next. So there is three different people with three quite different needs, from a product that might have different emotional needs as well. Suppose we interviewed 20 people and had 20 sheets of Empathy Maps, now we amalgamate different ones into personas, so we could have our team leader persona, where we amalgamate several different interviews into one sheet. Whats important to realize is this isn't a real person, we are creating a fictional person, that summarizes that archetype, that summarizes all team leaders in our target group. - So here when we give them a picture and create a name, we are making it up, but will be informed by the interviews we game and their job title, salary, education level, are all going to be the average or informed by the interviews we have given. - Bio: All the stuff they are hearing and seeing, and what their influences are go into the Bio box. - Goals and Motivations: Converged on from empathy maps, and the interviews we did to make it. Will inform specific design and development decisions going forward. - Challenges and Obstacles: Converged on from empathy maps, and the interviews we did to make it. Will inform specific design and development decisions going forward. - Brand Loyalties: The other products they are using. In a project management software maybe you find that almost every one interview uses Microsoft Outlook. It then helps you know what the user is comfortable using, and maybe it was part of branding of Microsoft that made people feel comfortable with that. It's good to know what other brands the person is reliant on and makes them feel safe with. - Personality: If they are more Extroverted or Introverted, Sensing or Intuition, Thinking or Feeling, Judging or Perceiving. To get a better overall view about what this person is about. - Characteristics: How tech savvy, or how risk tolerant they are. One thing to realize when filling all of these, is that we are definitely opening up to a lot of misinterpretation. Us getting together with anyone else who has done research, and saying this is overall what we believe is currently the most important thing about this person. We could come back and change a few things later, which is one of advantages of having Figma, but this gives us a solid source of truth between everyone working on a project. Whats nice about this is even if we have given people something that might misinterpret the person, the whole team is at the very least working in the same direction. The final thing in a Persona is a fictional thing this person has said, and is going to help us realize a lot of decision later on, and is the most important thing they need from this product. If this persona was for the team leader archetype for project management software, if it turns out the most important person for them is to motivate their team to update the tasks more often, they are less interested in reliance, and more interested in motivating their team, then we know some of that stuff earlier about possibly making it more of an experience and making people feel good about completing tasks might actually be more relevant for the software we are going to design. Alternatively if the team leader archetype persona was more concerned about never loosing data, that we always have the latest information, then we know that having a solid, reliable or at least appearing to be reliable piece of project management software is more important than how feel good it is for closing a task. Having this overall quote of an archetype of whats most important for them is something everyone is going to see instantly even if they done read each of the details. And when you have to make specific decisions about the product, it's going to be much easier for the team to pull together. Persona quotes are often printed out and stuck on office walls, and can be really good as long as you remember to change it if you update it. Journey Map:- This sheet is purely about documentation. Using the interviews you already did with your customers, and your potential customers about the problem them have, that you are now going to help try and solve. If we took the example of booking and riding a taxi, the first phase would be finding a phone number for a taxi, because most of the time your in a different town or area of town, and you don't know who to phone. We would then write a description for what the user would do to obtain the information, look up on google or ask a friend or stranger or phone another service and ask them. We then write down their Thoughts and Feelings, probably frustration at this point from not being able to find a number or knowing how to find one, or even knowing how reliable the taxi company they will get ahold of will be. Feelings of if they will overcharge you or if you can trust them. We then place the represent this on the satisfaction chart. The satisfaction chart represents users emotions throughout this period. Phase 2 might be phoning the taxi company, with a description of how that might go, bullet points about their thoughts and feelings, We can assume now that they are feeling a lot better about this phase, as they are actually speaking to a real person who is confirming to them they are booking and sending one over. The number of phases we have can vary by case. It could be that the taxi is taking longer than expected and we need to phone the taxi company again. The satisfaction of re-phoning a cab company to check the status of the taxi might be as low as it can go during a user journey. If we could see it on the phone like with Uber, we would know if the taxi is not really "5 mins away" and we could do something in the meantime, and it would be a much more enjoyable time, and we could even tell other people who want to know how far we are the estimated time to ease their pain. Speaking to people frustrated by taxi companies for having to wait forever and not know where the taxi is, we would see the use case for Uber. - Seeing which phase the satisfaction curve is the lowest might be the area we need to focus on the most. Storyboarding:- When we are presenting our experience based research back to our users and also to our colleagues at work and our stakeholders, storytelling is a really important part of it, because we aren't talking about data or anything too analytical, we are talking about peoples experience, and that can be hard to articulate. So one technique often used is drawing out a storyboard for that person's life. Drawing out a scenario of that person's life, and not just how they use a product or have this problem, that we will be solving for, but their life around the problem. Through our interviews we have been trying to understand the person as a whole, and not just how they use an application, or how they solve a problem (most people have been trying to solve their own problems), but what comes before it and after it, and how it fits into their life. This is a scenario we can draw out similar to a comic book, and then its going to make it really easy for us to do two things - Go back to the user and clarify, is this the scenario you are talking about? Have we understood it correctly? - And also to show it to other people in our office, so that they can help us solve that problem. We can use the storyboard technique multiple times throughout our process, as we could use it now when we define our scenario, that is the problems we are trying to solve, but we can also use it for our potential solutions, because we could just as easily draw up a quick comic strip of how we think our solution is going to fit into their lives, and we can make sure we are all on the same page, but again go back to the user and say, what do you think of this scenario?, and start getting some initial feedback, A Lot of people when they start story boarding, their initial reaction is to draw what the application looks like, what the product looks like, we are not going to do that. This isn't a place to draw wireframes, we are looking at the actual scenario. We are more interested in the experience in the person's life. An storyboard example of a day in the life of Monica - Scene1: Sleeping in bed, clock on side table says "7:15". Description: Monica waked up at 7:15 and rushes to get ready for work. She has no spare time in morning. - Scene2: Holds up phone that shows 4 flashcards. Description: On the bus to work she uses a flashcard app for 15 min to learn some random new French words. - Scene3: In front of a monitor at work Description: While at work Monica is very busy and has no time to practice more words or even think about French - Scene4: Holds up phone, messages on screen, setting is lunch Description: Monica gets an extra 10 min in at Lunch, She practices the same few words from morning, over and over again. - Scene5: Holds up phone, google home page is on screen Description: If there are any grammar points she doesn't know, she googles them to check what it means, and finds answers pretty quick. - Scene6: Few people are gathered around in a cafe, one asks (speech bubble) Do you have any brothers or sisters? Description: In the evening Monica attends a French meetup, she doesn't know anyone there, so talks about family and hobbies again. Monica is not a real person. A persona that is created. By interviewing multiple people with same story, and creating a persona about them we draw out a scenario that seems to apply to their lives. We look at Monica, our persona's, language habits, and a few touch points throughout the day where she learns languages. On her way to work she checks her app for a few mins, where she uses Duolingo and some flash cards, and sometimes at lunch she might do some flashcards as well, or practice some more language stuff. In the evening she goes to a language learning meetup where half the people speak english and half french. Her problem is most of the people at meetup ask the same questions. These are people who she has not met before and she ends up having the exact same conversation about her siblings, and her hobbies, and doesn't really stretch her language learning ability to reflect what she was learning in the app. After drawing the storyboard, we are able to show it to the users, and ask if this looks familiar. If it summarizes the scenario and problems they have? When we create an idea for a solution, an initial concept, the storyboard might not change much, we can create a new storyboard and go back to them. - Scene5: Group watching a tv. We see their back and TV screen. Description: After work, Monica and her friends watch a film that puts all their words and grammar they have been learning on app into context. - Scene6: Group sitting on couch. We see their faces lit by TV light. Description: Between each scene the movie pauses, and everyone is given a quiz and discussion, to check knowledge, speak and have fun. The storyboard is mostly the same because the life it fits into is mostly the same. The application or product has changed slightly. Now the words she learns on the way to work, and at lunchtime, are all going to be in a film that is going to be watched in a foreign language meetup she goes to, and during the film it will stop many times, and members of the meetup will have discussions, interactions, activities and games which use different language, which is new to them and have been learning that week. Using this second storyboard, when we come to test the concept, we are able to go back to original users and say, How would this fit into your life? Does it look like a good solution? And they could answer slightly more honestly, because they can see themselves in the picture. As we develop the application and designs for the application, we have this storyboard, this scenario of who our user is, the persona of who the user is, and a scenario of a day in their life of activities. Any small questions about how it should work, can instantly see how it fits into their life. Can draw on printed pdf of storyboard sheet, or can draw or paste stock images from internet that fit the story on Figma. Fill in the storyboard, based on the scenario of people you interview. We shouldn't just understand their problem in the storyboard, but also their life around the problem. And then maybe take it back to users, show it to them and ask is this the scenario?, Is this the problem you actually have?. --- Section 10: Creativity: Introduction:- Creativity is a skill all employers all looking for, but is one that is not thought in school, and is mostly punished in school. Some believe we are born creative and school teaches us to be uncreative. If that is true, how we we get it back? We would need to unlearn to be uncreative or learn to be creative. If you went to school you will need to put in some time to learn to be creative. We yearn for novelty, we don't want to watch the same films, or listen to the same songs, or not wear the same clothes, over and over. We would be wrong to assume a film or song doesn't have a practical use in our lives. If some company makes a new ergonomic keyboard or a wireless mice, we don't want it because our current setup is causing us strain or wanting to use it from 2 extra meters away, we want it because we are curious and it's interesting. We don't just value experiences, we value novel experiences. We would rather have something new than something perfect. What is Creativity:- We have been told everyone can be creative, and there is some truth to this, but have also been told everyone can do maths, and we don't just get anyone to do the company accounts. Everyone can kick a football but not everyone can play on a national team. These things are easier to measure one's success of and whether they should be doing it professionally or when stakes are high. We can do this with creativity to decide how creative someone is, giving someone a problem to solve and see how many different solutions that actually solve the problem, they come up with within a certain amount of time. A definition of creativity could be ability to generate novel and useful solutions to problems. (novel - interesting, new, unusual) The solutions to a problem needs to be useful, because otherwise why do it, they actually need to solve the problem. And solutions to a problem need to be novel, because otherwise somebody already did that solution, and you don't need to worry about it. Before smartphones existed there was a technique some people used sometimes where they tie a piece of string around a person's fingers so that they didn't forget there was something they needed to do, as a way of jogging ones memory. When someone first thought of this maybe some 300 years ago, it was useful, you look at your hand and it would jog your memory. It was novel, if you were the first person to think of this. Now take a minute, and assume you can't take your smartphone with you and you need to remind yourself of an important task, and come up with as many solutions as possible, not the best solution to the problem but how many different solutions to the problem you can think of. Do not think maybe that won't work in this situation, do not do that, the goal is to come up with as many solutions to the problem. (writing on hand, wearing a bracelet with a message, wearing an uncomfortable ring, writing on your forehead for when you look in the mirror, repeating it to yourself over and over, singing a song about it over and over, call ahead to who your going to meet and ask them to remind you when you meet them in person, wearing an article of clothing that stands out, dying your hair a different colour, wearing a shirt that says "if your reading this t-shirt please remind me I need to do" so and so.) - If you did this exercise everyday, if you took a different problem, and you just saw how many solutions you can think of in one minute, you will see that number over time get better. Essentially you are exercising your creative muscle. Creativity isn't really thought in school, in fact we even try and suppress it in school. Most school curriculums force us to be judgemental and overthink things, rather than seeing how many different novel solutions to a problem we can come up with. From a managers perspective its easier to manage a team thats closer to robots than being creative. There are many exercises to improve creativity, some are even tested in interviews for creative jobs. Think of a potato or an inanimate object, now try and come up with 100 different uses for that potato, and see how quickly you can do it. eg: Door stop, Pin cushion, etc. The more time you practice this exercise, the faster you get. This goes back to the first point that everyone can be creative, the challenge is to come up with as many different novel and useful solutions to a problem as possible in a short space of time, and the fastest way to accelerate it is to get multiple people working on it. You could try this exercise as a team, try and think of a 100 different uses for a pin, and see if you are quicker or slower than doing it yourself. The interesting thing is it can potentially slow you down or speed you up. And this depends on how good the other people in the team are at being creative. If somebody can't suspend their judgement, they will spend their entire time trying to think of reasons why other people's ideas don't work. They will try to rationalize every idea that comes up. You can't be creative and rationalize at the same time. You can multiply your ability to be creative while working in a team, but you have to know how to manage that team. And in this module we will also talk about how to run brainstorming sessions. Creative Brain:- From a neuroscience perspective, scanning a person's brain might tell you how many different novel and useful solutions to problems you are capable of finding relative to another person. Our brains have various different networks, they work almost entirely in isolation, and its not quite as simple as left brain and right brain, or one side is analytical and another is creative. - There is the Executive Network, which is what we use when we are fully focused on doing a task, maybe your user needs to buy flights to Los Angeles, they have that task and so they come to your website to buy the flight ticket, and they are fully on an Executive Network until the task is complete. - The Default Network, is used when you are accessing your memories or day dreaming about possible futures, and actually creating new connections between thoughts in your brain. More and more people get excited about speed reading or reading x amount of books, but this wouldn't give time to the default network to build out the connection, one should read a page stop and then daydream, and let the default network of the brain do its work, and make connections to really sink in what you've read. You need the Executive Network to help read the page, and the Default Network to make connections in your brain, between what was read and other things you already know about. Because these two networks work independent of each other. One or the other lights up, usually not both at same time. This is where the third network comes in. - The Salient Network, is the controller that decides which network should be switched on at any time. The Salient Network has access to our sensations and it decides which of these are the networks to guide them to. To come up with novel solutions to a problem you need Executive and Default networks. The Executive Network to stay on task, to make sure it solves the problem, and you need the Default Network to consider possible solutions that don't yet exist, to day dream about possibilities. People who are highly creative have a special skill that few have, If the average person had to come up with novel solutions to a problem, they would have to switch between the two networks quickly, but highly creative people can use both network at same time. In the one minute challenge, if you came up with 4 or more novel solutions to a problem, you are probably good at switching between these two networks fast, if you came up with 6 or more novel solutions to a problem, you can probably use both networks simultaneously. With an MRI scanner you can see the difference between someone who is creative and is less creative. By doing creativity exercises, we can improve how these two networks that normally work in isolation work together to make you a more creative person. Everybody can be creative, everybody has the potential to be creative, but it's not thought in schools, and most offices will encourage you not to be creative. Creativity can be seen with an MRI scanner, we can see the physical difference in someones brain, and to improve our creativity, we have to actively do creativity exercises ourselves. Links: - https://www.ncbi.nlm.nih.gov/pmc/articles/PMC4472024/ (Default and Executive Network Coupling Supports Creative Idea Production) - https://www.ncbi.nlm.nih.gov/pmc/articles/PMC5023093/ (Default Mode and Executive Networks Areas: Association with the Serial Order in Divergent Thinking) Powerpoint Kills:- In 1986, after the disaster of the space shuttle, Challenger, Edward Tuftle blamed it on a powerpoint slide, "History of O-Ring Damage in Field Joints (Cont)". He proposed a redesign that made it much more obvious what danger the space shuttle was in. After the disaster of space shuttle Columbia in 2003, we blamed it on a powerpoint slide, "Review of Test Data Indicates Conservatism for Tile Protection". People have even blamed the Iraq war on a powerpoint slide, "Iraq: I&W of Civil Conflict". The term death by powerpoint has become part of our general vocabulary. Several senior army generals have referred to powerpoints as public enemy number one. Jeff Bezos banned people from using powerpoints in meetings. Many others have spoken about how powerpoints presentations are killing critical thought, and how most presentations are improved by taking away powerpoints, and it encourages people to write bullet points, which are a terrible way of getting people to think. There are cases where university professors take away powerpoints, and students demand it back, as they would have to figure out how to arrange their own notes. And they don't want to think, and just want to be given the answer, you have to engage your brain if there is no powerpoint, and that is the problem NASA had with the slide. This course is made without powerpoint slides or bullet points, for the purpose of engaging your brain. Daniel Kahneman had the idea of thinking fast and slow, System 1 and System 2 thinking. System 1 is the Default State of when you intuitively just use your biases and you go around not really analyzing thoughts. - System 1: Impulsive, Intuitive, Biased. System 2 is for when you really need to analyze something, when your lecturer tells you some things and you need to organize your own notes, and do your own thinking, and this is harder work as it requires conscious thought, and requires working memory. Memory we have conscious access to right now and is limited, and because of this we only use it when it's absolutely necessary, we usually guard our memory and if we think something doesn't require it, we will just use the default mode of intuition, bias. - System 2: Conscious, Analytical. We haven't done brain scans of what Daniel Kahneman was talking about, but we can think of them like System 1 and 2 thinking. Lot of times, designers talk about reducing cognitive load, and really what they mean is making it so that the user doesn't have to store things in their working memory, to mindlessly use System 1 thinking as much as possible when using an application. But we don't want people to always be mindless. When someone is reading the bullet points on a slide, their task isn't to get to end of slide, it is to understand the information. Looking at the NASA slide "Review of Test...Tile Penetration", it is four deep in bullet points, and no one really knows what that means. But the very fact that it uses bullet points is a mistake. There is nothing here to wake up people's systems to thinking. One comment on social media about this slide said, "They should have just handed a piece of paper to everyone that said boom on it.", which would have been more functional and unique to get the point across. Looking at this slide, it's clear this person has never done the creative brain storming exercise. They pretty much just thought of the first idea of how to present this information and put it on the slide. So it's safe to say this slide wasn't designed. We can't criticize because we have to assume the people at NASA had a lot of important things to do, - The person designing it, can't brainstorm every single slide design in powerpoint deck. - The person reading it, has no reason to engage their central executive processing. Which would have forced them to store some stuff in working memory, analyze it and realize that a space shuttle was going to crash. It's been 20 years since the US army has referred to powerpoint as public enemy number one, and even longer since we started talking about how power point kills. And yet we have made all the same mistakes with digital product design. The Central Executive Network and the Default Mode Network can be thought of as System 2 and System 1 thinking, that Daniel Kahneman talked about in Thinking Fast and Slow. When we use System 2 or Central Executive Network we are forced to tap into the limited resource of working memory, so we only use it when we know we have to. When we observe or engage with things that seem quite natural to us or intuitive, it doesn't force us to use System 2 at all. Creativity can help in telling us we are looking at something new. Even when it comes to important information design issues, creativity is essential. - The difference between a creative solution and bullet points on a powerpoint, can be the difference of life and death. Before digital product design became big, we already had a lot of problem in how we communicate information. Powerpoint doesn't engage people. Bullet points mean people don't need to arrange their own thoughts. If we want to tell our users anything or we want them to engage with our app, we shouldn't make the same mistakes. Be Unique:- When one says Charles Darwin, you might think about evolution, and the first thing after that might be the origin of species, or survival of the fittest. The ideas that he had that the strongest animal survives, pass on their genetics to offspring, and therefore species as a whole grows stronger. His idea of survival of the fittest wasen't a unique idea at the time, it was controversial and was a counter to some ideas about religion, but that wasn't what made him famous. If we applied the survival of fittest idea to software design, we would just make the software fast and easy to use as possible. That might sound pretty good, if you haden't spent the last few hours studying design. - An actual revolutionary idea of Darwin, wasn't survival of the fittest, but his later ideas about how the animals that survive aren't necessarily the fittest, but are the ones that draw the most attention to the fact that they are the fittest. In northern Borneo, there are these monkeys called Proboscis monkeys. They have these massive noses, which make them endearing to us. At some point in the history of Proboscis monkeys, they found the strongest and fittest of males, were possibly the ones that could make the loudest noice when blowing air through their nose. At some point evolution just started to favour Proboscis monkeys that happened to have the biggest nose, but not necessarily the best at protecting or defending the pack, or finding food or any of the other reasons that we originally thought fitness was going to help the animal. If we think about the survival of the animal, a yellow and black striped animal won't be eaten because other animals learn they are poisonous. They wouldn't learn that if there was nothing unique about the yellow and black striped animals. In perception module we will find this useful in design. - Throughout history, animals did not survive by being the fittest. Thanks to Charles Darwin, we know that certain unique traits, actually increase the changes of an animal surviving, in some cases more than fitness. - There is little point in having a really easy to use website, if people forget the fact they were even there 10 min later, because it was such a forgettable experience. The experiences we value the most in the world are creative. The highest markup of any product we have every made in history are paintings. Paint pigments on canvas, arranged in a certain way, in a creative, unique way, where its never been created before, and they cost millions. Looking at Piet Mondrian's Composition with Red Blue and Yellow, and grey Tree, the first is far more abstract, far more weird, and it's much harder to find a similar painting to this one, than it is to find a similar painting to the Grey Tree. - The most expensive food you can buy isn't the most nourishing, it's the strangest, and not even the safest. We even want unique creativity when doing something as important as nourishing our bodies. Randy Olson, a German marine biologist-turned-filmmaker, wrote a book called Connection, he noticed that people trusted Hollywood movies, more than they trusted what he has said in lectures. He could say this type of crustacean exists at this specific depth, and his students wouldn't remember that. They would remember what they say in a Hollywood movie. So he moved to Hollywood, to learn how to tell stories to help scientists. We don't just value creative things more, and we don't just notice them more, we also trust them more. The greatest depiction of beauty we have in history is the Venus de Milo, and it is massively imperfect, it's missing parts of the body. Even when talking about beauty, the things we perceive as being most beautiful are often imperfect. They are often weird, unique, and creative. Today we love the idea of survival of the fittest, and it's the one thing we remember from Charles Darwin. We like it because it has the one thing our modern society loves, certainty. If you make it the fittest, it will be the best and it will win. But that is not how it works. Peacocks did not survive by being the fittest. Design is not different. It is not the most sensible cars that have succeeded. You could make the most easy to use and functional app in the world, with nothing creative in it, but unfortunately everyone will forget how easy it was to use seconds after they finish using it. Our memories aren't simply good enough to simply remember what was kind of easy to use. It needs some kind of uniqueness there. Something to anchor that connection of that idea, that memory of ease, so they don't forget it was your product. Evolution favours those that can communicate their fitness and value to others, rather than actually be fitter. Humans highest perception of value is creativity. Be unique! Links: - https://brolik.com/blog/websites-need-to-be-predictable-not-boring/ (Websites Need to be Predictable, Not Boring) - https://thenextweb.com/news/zzzzzz (Web design is now completely boring) - https://www.youtube.com/watch?v=jjlMfaZneUo (Randy Olson gives lecture on science communication, global warming, storytelling to USFWS workshop) Having Ideas:- We know we don't want to think or act like our competition. If you want to make something exactly the same way as everyone else, then you should think exactly the same as everyone else. Instead we are going to think creatively, and the best way to be creative or have great ideas, is to have a lot of ideas. The exercise of finding as many different ways of doing something or using something is vitally important. The first solution you think of, just like that NASA slide, is always terrible, always really bad. Your first 1 solutions are likely terrible, and even if they weren't your competition already thought of them, and even maybe already did those ideas. The more serious an industry you work in, the more advantage creativity is, because the less other people are using it. The riskiest solution is the rational one. Once you've written down or said our loud the first 10 ideas, you realize there were some more interesting ideas ones, buried underneath, deep in your subconscious. Once you have cleared out the junk on the surface, your brain can let the better ideas bubble up. Essentially by simply writing down or drawing or expressing in some way the ideas that we have on the surface, we clear them out of our working memory, and allows our working memory to be filled up with other stuff, and some of that stuff could be fantastic. So we need to make a note of every idea we have. Even if we perceive it as being terrible when we first have it, we are at the very least clearing it our of our working memory, and allowing space for a good idea to take its place. When doing the exercise, we need to be in an environment away from judgement, because most of the ideas you are writing down, drawing down, saying or expressing in some way aren't really going to be very good. But you need to express them to empty out your working memory. If you are saying it out loud and your boss is in the room, you are going to have fear, because most of your ideas are irrational, and rational ideas are terrible anyway. You need to be able to draw those ideas or write them down in some way where there will be no repercussions. And this is one of the problems with idea generation as a group. The more people there are the more fear there is, especially if you work in a team together, and especially if there is some hierarchy. Considering you need full access to your working memory, you need to be away from things like your computer, where you email and instant messages are. Whenever you are doing anything important you want to be away from those things. When an email comes in, it's going to displace everything currently in your working memory, and completely history whatever you were working on. You need to be using both the Central Executive Network and the Default Mode Network parts of your brain at same time, or at least be able to switch through them quickly. You want to tell your brain this is the task you want to solve, and you want to be able to take the occasional break. Some people talk about going for a walk in a park and coming back and looking at the problems fresh. Some talk about having the best ideas in the shower. All of these are because they are in default mode functioning at the time. If you mad at your brain for not coming up with new ideas, you need to take a break and allow the other network of your brain to kick in and try and make the connections. It might not feel like you are working, but your brain is doing some of the most important work it can do. Your brain doesn't have a resting state, it's always working. Setting yourself the challenge of coming up with as many ideas as humanly possible is far better than trying to come up with the best idea in the world. Because reality is even once you've finished idea generating, your ideas are not fully formed yet, you are going to improve upon it as you work on it. Brainstorming:- Andy Warhols New York studio was called The Factory, and it was famous for outputting not just art, but also products and in some cases even music, The Velvet Underground or a product of Andy Warhols studio. He was famous for listening more than he spoke. He was famous for inviting anyone along to his studio, and just listening to what they had to say. He knew what the word on the street was because the street would come to his studio and tell him about it. When he worked on an artwork, design or piece of music, he would adopt a flat hierarchy. He was not the boss of his studio. Because of his success lot of studio started saying we don't have a boss either, we are all on the same level. Brainstorming as become a Taboo of a word in the office space, for the massive failure the sessions end up becoming. The first thing you need to make it work better is to have everybody on the same level, there should be no hierarchy in the room. No one's comments should be more or less valid than other in room. It could even be an advantage to work with different people in team, as they are less likely to try and impress you and more likely to just tell you their actual ideas. The next thing you need is no judgement, so people get their worst ideas on paper to clear out their working memory so the better ideas underneath can come out. A completely crazy idea that someone says might connect some thoughts in a slightly incomplete idea in another person's head. They should say any idea they have out load. A soon as someone says I don't think that is a great idea because, then the other people will stop suggesting stupid, crazy, wild ideas. Give everyone in a brainstorming session a yellow card. The second a person judges another idea, you show them a yellow card, and they have to stop speaking. The other purpose of the card, is if someone spends more than one minute explaining their idea, they get shown the yellow card and they have to stop speaking. When people get too detailed about an idea they move on to the next stage, they become attached to an idea. And one you get too attached to one idea, you stop thinking of new ones. The first few ideas you have are going to be terrible, you need to suggest a 100 ideas before you start to pick one, so you don't want people getting too detailed. Show them the yellow card, make them stop talking and carry on brainstorming. There are two things to do before a brainstorming session, - make sure they understand the problem they are trying to solve. giving as much detail as possible. Boundaries make people more creative. - make sure people are ready to fail. To not be embraced by making silly suggestions. Van Gogh used to make painting with only 6 colours, The cat in the hat was written by Dr. Seuss as a challenge to see if he could write a entire book using only a handful of words. Ensuring people know the understand the problem being solved, and setting boundaries doesn't just make sure they are solving the correct problem, but also makes them more creative. We start any brainstorming session with an improve game, or some other kind of creative exercise where there isn't a correct answer, so people learn it is okay to look daft in front of each other. One way is to use Rori's story cubes, each person rolls the nine dice, and then as quickly as possible have to create a unique, exciting fun story for everybody else in the group. There is no correct answer to this, but you can instantly see others joy, and can instantly see how creative solutions make other happy, and makes you ready to suggest creative solutions in your brainstorming session. So before any brainstorming session, play a creative game to ensure everyone has left their ego outside, and explain in detail the problem you are trying to solve and for who. During the session there are only two strict rules, don't go into detail about the idea, and don't criticize anyone else's ideas, and if they do show them the yellow card and they stop talking. For brainstorming to work there must be no hierarchy, or right answer, and no one will be judged, rewarded or penalized for their ideas. Links: - https://www.forbes.com/sites/cognitiveworld/2019/09/03/when-does-the-creativity-happen-design-agile-and-the-studio-model/?sh=614d37f66755 (When Does The Creativity Happen? Design, Agile and the Studio Model) - https://99u.adobe.com/articles/51643/the-right-way-to-do-collaborative-design-how-to-avoid-designing-by-committee (The Right Way to Do Collaborative Design: How to Avoid Designing by Committee) Post it:- On the one hand post-it notes are used for innovation theatre, a proxy for creativity or innovation where people say look we put lots of coloured sticky notes on the wall, therefore we must be innovating. On the flip side there are some incredibly good things about post-it notes. - They are very small, so it stops people from getting far too detailed too early on. - It encourages people to stand up and move around and stick things on the wall. To think with their bodies, to think with their movement, and to just get out of their chair. - It helps us combine idea. If we get ideas in a similar area, then we can just stick them together say maybe these two things work well together. We don't want to do this too early on though. But once we have lots of ideas on wall, we can start connecting them. - They can be thrown away once the session is done. At this stage in a design process, no idea should be put on a pedestal. The great thing with a post it note is it's cheap, and tells us our idea is cheap too, and that they are plentiful, that our ideas should be plentiful too. Think no idea is final or correct until the very end. When you think one is the correct one, it narrows your focus, stops you learning and coming up with new ideas. At no point in a brainstorming session should you think one of them is the correct one. If you were designing a logo, you go to client at end and show them thee logo designs. You would have kept them in the loop the whole way, and showed them plenty of sketches early on, but the reason you go to them and show them 3 logos in the end are - as a designer you don't get too attached to any of logos, you don't start thinking there is a correct or wrong one. keeps you learning and your eyes open for other options. - also gets the client to feel like they are part of the design process. Your brainstorming session has no hierarchy, and this is hard for stakeholders to accept, but this way they feel like they are part of process, and give some sort of feedback. Important in a modern day office. Play:- Most scientists are also artists. Most great scientists are also great musicians. Most mathematicians are as well. Music has some boundaries and basic rules around it, and in the middle you get to explore. You use your curiosity to see how different notes sound together, music is all about play and so is design. A lack of play makes us feel certain and secure, and no one created anything great feeling like that. You want to feel uncomfortable, messy, awkward, and ask the stupid questions everyone else is terrified to ask. If someone asks why do people eat, you might say to nourish themselves, but we already know thats ridiculous. Why do people eat may be a stupid question, but it makes us think of intelligent answers. You need to see more wacky, unique ideas, when everyone around you, your competition and other people in offices, are content they have already found the perfect solution. To suggest the things everyone else has already overlooked, and consider remixing things other people didn't think of. Steve Jobs wasn't the first person to make the computer or tablet, or telephone, he played with them, he remixed them with other ideas we had from other industries. Sometimes an idea that has already been done can be done with more style, like Apple has done. An idea that has already been done isn't a bad idea. Maybe people didn't even notice it had been done. As you work on generating idea, whether it is with yourself, or with a group, you want to have a sense of play. You are not trying to get the correct answer, but to embarrass yourself and be wrong, and question what you already believe. As you start to access the ideas and figure out which to take forward, the first thing you need to do is loose the committee. Nothing great was ever made by a committee. You can thank you contributors for their ideas, but if you move forward as a group, it will be a battle of which idea want in and which they don't, and will be an ongoing struggle that will make your final product bland and useless to everybody. Existing ideas with a unique angle are often some of the most successful. Test:- Once you have a few ideas, the best way to develop it is not to rationalize it, as your colleagues and competition are already doing that. It's not a valuable or in demand skill to rationalize ideas. A good way to stop that part of your brain from interrupting is to draw them out. If you have a wireframe, redraw it 20 times, and every time you draw it you will think of different things, and different things will move around a little bit. You will adapt it as you go, and as soon as you feel ready, way before you feel ready, you should test the ideas. There is a scene from the movie founder, where Dick McDonald went up to his private tennis court, and started drawing out ideas for how the McDonalds kitchen could work, just drawn out in chalk on the floor, and then getting the kitchen staff, to move around as if they were making burgers. They could quickly see if people would knock into each other, or if people would help even. And how long it took for people to move from one station to another. Every time someone knocked into each other or Dick McDonald wasn't happy, with the speed they could make the pretend burger, they simply rub out the chalk lines and move things a bit. In a very short period of time, they could get through 100 different potential layouts for kitchen. 100 different solutions to the burgers take too long to cook problem. And in the span of one evening, they designed the kitchen layout of what would be one of the most successful restaurants in history. McDonald's, a kitchen which consistently outputs food of the same quality at the same speed. In real life, Dick McDonald's daughter said this was how it happened, except it took more than one evening at it rained. Another example is how comedians test their jokes. The best comedians aren't more funny than the average person, they are just better at testing. Comedians perform 15 min acts in bars, 90% of which aren't funny, 10% of which are, and get put together to make an act which they would charge loads of money for to perform from start to finish. They don't know if a joke is hilarious until they say it in front of an audience and see what their reaction is. The difference between a massively successful comedian and one that hasn't gone anywhere is how many jokes they came up with, not the quality of the jokes, and then they test them and cross out 90% of them. When the amateur comedians perform, they know they are risking humiliation, but they had complete confidence in those jokes. You would be crazy to go in front of a room full of people and perform jokes you didn't think were funny. So that comedian in their head must have been completely confident that the jokes they had were the best of the best. This tells us that having confidence in something doesn't really make it any more likely to be correct. If you came up with a 100 different design ideas, the one your most confident of is correct, isn't any more likely to be correct than any of the others. Time and time again, designers talk about how somewhere in the 90% of their assumptions about what would make a good design are wrong. 90% of the time they have complete confidence that something is the correct way of doing something, it is not. Believing one idea is better than the other doesn't help at all. You need to test them. We need to go out into the real world and test them. Success comes from having a lot of ideas and testing them, not from having more confidence in any one idea. We need to test our ideas to know their value. Summary:- Creativity isn't a magical skill, it is simply defined as the ability to come up with a large number of novel solutions to a problem. It is neurologically defined as the ability to use a central executive network and our default mode network simultaneously when required. It takes regular practice to achieve. We need a large number of novel solutions because the odds of our first solution being good or any of the first 10 being good are incredibly low. Your first solution is almost always lousy, we don't need to play those odds. Once we have our idea, we never want to run with our first idea or the idea we have most confidence in. We must remember the worst comedians we have ever seen, got on stage with those jokes because they had complete confidence in them, even made them visualize a room full of people laughing. The best comedians told the same jokes but to a smaller room or group of people who knew it was a test and hadn't paid much, allowing them to cross out 90% of the jokes. To get enough material we need to ensure we don't get attached to an idea early on or not until we have loads of ideas ready to throw away. We need to not treat any of them as precious. Almost all will be going into the bin soon. The more creative brains we get together the better, but only if there is no hierarchy, judgement or fear holding the group back. We can play a creativity game before any creative session, to ensure no egos in the room. We can not have egos in the creative session. The more people generate ideas the better, but as soon as we move into a divergent process in design, the sooner we need to loose the committee. Certain stages are much harder to run with a committee. Your best idea is best because you tested it, not because it has the most satisfying rational logic behind it. The best idea will make you feel awkward, and will make anyone in your team feel awkward. You are going to go to market with something you tested that might sound illogical to some people. The best idea will make people uncomfortable, because if you don't, chances are you are playing things too safe, or your solution isn't that novel. Settling on one idea is killing off every other idea, where you compromise to make life better for one user at the expense of another user. A committee will naturally try and relieve their own and each others discomfort by making something no one hates and no one likes, and no one buy and no one uses. A committee will naturally make something that is identical to a competitor. --- Section 11: Ideate (Exercise): Frame the Problem:- Before a Brainstorm session, you might know and understand fully what the problem that is being tried to solve is, but your team might not, and it is important to make sure they do. It is really important to give them guidelines of what will be talked about in the brainstorming session. We might know what the problems are like the bank of our hand, because we have been interviewing people to really understand what the problems are that they have when it comes to our product or when it comes to keeping fit or drinking enough water, or whatever the problem is that we have decided to try and solve. The other people in the meeting might not be completely sure, and we don't want to be having a brainstorming session where everyone is brainstorming slightly different things. So it's really important to have a concrete thing to start from. This worksheet might not work perfectly, and might need to be adapted but it is recommended to use a sheet because it looks more official and you want people to feel that this is the problem that is set in stone, and we are trying to solve in this meeting. - On the left we have Points of View, where we reframe the users problem, so that we see it from their point of view. Earlier we had a project manager who had a hard time motivating the team to keep their tasks updated or closed tasks when done with them. From their point of view we might write, as a project manager I am having a hard time keeping my team motivated to update their tasks and close them when finished. As a result I can't see where everyone is on the project. And I need to use a lot of my time speaking to everybody. From this we really understand what their problem is and start having some ideas about what we can fix. Before we start Brainstorming, we would look at the section How might we. - On the right side we have How might we... We are going to have a number of questions. How might we encourage the project managers team to keep those tasks updated and closed. As a taxi company, lot of users might be frustrated to not know when the taxi is going to arrive. And as a knock on effect our call centers are filled with 50 percent of our calls been people asking how far away their taxi is. We might have have two questions here, how might we reduce the number of calls to our taxi company asking how far away their taxi is, and how might we relieve a customers frustration about not knowing how far away the taxi is? Having two how might we questions to the same problem might be a good thing if we consider the fact that some problems might be emotional, the person waiting for their taxi just needs to feel more comfortable, right now they are feeling stressed. Taking this sheet and the persona sheet to a brainstorming session would give a better start and direction to the session. Creativity Exercise:- Your next exercise is to brainstorm 100 solutions to a problem. Either on your own or with a group, some disagree being creative in a group is impossible, so it is up to you to come with as many solutions to a problem as possible. The two strict rules being no judgement or criticism, which inhibits peoples ability to come up with ideas, and there should be no detail. No one should get attached to an idea until you have 100 ideas. No one at any point in a brainstorming session should speak for more than 2 minutes. Before you do your brainstorming, there are a couple of exercises to try. Not only do we need the Frame the Problem How might we sheet, but to also have a completely clear head. You can't brainstorm anywhere with internet access, or where you may be interrupted, because you are using your central executive network, and your default mode network, either simultaneously or switching between the two quickly and you must have nothing else in your working memory. You need complete access to your brain. Some creative people, particularly writers do something called morning pages, where when they first get up, they have four sheets of paper and they have to write to fill up those four sheets of paper before they do anything else. These four sheets of paper can be thrown in the bin. It is 100% to clear out all the nonsense in their heads, to get it down on paper, to clear out their thoughts. Some meditate and that can be helpful. The pdf sheet 100 things can be used as an exercise, to visually think of 100 things that you can draw using a circle. The first thing you draw might be a pizza, the second might be the sheet of a car, the third might be a manhole cover, the fourth could be birds eye view of somebody in a life saving ring. The problem you are solving is draw a picture using the circle. You need to solve that problem a 100 times, as fast as you can. Doing this is clearing some weird thought out of your head, but is also forcing you to think creatively, and to have a creative session you need to remove fear. There is 3 kinds of fears that get in the way of idea generation, - Fear of being wrong, - Fear of being offensive, - Fear of looking weird. Deep down we all know we are a bit weird and a bit different, and we don't want anyone else to know about it. If we want to do a creative session where we come up with original, unique ideas, we really want people to admit they are weird. The importance of doing an exercise like this is, as long as you draw something that works with the circle, you are not wrong. You are doing it on your own so you can't be offensive, and ideally you should be as weird as possible. Print out the 100 things sheet and draw with each of the 120 circles, get though as much as you can and time yourself. Do a similar exercise every time you start a brainstorming session, or any other kind of creative session in your design process. If you got a group of people about to do a brainstorming session, you say everyone we can't start this session until we come up with 100 different uses for a brick. Everyone can yell out as quickly as possible to get through that list. You could use a brick instead of weights at a gym, to tie down your tent when you can't put pegs in concrete. As people churn out rediculas ideas, they will learn that it is okay to not be wrong and they will think its okay if people think you are weird. You may want to make a rule that says no one can be offended if someone has an offensive idea. We want to remove the filters that stop people from saying the first thing that comes into their head just for this session. Because they more bits they hold onto, the more bits they are using up to hold onto them. We want them to have full access of their brain to come up with more creative ideas. So no judging and let them say what they want. As well as 100 things morning sheet, or morning pages, the below link has an improv encyclopedia as well as icebreaker games, similar creative games that can be used before stating a creative session to purge out all egos in room, and make sure everyone is feeling completely comfortable about not being judgemental about being wrong and looking weird. Links:- - http://improvencyclopedia.org/categories/Icebreakers.html (Icebreakers) Test Assumptions:- Every solution you have to your problems are based on assumptions. You assume they solve they problem to the right standard. We have the assumptions, the experiment we use to test the assumption and the metric by which we would measure the success. A language learning startup has an assumption that if you could tell people which films are based on the correct language level, then people would buy and watch more films. Rather than implementing this hard feature, we write this assumptions down, that people will watch more foreign language films if they know its based at the right kind of level for what they are studying. The experiment isn't to build that feature, we could write a blog post that said, these are the then films for people of this exact level of Spanish, that we recommend that you watch. They can then see as a metric how many links were clicked on, and how many of those 10 copies sell as a result of the article. When we look at the metric it is important to say how many more films we expect to sell, as even if it may be cheap to implement the feature, it takes away resources from other potential features. If you believe the films have a 20% increase in sales as a result of that feature, we should write it in metrics. When you include the metrics in assumptions, you may find that 90% of your assumptions are incorrect. When user first launched their map with a little taxi in it that moves around, it is rumoured they made the little car move on the map. The had someone program the car to move. There are different way to simulate a feature when showing an investor rather than building out the full feature. For any problem you have, figure out ways to test the assumption and how you can measure it to make sure it's definitely correct before going and developing the full solution or full design for it. If you believe if someone who doesn't drink water all day, would drink more water if they could log it on an app, you could test that with maybe a spreadsheet or something with your friends first and see how much more water they actually drink if they are logging it in a spreadsheet. A low tech solution but an easy way to test the assumption. Testing an assumption can cost very little, take very little time, and potentially save a company millions. So do not skip this stage. Feature Matrix:- From the brainstorming session we get all kinds of ideas or features for products that we could create to solve a problems, but we don't know yet how good they are and whether we should develop them. On one axis we have value to user and on another we have cost of difficulty to implement. If we believe a feature has a 9/10 value to user, but also a 9/10 cost to developers, that is it comes in the red section on right, we would not even consider implementing. Anything that comes in green section, or 1/10 cost to developers implementing, we would definitely implement that feature as it sounds incredible. The stuff that is up for debate would be anything in the white section in middle. To decide the cost or difficulty to implement a feature, you would need to talk to the technical people, to see how much work it is upfront, how much maintenance and how much long term work it will be. You need to think about how much it will be totally to implement the entire feature or application. You need to think about if more call center staff are required, all kinds of extra costs might come up, so you need to get the whole team involved in trying to identify roughly how much it will cost to implement. The value to the user is based on comparing it with how much time, money, effort the user is already put into solving the problem themselves. We much look at how much emotional pain they currently have in trying to solve it or this problem bring them. What we don't know for sure is how accurately this solves the problem. We never want to base the value to user score on an assumption, or how confident we are that this assumed solution will solve that problem. If we are doing that we must go back to the assumptions test and try and get some solid evidence that this is solving that problem. It is not just how sure we are that it is solving that problem, it is also how large of a problem it is for the person. If you think about project management software, if the team aren't closing their tasks and the project manager can't do their job correctly, then that is potentially costing that team a lot of money. It is worth looking at what kind of spend a team like that is already putting into project management software, and other ways of solving that problem. A much more valuable problem to solve than if someone is drinking that extra glass of water a day, and realistically something people might spend 0.99$ on for an app. We are thinking of how sure we are, how serious the problem is for the user, and also how many users it solves it for when trying to figure out the value to the user. Once we are confident the feature is in the right placement on matrix, we can start to decide the applications and features we want to create. Ultimately it will always be the ones close to top left in green, the high value, low cost. Red Routes:- A recent design term, refers to roads in London, where instead of having double yellow lines that say you can't park there, red lines say you can't stop there. Forcing the traffic on those roads to speed through. These are the roads in London that take most of traffic. We apply this to design to see the roads that would take the most traffic. It will help us when we work out our information architecture, wireframe our pages, create our whole site. With this worksheet, instead of positioning your features, you are positioning the tasks or problems the user is solving. Taking the example of a web application where people buy and watch courses. One of the routes, tasks, problem user is solving if finding a course and buying that course. Putting that task on this chart, it is a task not done often, but it is done by everyone. Watching a course they have already bought would be done often, and done by everyone. Reviewing a course would be done by people who have bought that course, so it wouldn't be done very often and not by everyone. We would want to be aware that most of the traffic on our site, will be users watching the videos from a course they bought. Hardly anyone would write a review. There is nothing precise to do about this information, we just want to be aware of it, when we are making decisions about how we create our wireframe, and what goes on each page. This worksheet is for all the tasks people will complete on the app. Information Architecture:- We should be at the stage where we are aware of the features our product has, or at least the problems it's solving. Information architecture is how we organize and structure the features of our product. A site like amazon that sells everything, has a complicated information architecture. Just to find belts, you would have to go to clothes, men, accessories. If it was a site that just sold clothes belts might be in top menu, but amazon sells everything. From your feature matrix you might have a whole list of features to have. But you want to add to that list all the other things the application is going to do like changing your profile, or maybe there is a frequently asked questions feature. You want to think about all the features your application is going to have. To know how they all sort together in the application, one way is card sorting. Can be done with some cards. When doing the card sort exercise, you are not the designer but someone the designer is testing to get a better idea oh how information should be organized on the telecommunication website. If you doing this exercise with real people, you would write the information on pieces of paper, and give them the pile of cards. You have to decide how to arrange the cards. Company contact phone number, Online form to request plan upgrade, Products: Accessories for cell phone, True Tone ringtones you can buy, Discounted Cell phones. The designer watching the subject sort the cards into categories, help in understanding there are specific number of categories, and these things fit into those specific number of categories. Doing this test with one person doesn't say much and is as useless as doing it yourself. Like going to amazon and saying thats not where I would put it. 95% of people might look in the place we thought was wrong but might be right to them. Everyone is going to sort the cards slightly differently, and name the categories slightly different things. Some say you need to do this with 15 people. You can do it online, but it's better to do it in person with people to hear their thought process, and if something is going in wrong pile because they misunderstood what the card said. You don't want to 100% trust this exercise but you definitely want a lot your input of what should go where from this card sorting. You want to think less about what the feature is and more about what the problem is that is being solved for the user. The card should be named, rather than giving them straight the solution, probably tell them the problem it solves for them. Rather than "A table of prices for cell phone plan options", "finding the prices for cell phone plans". After this we can use another testing tool called Tree Test, where you get a specific task, then show you the menu, all else hidden, and you find where you need to go. Suppose your moving house and you need to transfer your address, then you might go to My Account, Account Tools, Moving House. It doesn't have to be perfect, it can usually take users 3 go's to actually find what they are looking for until they get used to it. Once you have done your card sorting this is a nice way of sanity checking the decisions you made. You are never looking for the solution that everyone finds the thing first time, you are looking for the thing where the most people find the thing sort of the quickest. Once you have an idea of how the tree works, and how your different features all fit together and what goes on what page, you want to create an information architecture diagram, so you can communicate it back to your team. Links: - https://dribbble.com/shots/2777994-Site-Flow/attachments/566906 (Site Flow by Veronika Nagy) Wireframe:- Now we have an idea of how the information and functions on our application are going to be structured, and we know whats in each category or page. We aren't sure if certain sections are multiple pages, or a single page. We don't know how the page works or whats on it. We may know that the page has some physical products, and some subscription products or digital products. We know that people may want a filter or sort for highest rated. We have all kinds of ideas about the page, now we need to draw them out. One technique with some relative success is called 4 to 1, and the idea is to draw 4 different ideas for how a page might work, really quickly penciled out or drawn down. You don't want to draw only one way a page might work, and rationalize with people in office why something is right or wrong. You would have all kinds of intuition from research done, all kinds of testing and opportunities to speak back with users later. Come up with 4 reasonably different ways for how a page might work as quickly as possible, then stop for a second, looks at them all, and try and create just one. You take the 4 different ideas and impulsively take whats useful and draw the single frame. Do not stop to think when drawing the 4, or fill up head with rational reasons. Once you are done you might need to share it with other people, and you are going to need to document and test it. The reason why you want a digital version is so you can share, present and test it. --- Section 12: Perception: Introduction: Most people are unaware they don't see or hear the world around them. They don't remember the world around them, or remember their experiences of the world. We register every sound around us but register very little of it. We register every visual around us but see very little of it. It's mostly out of focus anyway. Our perception of the world is wildly inaccurate, our coworkers perception of the world is inaccurate, and so is our customers. If we want to help our users use a product, we want to drop any idea we have that they will see it accurately or even see it at al. The problem is we all believe we see the world accurately. Everyone thinks they see the world accurately. And whats worse is we all think we see the world the same. We filter the world to make it easier to perceive and understand. So we only need take in the small amount around is to get by, which is useful for us to operate in the world, but it has some big flaws when it comes to design. Take two people who believe in the advantages of two different political parties. They can both read the same news article and come away with different interpretations. One takes away the one thing that proves to them their party is the best, and the other takes away the one thing that proves to them their party is the best. They read the same article, but each blank out on the information irrelevant to them. They were both looking for different things. This is the downside of perception. The journalist may have done a great job writing the article, but perception stopped anyone from reading all of it. Perception also stops anyone from seeing all of your design too. Change Your Perspective:- Edward de Bono wrote a bestseller called "Six Thinking Hats". His idea was that in a meeting you should try changing hats. And if you are used to being analytical, you should try putting on the creative hat. If you are used to being too creative, maybe put the cautious hat on. See the world from a different perspective. Changing your perception changes your emotions, and changes of emotion changes you're thinking. Logic and data can't do that, only thing we can do is change our perception. Edward de Bono also said 90% of errors in thinking are errors in perception. We want to perceive the world as accurately as we can. He also thought us that we should think about how we are thinking, not just what we are thinking. What were the steps that led us to be so sure that a person is a bad politician at the time of recording. Trying to prove the opposite of what you believe can be helpful. Cognitive behavioural therapy is a type of therapy where you find a belief you have about yourself, such as the belief that you are not smart enough, and you do small tests to prove that you are wrong. This has been a successful type of therapy. If you don't believe you are a morning person, try getting up early, working out and it might prove to yourself that you are a morning person if you want to be. There is a 100K reasons its better for UK to be a part of EU, and a 100K reasons it's better for UK to not be a part of EU. To people could read the same article that gives points for both sides, and one would find the proof to them Brexit is good and the other the opposite. When you find yourself convinced you are correct about something, try stepping back, and saying why do I want to see this? What is it in myself that makes me think this is correct. Very few things have a correct answer. You wouldn't ask the public to vote if it weren't so. Be become better designer by learning to adjust our own filters. Links: - https://foolproof.co.uk/journal/what-if-i-told-you-that-you-dont-know-how-to-think/ (What if I told you that you don't know how to think?) Perspective Suppressors:- When Buckminster Fuller invented the Geodesic dome, it was an engineering breakthrough. It is a dome made out of triangle shapes, which meant any force is evenly distributed around the dome. Buckminster Fuller was partially blind from a young age, and most of his understanding about how structures looked and worked, came from his sister explaining it to him. It is entirely possible not being able to see the world accurately worked to his advantage. Once we are convinced we have the correct answer, it shuts us down. The great architect Frank Lloyd Wright didn't finish university. He decided to work it out for himself and maybe that is why he had so many architectural breakthroughs. A degree is useful, but once we get the degree, we don't want to think of ourselves as an expert just because we have a paper with someones signature on it. For the most part, school didn't teach us to perceive, just like it didn't teach us to be creative. School didn't teach us to perceive the world. It thought us to remember things, to rationalize. Rationalizing like data gives us a false sense of security, and makes us think we have the right answer and stops us from looking. Frank Lloyd Wright didn't think he had the right answer and neither did Buckminister Fuller. In this module we will look a little about how perception works. And we don't perceive much of the world around us. If we are not actively looking for answers to questions, we will never find them. And if we already think we know best, we don't have a chance. When we learnt about Postmodernism, we talked about how Christopher Columbus bumped into America because he said maybe we are wrong about maps. The curiosity of let's see if we are wrong slowly died out. We started trying to cut corners and use rational logic, to figure out what we thought might happen, rather than go and actually see what does happen. Plato, Aristotle and Socrates all had the idea of rational logic, back in ancient Greece. When used correctly it was a massive advantage, and it really, really helped society. It pushed us along massively. Socrates himself said to use rhetoric for good, rhetoric cannot exist for good alone, it must depend on philosophy to guide its morality. Socrates didn't think you could just have a logical argument and follow it. When the Christians ruled Europe they hated the idea of rhetoric, but eventually they realized they could use logic to prove the existence of God. From an atheistic view of trying to prove yourself wrong, and look at the whole picture and get a well rounded view of the world, we might look at the fact that christians live longer, commit less crimes, have happier family relationships, less likely to commit suicide and generally live healtheir lives. Christians might have better luck in converting people today not with logic, but with perception. Nothing damages our perception more than logic, and there is nothing more important to design than perception. The second we think we know best or we start to think of arguments for why something is correct or not correct rather than going and actually finding out, we start using logic, and as soon as we start using logic, we stop using perception. A large amount of the work we did in schools, and the way we learned in schools was very much influenced by logic. We rarely went out on field trips to see, perceive, experience, things first hand. It would be a nightmare of the education system. Logic kills perception, it tells us we already know the answer, and stops us from looking. On every step of the design journey, we want to say maybe I'm wrong about this, I better check, I better make sure, I better find some real world perceived evidence about this, not trying to rationalize it or explain it logically. Logic is the enemy of perception. How We See:- The job of your perception isn't to get a complete, accurate view of the world as it is. It's to understand it. The video you see in your head all day that you assume is a vision of the real world is widely incorrect. The person with the best vision in the world, is blind for at least 8% of the day, because 8% of the day they are mid blink. 8% of the frames of video that you think is the real world is completely made up by your brain. Around 30% of your cortex is just for vision processing. A massive amount of your brain power is to make it seem like what you think you are seeing is the real world, when it isn't. This presents a problem because we perceive a tiny amount of the world around us, but we have confidence and we believe we are seeing the full picture. The only actual real high resolution focused viewing you have from your eyes is what is being seen by the fovea. - And if you are looking at your computer screen right now, it covers about the size of a postage stamp. And depending on distance could be even smaller. Your peripheral is out of focus, and you are hardly understanding anything happening there, and it mostly exists to spot movement incase something is about to attack you from the corner of your eye. When you move the focus to another word around the word currently being focused on, you make a saccadic eye movement, which are rapid, ballistic movements of the eyes that abruptly change the point of fixation. You had to make the movement because you couldn't possibly focus on two words at the same time. When we make that saccadic eye movement we are temporarily blind. So really 10% of your day is made up. Most of the time when you move your focus, the saccadic eye movements are pretty random. Your eye jumps around randomly looking at all kids of crazy places, just to try and understand whats happening around you. We piece all this bits of information together and we get something that kind of looks like the real world. We don't perceive the whole world around us, we collect bits of information and combine them in our heads. We never want to assume the user is seeing everything on the page, they aren't. - Overall the less things we have, the less complicated the website is, and the more chance there is for the user to spot the thing we want them to spot. The whole job of our eyes isn't to see the whole world around us. Our eyes are there to understand the world around us, and that is not the same as seeing it all. We don't want to assume our users see everything. They don't. Colour Perception:- There are a few reasons that explain dressgate. One is that the eyes correct the colour you see around the dress, and the picture doesn't have any human or reference points in it. It thinks its under some ambient light so simply corrects the colours to what it thinks they are. Everything you look at has a light frequency, and that is what determines what colour it looks like to us. When we see colour, we are seeing different frequencies. If we see something red, green or blue, we are seeing drastically different frequencies hitting our eye. It's all light frequency. By the time information has left our eyes, it's been converted to working on some different axes, red to green, blue to yellow, dark to light. That is why when somebody has colourblindness, they have either red green colourblindness, or blue yellow colourblindness. You can use the app for mac "Sim Daltonism" to easily see if something works well with different colourblindness. #000000 in hex code is 0 amount of red, blue and green, or black. Above 9, it goes from A to F. #ffffff in hex code is highest intensities of three colours or white. #330000 is 1/5th the intensity of red, no blue and no green, a redy black colour. #660000 is around 2/5th the intensity of red, no blue and no green, a more red less black colour. When we work hex codes out, we work it based on perception, not light. As we increment colour codes, this hex code, we aren't increasing that much light, we are increasing the amount of light it needs to increase that much perceived light. The colour #660000 has twice as much perceived light as #330000, and not as much actual light. We are concerned about perception and not reality. Tests into how people perceived the intensity of different stimulus, were originally done by Ernst Heinrich Weber, and were later improved upon by Gustav Fechner. We now call this the Weber–Fechner law. As the intensity of stimulus increases, our perceived intensity of stimulus increases at a different rate depending on the stimulus. If you increase the brightness of the light, the brighter it gets, the less aware we are of the increment. If you increase the intensity of electric shock, the stronger it gets, the more intense it gets, the more aware our perception of the increment becomes. This becomes important when we talk about the different visual attributes your website has. colour perception is a great example, one that everyone can understand, about how we don't perceive the world exactly how it is. How our brain tweaks things and alters things, so people can see a dress in two different colours. As designers we reference things more to do with perception than real world. When we reference colours used, we reference colours using the perceived intensity of the light. Our perception of intensity can change to real intensity depending on the kind of stimulus. The way we perceive the intensity of light compared to actual intensity of light seems to reduce over time. It is the opposite with electric shocks. - As a designer we are much more interested in peoples perception of the world than we are in the actual real world. Peoples perception of intensity of different stimuli changes the greater the intensity. With light the brighter it gets, the less we notice. How we focus:- The person using your website might not be focused. Most of the activity online isn't focused. People aren't there to complete a task. Browsing or scrolling youtube isn't trying to accomplish something, you are in a period of diffused thinking. When we talk about perception and how people focus, the first thing we want to think about is if they actually need to focus on this site at this time. Suppose when working on a project, and someone says, lets swap out pagination for infinite scroll, one way to look at it is - Pagination is for searching, Infinite scroll is for browsing. Something like google where you are trying to find information as a task uses pagination. Something like dribble where you are just there for inspiration, or for a break, you are not looking for a specific thing, has infinite scrolling. - It completely changes the design elements and how we load the page just because someone is in a diffused thinking stage or a focused thinking stage. A site like google has no ads on side of search queries, because you are in a focused thinking stage, and instead has an ad related to the query in line with rest or results. A site like youtube has ads all over the place because most people are there with the intent of wasting time, in a diffused state, looking for distractions. Suppose you are on amazon, and you are looking to buy a shoe, all perceptive filters are now making sure you are unaware of anything else happening in the world, other than how to get to the footwear or menswear category. - When we are in a task focused state, our awareness of the world around us is entirely what we need to accomplish that task. If you open the side menu on amazon and looking for footwear, you might be completely oblivious to the fact that amazon even sells books, and if somebody asked you in future where to buy a book, you might not even know Amazon sells them, because at no point did your filtering even give you that information, it didn't help in any way for buying shoes. - A lot of times when people talk about user experience or even usability, they are talking about designing applications for people in a task centric state of thinking. But most applications and websites are for when we are in a diffused state of thinking. Almost all websites have a little bit of both, depending on where in the site you are. - The incredibly small amount of information from your website that actually gets through to someones brain is dependent on what task they are trying to accomplish. They are only going to acknowledge the things they think they need to do the task. They are only going to be aware of certain things existing if their filter has told them it exists. Not everybody on all websites is even trying to accomplish something, they might not necessarily have a task. If they don't have a task currently, they will notice all kinds of things. How We Remember:- We have several kinds of memory, between us seeing something on screen and it being in our long term memory, there are multiple phases. First, we have our iconic memory, and this is the memory that is in our eye. When we look at some light, the photons in our eye keep firing for about a quarter of a second after we stop looking at it. When we see someone with a sparkler, it leaves a trail behind it. Or if we see a fast moving object with lights on, it looks like it has a light behind it. That is because you have a very short memory inside your eye of where the light was previously. Your iconic memory, is very fast but short. It picks up colours, lights, movements, patterns. Second, we have our filter. The thing which says "is this what we are looking for or is it of interest to us right now?". It looks for visual patterns and tries to work out if it should let us know that it's seen it or not. If the filter decides if we should know about it, it puts it into our working memory. Third, we have our working memory. Our working memory can only hold a finite amount of things. Some people say 5-7 or 9 on a very good day. We are only going to add things if it is very important, as we will need to take something else out of our working memory, and either delete it or store it in long term memory if we want to put something new in there. It is like Etch A Sketch, you can draw something on this board, then you have to delete it if you want to write something else on it. And imagine people have a few of these in their brain, and that is their working memory. When someone thinks they are multitasking, every time they switch between two tasks, they have to delete everything on all the Etch A Sketchs, and refill their working memory with all the stuff required for the other task. When someone says they are good at multi tasking, chances are they are either lying, or they are so unengaged that they are not using that system for focused thought. If somebody is playing with their phone when you talk to them, maybe they are still listening but they are assigning fewer Etch A Sketchs to you. When somebody is talking, all the information are many thousand things, you can only pick up very very specific stuff into working memory. No one is 100 percent listening to you, maybe 20%, and when using their phone maybe 10%. It's impossible for someone to be fully engaged in using your application or website, maybe 20% engaged. There is no way for them to consciously comprehend all the stuff on there at once. Realistically they are thinking about something else, or paying with their phones or talking to somebody at the same time. Look at the website or application you are designing right now, what are you asking people to hold in their working memory? If it's an e-commerce site, it might be the category they are in or the page they are currently on, or how many items are on their shopping basket. These are obvious things people hold in memory as they use a website, and what we do is put something on the screen, so that they don't have to hold it in their working memory. We will occasionally move something from our working memory into our long term memory. Fourth, we have our long term memory. Once something is in our long term memory, it is pretty much there forever, apart from slowly deteriorating over the course of our lives. There are several things that make us store it to long term memory. Simple repeating something over and over is one. Sometimes if something is unique and weird is another. Putting a story around something would make something easier to recall. The one thing that is hardest to recall, and most important would be their password. Maybe someone is on your site, but they can't remember their login, so they just give up after a while and leave, and that would be pretty bad. When we recall a memory, we are reigniting all the neural pathways to where we stored it. When we use a short story to remember something, it's handy because a story is easier to remember as its connected to more neural pathways. If a login page looks bland, there are no unique elements to connect to for the neural network to fire something off. I login page that looks a bit weird, would have unique things around the login box like some drawing or imagery, and looking at these weird things again might spark memory of the password. A blank login page is lazy, and the chances of a user remembering their password is very low. We never have anyones complete attention, it's not possible for anyone to give us that, and is impossible for them to remember everything we say or everything we show them. It is also not possible for users to intuitively know how to use a website. There is nothing natural about using any website, there is always a learning curve. Remembering a password is one of the hardest things you can ask a user to remember. We remember things by reigniting the neural pathways that led to where we stored the information last time. A bland application would form no neural pathways, and there is no reason for a person to remember how they used the site last time or even that it was your site they used. Whilst they are using our site we want to be always aware of many bits of their working memory we are using up. Ideally as few as possible. Visual Channels:- A visual encoding channel is the thing that helps us differentiate between two objects on a page. You can differentiate between two objects because of their position. If now there are ten of same object on screen, then you could use colour to difereciate. Salience is the quality of being noticeable, that makes it stand out. The things that make objects stand out we call visual encoding channels. Position, colour, Size, Shape, Texture, Gradient, Angle, are all Visual Encoding Channels. Each channel can be broken down further. The two different qualities of colour are Hue and Brightness. Some Visual Encoding Channels interfere with each other. You might make some longer and some slightly wider, but if they are placed on screen rotated, then you might not be able to tell if they are same or not. We can't use two visual channels to give salience to different objects because they interfere with each other. A login page almost always has two input fields and a button. These elements are almost always in the middle of page, so they already have the position channel to give them salience. We could use shape and colour to help draw attention to what they are. And we would still have a rich array of visual channels to make the page more creative and unique, something to jog memory, and give them something to jog their memory to what the password is. In 1986, Jack Mackinlay many experiments to rank the effectiveness of different visual channels. His findings are used largely in information design and data visualization, but at least gives us some idea to what are the most useful visual channels for the things we want to have the most salience or to stand out the most. A bar chart has two different values to tell the difference of two bars, one is the size of the bar, and the other is position. We might think size of the bar is easier to perceive, but its actually position that matters more. A pie chart has three different visual channels, the angle in center of each slice of pie, the area of the pie, and length of outer line of slice of pie. Separating out each visual channels is not helpful, but combined helps us. Most people judge on just on channel. See the The Mackinlay ranking of perceptual task: https://www.researchgate.net/figure/The-Mackinlay-ranking-of-perceptual-task_fig2_221098028 Nominal visualization raking goes Position, colour Hue, Texture, Connection, Containment, Density, Saturation, Shape, Length, Angle, Slope, Area. These visual channels don't interfere with each other. Since the 90s, there have been many new visual channels. One of which is Movement( or animation). Position is the most important by far. And that is why we begin with wireframes, that is the position of elements on page. We present the wireframe to stakeholders first, because as soon as we get other elements involved, people will talk about those more. People love talking about colour, but not about position. After the position is determined, the colour, texture, connection, density, angle are all vitally important to the design. We cannot user test a wireframe, and we can't hand it over to a developer. A wireframe is no way ready to be passed off, and that is a good thing because its easier to differentiate the elements and their uses on a page once we get colour involved, and the other visual channels. To easily spot something on a page it needs salience. The quality that makes a visual element pop out are called visual channels. The less elements using the same visual channels, the more likely a single or few elements stand out. Certain visual channels have a greater salience than others, but in reality it is more about how intensely those visual channels are being used. A brighter colour will have more salience. Links: - https://www.researchgate.net/figure/The-Mackinlay-ranking-of-perceptual-task_fig2_221098028 (The Mackinlay ranking of perceptual task.) - https://www.cs171.org/2015/assets/slides/05-marks_channels.pdf (The Visualization Alphabet: Marks and Channels) Hierarchy:- The first piece of graphic design that most people does is probably a word document. We establish a visual hierarchy right from the start by making the heading much bigger than the rest of the text. Instantly tells people this is what the rest of the document is about, read this first. The next thing is making the meta information much smaller, the name or page number at bottom of page. The meta information is largely not useful, so it's the one time you get away with making the text too small to be read by anybody or not have enough contrast to be read by anybody. It stops from distracting of the main content of the page. Some people who do usability audits on pages make the mistake of marking up content that has low contrast to high contrast, but sometimes its meta information, it is not something that has to be read to use the document or website so it can be too small. And on the off chance the one percent of people who need to read the meta information, are also in the one percent of people who can't read that size, they can just ask another person to, as it is a very rare case. We don't want to damage the rest of design of document for that one percent of one percent of people. If your document had two heading of equal importance, both could be made to same size, but we are talking about the heirarchy of page, so we should look back at our visual channels hierarchy. We are trying to differentiate between quantitative values, that is how important each of the heading are. Both of these heading are equally important, and Position is the most important in visual channel hierarchy, and so the heading at top is seen as more important, and will be read first. We could increase the importance of the lower heading by making it larger, changing the colour, and even have a larger area around it. One that people forget is the size of text, is no more important than how much space it occupies, and white space is great for this. There is all kinds of visual channels we can play with, to increase the importance of and improve the hierarchy of the second heading. You can't pay attention to two things at same time. Imagine you go to a concert where two bands are performing, it would be the difference of one going first and following the other, or both playing on same stage at same time, it would sound like noice. Position is the most important piece of the visual channel hierarchy. Knowing whats number one, tells us what to look at or read first. Trying to make everything on page, the most important thing, will ruin any design. Your user can only look at one thing first, and only one thing next, and only one thing after that. And they don't know where to look first, but you do. You have much more information about what each element on the page is and why it is there, than a user who has just arrived there. If everything has an equally important hierarchy, you are making the user decide what they should look at first, and they don't even know whats one this page yet. One things you could do before doing a wireframe, is to work out what all the elements that will go on screen are, and assign a hierarchy score. Only one thing on the screen can be the most important thing for the user to look at, and as the user gets comfortable you can have two or three things, that are the second most important thing to look at. The further down the hierarchy score we get, the more elements we can have in that level of hierarchy. The more elements we have, the deeper our hierarchy has to go. The user of a website can only look at one thing first, and ideally we should tell them what it is, because we know better than they do all the things to look at and importance of each. Before working on the visual hierarchy, we should first determine the hierarchy score for the elements, the first most important thing, then the second most. User will only look at one thing first, and one thing second, and you have to help them know what that first thing is. Links: - https://www.bbc.com/ (Heirarchy, sub-heirarchies, visual channel hierarchy) Pre Attentive Visual Channels:- Some visual channels are more important than others, because they are pre attentive. When your fovea is randomly scanning around a page, it is looking for the task you set it, a specific thing. If a visual channel is pre attentive, it means we can see out the corner of our eye, even if we are not directly looking at it in the center of our vision, we can notice it's there. It doesn't require our conscious mind to set the task to try and find this thing. Ranking the pre attentive visual channels, we would have position first, then length or width in how much of page it takes up, then angle or slope which is rarely used but effective, then area in how much of page space is taken up, then volume which is mostly important for vr but can be used on 2d pages to appear 3d using drop shadows or gradients, then lastly the least effective pre attentive visual channel is colour which can be split to hue or darkness or contrast or density. Colour is at the very bottom of what we perceive preventively, and will only work if everything on page isn't also that colour. And there are only a handful of colours that we can differentiate pre attentively. We shouldn't overuse colour either. Any channel that is not pre attentive people can look at directly with their fovea, and because they aren't intending to find it, they might instantly forget it. We have a tendency of only remembering what we are looking for. But we needed to remember these visual channels were ranked in 1986, movement was not a consideration then. If something moves in the corner of screen, it instantly catches our attention, because our peripheral visual exists purely to see attack from a predator. If you have a carousal that moves automatically every few seconds, that instantly catches peoples attention. If you have an add on the side that moves actively, people can't avoid checking it out, their brain is wired thinking it might be a predator. - A movement on site not initiated by the user, will damage their attention whilst trying to complete another task. There are many visual encoding channels you can play with for fun or to create character around your design. You can add textures, shapes, filled areas, curvature, misalignment or orientation, sharpness or blurriness. There are a rich array of visual channels you can add to give a design character that will not interfere with the pre attentive channels you already have. Identify any elements in your design that you need some level of confidence to ensure users will definitely spot them, and ensure these elements use pre attentive visual channels. A pre attentive channel is any channel you can identify without focusing your attention on it. Check the links for a full list of pre attentive channels. Links: - https://learnforeverlearn.com/preattentive/ (Exploring Preattentive Attributes (Beta)) - https://www.cc.gatech.edu/~stasko/7450/12/Notes/perception.pdf (Graphical/Visual Properties 36pg) Gestalt Psychology:- We now know how to give different elements on our page salience, to make them stand out or be obvious, and make it so we can acknowledge them before we have even moved our fovea, out field of vision there and point them out. Now we look at how to group things together, and not pop out, but like they belong together, like they are part of same thing. Around 1910, Max Wertheimer noticed that a line of blinking lights around a sign, like the ones seen in Las Vegas, appear to look like a light snake moving. It appeared like the light bulbs weren't individual bulbs coming on and off, but actually a single snake of lights moving together. We know how iconic memory works, that when we move a sparker fast it looks like a light trail and not a single sparkler moving, because our eye and iconic memory remembers a quarter second of history and we fill in the gaps. Max Wertheimer got interested in how close the light bulbs needs to be and how close together the flashes of the bulbs needed to be until they looked like individual bulbs rather than a light snake. This is called the Phi Effect, and its important to us because our working memory can only hold a finite amount of chunks of information. A single blinking bulb is one chunk, and a light snake is one chunk. - Our working memory doesn't discriminate between the size of the chunk of information it stores, it can store a whole pattern or a single element. The filters in our working memory will spot a pattern and pass it on to our working memory as a single chunk of information. - Working out how to create patterns is vitally important to designing an interface. Max teamed up with other psychologists Kurt Koffka and Wolfgang Köhler, and they created what we now call Gestalt Psychology. Gestalt means pattern. And this is about what we identify as a pattern, and what are the extremities to when we stop identifying something as a pattern, which is important to reduce the weight of our working memory that we will be using up in our designs. Kurt Koffka said the phrase "The whole is other than the sum of its parts", misquoted to "The whole is greater than the sum of its parts". It is not whether a pattern is better but that they are not perceived as the same. Some of the Gestalt Psychology principles that make multiple items appear to be a pattern rather than individual items are Proximity, Similarity, Orientation, Symmetry, Continuity, Closure, Enclosed. Not all patterns are born equal, some appear closer related because of the Gestalt principles they use than others. Two elements that are connected in some way appear to be closer than two elements that are just near each other. Two elements that are enclosed in the same area, appear to be closer to us than two objects that happen to be the same shape and next to each other. It is much harder to rank Gestalt principals than it is to rank visual channels. Two objects connected are closer than two objects near each other, but beyond a certain point probably not. We can use Gestalt principles to aid in the salience of a single element. If you have a page with 5 square elements, and one triangle, the triangle has salience. If you have 5 objects close together but one isn't, that object has salience. We can use a pattern in our design so that when we break the pattern, it gives a certain amount of salience to the time we break it. Shakespeare used to break rhyming conventions when something serious was about to happen to build tension. When we assign things to our working memory, those chunks of information can be any size, they could be a single piece, a single word, or a whole pattern. This makes patterns incredibly useful to design. When we put text right next to a checkbox, it doesn't just tell us they are related, it makes us perceive them as one object. Gestalt Psychology is the study of when we perceive something as being a pattern or when perceive it as being individual objects. Links: - https://www.toptal.com/designers/ui/gestalt-principles-of-design (Exploring the Gestalt Principles of Design) - http://www.scholarpedia.org/article/Gestalt_principles (Gestalt principles) - https://uxmisfit.com/2019/04/23/ui-design-in-practice-gestalt-principles/ (UI Design in Practice: Gestalt Principles) Summary:- Perception is out understanding of the world. It is not a replica of the world. We could never replicate the world from just our understanding. Our customers don't see everything on an application, any more than we see everything in the real world. We need to give them all the help we can to help them spot what they need. And we need to understand them to make sure we are giving them what they need. A customer will see our application very differently when they are trying to perform a task, then if they are just browsing. Salience can be increased with any element on the application by using a visual channel that isn't used elsewhere on the application. We never have their full attention, we never have anyones full attention. Even someones complete attention is limited. We have a finite amount of working memory of chunks of information, we can store for later or bringing together to process and compare. Most of these are already used up with things on the back of our mind, when we are using that location, leaving us with a tiny bit of working memory. So anything that can be stored in the real world or on the screen should be. Anything that can fit into a pattern helps us. A pattern is stored as a single chunk in our working memory, so they are much more efficient. The psychology of what is perceived as a pattern and what is perceived as a single object is called Gestalt Psychology. People love it when they can understand the world around them, so people love patterns they can understand. We even create patterns that don't exist to aid our memory. People love patterns in interactions, colour, layout. When the world is easy to perceive we feel good. When someone has learned how to use your products, where things are, and how they feel about it, and for someone to use your product again, they would need to access those memories. For those memories to be accessed, a unique set of neural pathways need to be activated. If someone makes an application so bland, that it doesn't ignite a unique set of neurons, it will be forgotten instantly. Most usability testers will miss this, as most designers only test how easy an application is to complete on the first use of site. The real damage to usability is done by sites that are so bland they are instantly forgotten. --- Section 13: Usability: Introduction:- How can you make your application completely intuitive for everyone to use? Some people think of usability as something you can measure, they want a pie chart for the next meeting. You can't measure it. There is no such thing as an intuitive product, people aren't born knowing how to use a product. Some people even say it's an essential part of all designs to be completely intuitive for everyone to use Apple as an example. But Apple is often used as an example of a company who makes products that are unintuitive. Expecting products to be totally intuitive is setting up products to fail. We would need to change everything on our application every time we watch a different user use it. Anyone you watch using your product will use it differently. They will all use it wrong in some way or misunderstand something. We know people don't perceive the world the same, some why would we assume people don't think the same or act the same. You won't learn much from watching one person use your application, because if they use it wrong they might be in the 0.1% of people using it right. If you see something in an app and go I don't expect it to work that way then you might be in the 0.1% who think like that, and this application could be the most intuitive thing ever made. You will hear people say "you are not your user", so you can't usability test yourself, sure but mainly because you are just one person. Everyone makes mistakes, but usability is about how we try and reduce the errors, and how our application makes amends and apologizes for those mistakes. Make Me Think:- Usability and accessibility were probably made popular when we tried to help elderly people and disabled people. When potato peelers where given spongy handles, they were made easier to use for people with arthritis to hold, and everyone bought them. When Tesco supermarket made an accessible version of the site for people with bad eyesight, it was so popular that they just integrated it into the main site. Not only are there plenty of disabled people around, but everybody is a bit disables some of the time. Sometimes we are trying to use a door while both are hands are holding something, or use a website while a TV is on in the background. When we make a website easier to use and more accessible, we make it easier for everybody to use. Around 2000, Steve Krug released a book "Don't make me think.", and it was an instant success partly because it was so accessible, easy to read and so you could tell it was someone who understood usability and accessibility. Not only did every designer read it, but probably every developer. He told us not to make our users think too much, that they have invisible question marks appearing above their heads, and we want to remove as many of them as possible. "Can I click on this? Is this the header? What happens if I go here? What have I ended up on the wrong page?". He didn't teach us they have to click on the right thing, or learn how to use our site. He told us to satisfice and not optimize. Users work out how to do what they need to do. Learning how to do what they need to do doesn't take very long, and as soon as they learn how to do that, they stop learning how to use the site. - They are not going to use the site how you intend it to, so be ready for that. - They are not going to read the instruction you wrote, so be ready for that. Having to read instructions to use a website makes us feel stupid, and is boring. Guessing how a site works is more fun, and most of time averages out to be faster than to find out how it's suppose to work. Usability isn't about educating how a site works, its about have the safety nets in the right correct place for when they mess up. As soon as people find something that works, they stop looking for a better way, they stop learning. We we learnt about perception we learnt people don't see the whole page, they aimlessly glance around. They find something that sounds a bit like what they might be looking for, and they click on it. It's going to be the wrong thing a lot. When we use a software we assume we are using it like everybody else, but our behaviour isn't normal. Everyone perceives the world differently and so think differently. When you do user testing, you will notice if you set a task for 5 different people, all 5 are going to click in completely different places, to the point where it almost feels pointless. You are not looking for if they are clicking in the right place, you are doing usability testing. Steve Kroft gave us a few ways to try and minimize the errors people make, and to inform them if they have made them. Some of the question marks that appear above a person's head are subconscious, but they build up and make them uncomfortable. People might feel confused and you don't want to relate a feeling of confusion to your brand or site. The extra work they are doing, whether it is subconscious question marks or adding things their working memory, we would call them cognitive load. We are always trying to reduce the cognitive load. It will always exist but we are trying to reduce it. One criticism to Steve Krug's book is that sometimes you want people to think. In many cases you want people to increase their cognitive load, and use some brainpower. Sometimes people are administering a task, and it's good for them to not think then, but sometimes the application is giving them information, like with the NASA slide. We didn't want people to not think then at that point. The guardian newspaper has some beautiful data visualizations, that do the exact opposite and make you think. You have to be able to wake your mind up to use them. If you are trying to provide you user with information, you want them thinking, and sometimes you want them thinking while they are just doing a task. Imagine you added something to your shopping basket, and now imagine you forgot you did it because the activity was so unmemorable. You forgot you even did it one time and you may keep adding it. This could be an increasing problem with voice assistant like Alexa, that have a bland emotionless personality, that you might forget what you asked Alexa to do. When we are trying to look at our website to try and work out if there are usability issues or not, - we aren't necessarily just looking to see people making mistakes, we are looking for how quickly they learn how to use it. People are going to make mistakes, if we change the web design every time someone makes a mistake, we will never finish the design stage. The first time you used a Mac, you had to ask someone how to right-click, and they are still one of the richest companies today. Usability testing is about ensuring the safety net is there for when they do fall, or removing the things everybody gets wrong. - Sometimes you are giving the user information, and you want them to think. You shouldn't make everything as mindless as possible. Links: - http://ryanjmccall.com/wp/wp-content/uploads/2015/03/FaghihietalKahneman.pdf (A Cognitive Model Fleshes out Kahneman’s Fast and Slow Systems) Usability Testing:- Throughout this module we will be looking at two kinds of usability testing. First is creating a usability audit, which is a kind of checklist to make sure all your designs don't betray any of the things you believe to be usability issues. Other is running a usability test, essentially watching somebody using the application and seeing where they struggle. There are three levels of difficulty of usability testing that you might see people do. First is a kind of online click test, and you might use a site like usability hub to upload your designs, and allow maybe 30 people to try and complete a task on design, and you can see exactly where they clicked and how long it took them to make each decision. Next is to observe somebody using the site, but grabbing anyone you can find. You could ask someone in your office to complete a task and watch them using it. Finally is getting to somebody's place to work, where they will actually be using the application and watching them using it. There you will get the best information. The online click test is massively flawed, it misses the reason you are doing the usability test in the first place. It can tell us if 90% of people are clicking in the wrong place when trying to access something, but it can't tell us much more than that. In the surfer learning to surf analogy, they are going to fall all the time, but as long as they jump back on, swim back, and have another go, it was never rally a problem, and they are going to fall off a lot. A 1/3 of all clicks online are the back button on a browser. The difference between someone learning to surf and someone learning to use a website, is nobody ever actually learns how to use your website. We satisfice, we figure out how to do what we need to do, and we never really properly learn how it's suppose to be used. You can click the wrong thing on a site, it will be fine and you can go back and figure it out, then later remember how you used it. The advantage of watching somebody using a site is a million times more useful. If somebody falls off a surfboard but can't figure out why, then the frustration will make them give up. But if they can see why they fell off, they will jump back on, paddle and have another go. If all you have is data about whether they managed to stay on the board and how much they fell off, you don't get any of that information. - What we want to see is how they respond when they do make a mistake. Do they understand why they went wrong? Do they feel in control? Do they know where they came to? Some people treat usability testing like its trying to find all the issues on a website. From that perspective, everything on a website is an issue, because somethings on your website are an issue to some people, sometimes, to some degree. Some people will say you only need to do 5 user tests because that will get you the optimal amount of issues. Those people don't know why they are user testing. User testing with somebody else in your office is about a 100,000x better than doing an online click test because you can see the frustration or the job in their face. When Apple and Microsoft first started they would do dogfooding, where they got their own staff to use the software, and see how they responded. One of the biggest advantages of this was that they were getting better at user testing. Getting better at understanding and empathizing at reading people's emotions. Someone feeling in control, is the difference between a taxi company and Uber. No one cares about clicking the wrong button and having to click back. If 90% of people using your site click in the wrong place, you need to make a note of that and make changes. The final kind of testing is going to actual person's actual place of work, like if Apple instead of testing on their own people in 80s, went out to all different offices in the world and started watching different people at work at their desks. This is of vital importance. Airline food tastes different on a plane because of different cabin pressure and temperature. Food even tastes different depending on the ambient sounds in a restaurant. Our experience is massively altered by our environment. Something on your website might not frustrate someone while they are in a quite cubicle, but when they are in a loud restaurant environment, it may push them over the edge. We can learn much more from testing with actual users in actual environments they will be using it, but it can be a lot more expensive and it will allow you to do much less tests, than doing it with someone directly available. You absolutely have to test your designs with your actual users, in the context of where they will actually use it. It's worth testing with everyone and anyone you can get your hands on, even if it's the person that sits next to you at work. It's a great start, and it's great for you to get some practice. Spotting if somebody clicks on right place or not is easy, but identifying how they have emotionally responded, and how they are feeling very very difficult. The more tests you can do with the more software, the more practice you can get, the better. Links: - https://articles.uie.com/user_exposure_hours/ (Fast Path to a Great UX – Increased Exposure Hours) (2 hours of direct exposure with one participant could be as valuable (if not more valuable) than eight participants at 15-minutes each. The two hours with that one participant, seeing the detailed subtleties and nuances of their interactions with the design, can drive a tremendous amount of actionable value to the team, when done well. ) Usability Audit:- Before we talked about how a lot of places crashed in WW2 because of accidents. People kept crashing the B52 bomber because the landing gear and flaps were two leavers right next to each other, looking the same. Pulling on the wrong leaver is a stupid mistake for a trained pilot to be making. The problem was because they were in fact smart, and had done the complicated task of flying the plane, and possibly completing some missions, something as easy as putting the flaps down end of mission did not required focused thinking. It was a subconscious not that important decision. Air travel is now one of the safest ways to travel. One of the huge improvements they did, was to give pilots a simple checklist, and they have to go through it and check check check for each item in list. Pilots are super smart, and therefore they miss some of the simple stuff. because they are only going to engage that focused mode thinking when they have to do something important. The checklist is otherwise boring mind numbing stuff, that you have to do before you take off, and they don't really want to engage their thinking in that, exert energy and use working memory for that stuff. What Daniel Kahneman thought us was that intelligent people are more likely to make stupid mistakes, because they are not going to engage their brain for something that seems quite straight forward and simple. When we have a completed design that we are happy with, and done a lot of hard work with our brains, then we will likely avoid going through a through mental checklist to make sure it meets all certain requirements. Which is why you should have a usability checklist, and maybe also an accessibility checklist. Some corporations hire a usability consultant to do usability audits on their web application, and can cost over $5k, and can be a waste of money. Every element on every website ever made is a usability issue of some form. The list of things people may or may not consider a usability issue can range in hundreds, and some can be value or opinionated. It can be more harm than good. Even a 5 year old can look at the best designed thing ever made and list a 100 issues with it. We combine this with the fact that we talk about what is easy, and not what is important, means that anybody can look at any page of your software and list of 15 genuine usability issues and ask you a lot of money for doing it. And right after you fix them, they can find all the usability issues that contradict the ones they found last time. To conduct a usability issue on your site, you would have to have predefined, what it is you want to test and what level is or not acceptable. You need a checklist and you need it to be solid. There are professional usability audit experts with checklists that say things like the interface should be simple, it should communicate clearly, the interface should provide, a satisfying user experience, etc. All these examples are deceptively vague that you could choose any element on any page it didn't or did do those things. Whether it's you or somebody else performing the usability audit you must have a checklist beforehand or what is or is not acceptable. And as you've made this checklist with effort, care and attention to detail, it should be foolproof for anybody to follow, so you do not need to spend that $5K+ on a usability expert. The smartest people make the stupidest mistakes. So it's best to have a checkbox to tick, to say we haven't made that simple mistake. We cannot conduct an audit on a site unless we have worked out what those checkboxes are. There are thousands of things we can say are or aren't good for the usability of a website if are riffing randomly off the top of our head or going through the 300 things that some people think are bad usability. We really want to be able to create this checklist before we do any design at all. We can remove a lot of these issues by just thinking about what they are beforehand, before we start designing and knowing we are going to be checked against them at end. Links: - https://www.nngroup.com/articles/ten-usability-heuristics/ (10 Usability Heuristics for User Interface Design) ( #1: Visibility of system status - Indicators to show people where they currently are, to help them understand where to go next. eg: mall maps #2: Match between system and the real world - When a design’s controls follow real-world conventions and correspond to desired outcomes (called natural mapping), it’s easier for users to learn and remember how the interface works. This helps to build an experience that feels intuitive. eg: stovetop controls match the layout of heating elements. #3: User control and freedom - Exits allow users to remain in control of the system and avoid getting stuck and feeling frustrated. eg: Digital spaces need quick “emergency exits,” just like physical spaces do. #4: Consistency and standards - Users should not have to wonder whether different words, situations, or actions mean the same thing. Jakob's Law states that people spend most of their time using digital products other than yours. Follow platform and industry conventions. eg: Check-in counters usually located at the front of hotels. This consistency meets customer's expectations. #5: Error prevention - There are two types of errors: slips and mistakes. Slips are unconscious errors caused by inattention. Mistakes are conscious errors based on a mismatch between the user’s mental model and the design. Good error messages are important, but the best designs carefully prevent problems from occurring in the first place. eg: Guard rails on curvy mountain roads prevent drivers from falling off cliffs. #6: Recognition rather than recall - Minimize the user's memory load by making elements, actions, and options visible. The user should not have to remember information from one part of the interface to another. Humans have limited short-term memories. Interfaces that promote recognition reduce the amount of cognitive effort required from users. eg: People are more likely to correctly answer the question Is Lisbon the capital of Portugal? rather than answer What’s the capital of Portugal? #7: Flexibility and efficiency of use - Flexible processes can be carried out in different ways, so that people can pick whichever method works for them. eg: Regular routes are listed on maps, but locals with more knowledge of the area can take shortcuts. #8: Aesthetic and minimalist design - Every extra unit of information in an interface competes with the relevant units of information and diminishes their relative visibility. eg: An ornate teapot may have excessive decorative elements that can interfere with usability, like an uncomfortable handle or hard to wash nozzle. #9: Help users recognize, diagnose, and recover from errors - Error messages should be expressed in plain language, precisely indicate the problem, and constructively suggest a solution. #10: Help and documentation - Help and documentation content should be easy to search and focused on the user's task. Keep it concise, and list concrete steps that need to be carried out. eg: Information kiosks at airports are easily recognizable and solve customers’ problems in context and immediately. ) Mental Models:- A mental model is to understand what the user has in their heads of how a web application works. Which is never 100% accurate. - We know users will satisfice, decide on and pursue a course of action that will satisfy the minimum requirements necessary to achieve a particular goal, rather than optimize, collecting as much data as possible and trying to find the optimal choice. - They won't learn how to use a software, they will learn what they need to do. We should try and get their understanding of how the application works as close to how it does actually work. - No two users Mental Model are going to be identical. They are all going to be faulty in slightly different ways. And first time a user uses your application, it's going to be different from the second or third time they use it. The designer's mental model is more important than anyone else and is set in stone. - The designer's mental model is called the conceptual model. On one side is the machine or software, on the other you have the user. The user interface is the point where the machinery and the user connect. - What is displayed on the user interface is based on the designer's conceptual model, the designers understanding of the system of machinery. What the user interprets from the user interface is made up from their own individual mental model. An error in the conceptual model, is far more serious than anything in the user's mental model. Suppose you were working on a piece of software for legal compliance that had a boolean operator in the database, true or false and can't be anything else on screen. And on the screen you can change the value using a radio checkbox. But there was an error where in the database true was set as the default answer, but on the interface none were visually selected on default. In the conceptual model the user was not told this which is serious. Any user using this application would have an incorrect mental model because the applications conceptual model was already incorrect. Seeing the radio button with neither true or false selected, tells the user there is a possible third state. This is an issue that could be resolved using a usability audit, asking does the conceptual model match how the system work? How users individual mental model works, will require some user testing. A lot of books say a users mental model has to do with preexisting expectations before arriving at site. Some courses seem to think everything means does it work like I expected it to work before hand, which encourages designers to think well that is not how I expected it to work, so we need to change it, which means you would change it and change it back and change it again over and over. It also stops people from finding out the actual mental models. Really before arriving at an application, - a user has no mental model about how it works or what it does, so you can only test how accurately a user has created a mental model after they have finished using the website, and we ask them what they think they did and what they think each element was doing in our user testing. Also look for multiple users making the same mistake. Simply watching the user use an application does not tell us any of this. And even if they did everything perfectly we need to still ask them to understand their reasoning. Once we have finished doing a user test, we want to clarify what the users mental model is. This can't be done with an online click test. Mental model is another thing that the design community get slightly wrong, and some people in design community think we need 15 different ways to say make it obvious for people to use. People don't learn how to use your website, they learn how to muddle through and get done what they need to do. The mental model of how your site works is never accurate. We are just hoping it is more accurate than not. You can think of their mental model as how they've learnt to use your site. They don't have a mental model of your site before they have used it, it doesn't exist yet. We need to clarify it after or during a user test. We sometimes refer to how well the user interface understands what the system does as the conceptual model. And if the conceptual model is wrong we confuse everybody. Standards:- Earlier we talked about standards and conventions to make it easier for users to create a good mental model of your site. Jakob Nielsen said users spend more time on other peoples sites, so you should probably make your own site work like theirs. We will start looking at some valid disagreements to this here and more in later modules. For now we will look at how you can identify standards in design. There are some standard out of box rules you probably want to have on your usability audit, but feel free to disagree with any of them. As you walk around in one store you don't drift into another store. Same can't be said about websites online. One click can take you out of one site and into another. We normally always keep the logo on the top right corner of a page, and clicking that anytime takes us to home page. Almost every link has text on it which indicates where clicking on it will take you. We keep the text there so users don't have to store it in working memory, and just look at it if they need reminding where they are. We tend to keep a marker in the menu to remind us what section or page we are on. Menu is normally horizontally on top, and sub menu is normally on left hand side. And increasingly we are hiding the entire menu behind a hamburger icons. These are standardized design patterns used on thousands of sites. Website ui-patterns.com is one of the many websites that tells us some standardized design patterns or interaction patterns. People on site vote on the standard is they think it's a good solution. When designing your site, you want to break convention occasionally, and sometimes you are doing something new, but probably most of time you want to stick to some conventions, and on this site people have already documented how to use each of the interactions, and best example of them. Since then site UX stack exchange has come out, and the level of detail people on stack exchange sites go to are incredibly detailed. Looking up something like Log in vs Sign in has a user talking about and giving studies or examples that show Sign in is the convention. One of the things that is going to add the most perceived value to your application us creativity, and you are going to want to break convention to be creative. On dribble site you can see the latest coolest fashion trend that designers are coming out with. Like with everything design we talked about so far, it's all about balance, standards with creativity. Making something that just follows standards, is going to have low perceived value, and people aren't going to want to pay lot of money to use it. People are going to perceive something as more usable just because they like it more, and if it is more ugly or boring, they are likely to perceive it as being less usable, even if it was more usable. Something that purely adheres to design standards and conventions is going to be forgettable. If there is information in there that you need someone to remember, then they won't be remembering it. And if you gave them a fantastic user experience and made it really easy to use, they will have forgotten all feelings they had toward your site a week later because it was a forgettable experience. And the more forgettable it is, everything they have learnt using this time, they would have forgotten by the time they come back. - A major flaw with user testing is you are only really testing how well they use the site the first time they are there. The more forgettable the site, the less they will learn about how to use it next time. You could check standards for usability audits, but it will say something like 80% of elements and interactions should adhere to UI design pattern standards. Later we will create some digital branding guidelines to show how all the components in our application should look and work, normally called a design system. These will be vital for usability audit, because you can simply say interactions elements and patterns must adhere to the digital branding guidelines. To increate the changes of people learning how to use our site, we can rely on some standards, they already learnt how to do certain interactions on other sites, and if we make them the same they will know how to do them on ours. Various sites have gone through painstaking effort to catalog and document exactly how to use different elements for different purposes in interface design. It is recommended to bookmark them and come back to them when needed. Our best experiences aren't with standardized things, you need to get the right balance between usability and experience. Links: - http://ui-patterns.com/patterns (Design patterns) - https://ux.stackexchange.com/ (UX | Explore our Questions) Make It Obvious:- We talked earlier about removing the invisible question marks from above peoples heads. Making it so that they have as few subconscious questions as possible. Look at each interaction and thing they need to understand to use your site and try and gauge how much ambiguity there is. How confusing or how obvious it is? 50 clicks or interactions that don't require them to think at all are better than a single click with some ambiguity or hard mental work. We know that reducing the number of clicks or interactions that someone has to take to accomplish a task is a bad idea. It will be more confusing and complicated as it will add more questions to the users heads. We need to make the appearance of each element that someone interacts with as obvious as possible, and is more important for elements that only appear on a single page, than something that exists in the menu that they are going to get used to very quickly. A submit button at end of contact form is more important than a menu item that appears on every page. . Each page of your application will have a number of interactions that are unique just to that page. There are some simple tricks that could be added to any element to make it more obvious we can interact with them. A button can have a slight gradient or drop shadow, to make it appear like it's sticking out from the page. A text area can have a slight inner shadow so it looks like it's set into the page. And is more important is we are using a non standard element. Affordance can be thought of as all the perceived uses of an element. If something appears to be sticking out of a page, it had the affordance that it can be pushed in. If something is perceived to be slightly on top of page, it has the affordance that you can pick it up and move it. A dial in the real world has indented lines for our fingers to grip, and we can take advantage of this signifier from the real world as it helps peoples brain recognize that it affords twisting. These simple graphic tricks are essential to try and remove some of the question marks and ease the cognitive load, of someone using an application. Some pages like the home page of an e-commerce site may have multiple functions on a single page, but all pages will to some extent, as all pages have a header, menu and footer around the content. Each of the areas needs to be visually different to tell us they have functional difference to rest of page. The page itself will have a primary action or several primary actions we expect the user to take on the page, and we need it to be obvious and stand out. All of the things suggested above could be deceptively vague in a usability audit checklist. The recommendation would be any unique interactions on any one page need some gradients or drop shadows to make it obvious they are movable objects. Different areas of function on a page need to be separated, either using different coloured backgrounds or containment lines. The primary functions need to stand out using an unpolluted visual encoding channel, colour could be one, that no other element should be using that visual channel. That is something like you could have a bright red button, and it could be the only bright colour on the whole page. Same could be done with any other visual channels. You might have something large and it could be the only large thing on page. You could have something at an angle, and it could be the only angles thing on page. We want to give every interactive element some kind of affordance to tell the user that they can use it in a certain way. A button can have a drop shadow and a gradient can make it look like its sticking out of page so we know we can push it in. This is interesting because almost no website used in years has any of these affordances or any of these things to help you know that an element is interactive. Some designers have said surely in this day and age people know that a coloured rectangle can be a button. And as a designer you could be weary of any sentence that starts with surely in this day and age. We don't just want it to be obvious, we want it to be pre attentively obvious. To say surely in this day and age a flat coloured rectangle can be a button isn't a reason to do it. It's an excuse to get us off the hook for why we really did it. And that is something far more powerful, it is that flat areas of colour with no gradients and drop shadows are more visually pleasing and calming. Visually pleasing may sound subjective, but it isn't completely. Even people who are using it for aesthetics will be using it because it looks for usable rather than actually being more usable. Irony is the one area of design most designers talk about the most is the one universally given up on, making things look obvious or affordances. Feedback:- After anything is updated in the system or any of the interfaces, we need to give the user feedback the split second it happens. If somebody clicks a button on a page, and it takes a second to process in back end, you cannot wait that second to tell them their click has registered. There needs to be instant feedback, as the click happens the button could appear to depress, or there could be a sound or animation, something that tells the user the click has registered as soon as it happens. If they have to wait 1 or 2 or 5 seconds, we need to tell them they are waiting. There needs to be some kind of loading icon, something needs to tell them there is a wait. People don't mind waiting, they mind being kept in the dark. Having a page take 10 sec is bad and annoying, but not telling the user there is a page loading, is a crime against usability. If there was an error either in something the user did or in the software, you need to tell them there was an error and what it was. Once you press the caps lock button on keyboard, there is a light on which indicates its on, and you don't need to store it in your working memory. But because nobody looks down at the keyboard, we have to help them on the password field on some user interfaces, because some people will have the caps lock on and forgotten about it. We need to keep the user informed on any state changes, and if they need to know about it in future, it needs to stay present on the screen somewhere. From time to time the user might be doing something damaging or irreversible, so we also want to ensure we check that is what they wanted to do, or add some feature to make it reversible. By giving people feedback about what they last action was, and what it did, we are being forgiving, and giving them an opportunity to realize they made a mistake, and why, and go back and fix it. And for this reason it is probably the most important checkbox to have on your usability audit checklist. If a person was surfing and they fall off their surfboard, and they found out exactly why they went wrong, they can't wait to jump back on surfboard, swim back out and have another go. Brain scans of people playing video games show us people enjoy a game even when they loose, or we would have stoped playing them. What drives peoples frustrations that make them through their computer on the wall isn't that they lost, it was that the rules didn't make sense. If someone found surfing hard, and they run off the beach, and throw their surfboard away, it was because they weren't thought how to surf very well. No one explained to them where they went wrong. No one learnt how to surf without falling in the sea a hundred times. It's not failure that upsets people, it's that it wasn't made clear why they failed. If someone clicks something wrong on your website, or they use an interaction incorrectly that is fine, as long as you give them feedback what they just did and why it made the impact it made. Not a single person will intuitively know how to use your web application, and never expect they will. There will always be a learning experience, and the most important thing for learning is feedback. - How you give users feedback, and how accurately they understand the feedback, is how they learn how to use your site. They don't already know how to use your site, they are learning. People love learning as long as it's clear. Summary:- Usability testing, much like user interviews, the more you do the better you get at it. The better you get at it, the better you get what the user is feeling and what they are struggling with. The more people you watch using your application, the more intuitively you will know if their frustrations with the experience is acceptable or beyond acceptable. As the user uses the site, it's great to get them to talk about what they are thinking. This tells us what their mental model for the site it. When we see enough users have an incorrect mental model in the same area, then we know that is an area that could use some improvement. We can reduce the number of issues by sticking with tried and tested standardized interaction patterns. But we need to be careful we aren't making something bland and forgettable. Most designers have abandoned making something obvious in the name of aesthetics. In many ways having a beautiful application, is the height of good experience and most designers have allowed usability to suffer in the name of aesthetic experience. Bizarrely Flat design is often touted as more usable. The aesthetics of usability is not considered more important than usability itself. Once you understand your user you will get better at making the judgement calls. The most important usability technique to unsure users feel in control and keep them happy, is to ensure they get instant feedback on where they are, what they have done, and what effect it had. There is an art to how much or little feedback to give, and the subtleties of the interaction to give them feedback. As one is watching as user, we can perform a usability audit. You should never pay a third party consultant to perform a usability audit on your application, as it is almost never helpful to the customer and is possibly damaging. The points of a usability checklist need to be agreed before the featureal application has been designed, and they should be clear enough that if two people perform the same audit, they get the same results. If not it is a bug in the audit and not the design. --- Section 14: Testing (Exercise): Heuristic Evaluation:- We have a few different ways to test the usability of our design or an existing live site. And first two are going to look incredibly similar. The Usability Audit is a Heuristic Evaluation. One rule of thumb for usability testing is to not use jargony words. The word Heuristic essentially means rule of thumb. There are no absolute rules to design, a heuristic is not a rule, more like a rule of thumb. We can use a heuristic evaluation to get a kind of overview of where there may be is a usability problem. Some common errors in bad heuristics evaluation is there will be a comment box next to a heuristic and someone will say you have to do this, or the website should do this. No where should we be saying a website has to do something or should do something. The heuristics on this worksheet are taken word for word from "10 Usability Heuristics for User Interface Design" from the Nielsen Norman Group site. This list was created by Jacob Nielson back in 1990. The worksheet we have has some changes, like the removal of should or should not for something that is a rule of thumb. The only thing we will be moving on the worksheet will be the sliding scale. A sliding scale is a great way to evaluate a heuristic, because a number is too specific or exact. And a yes or no would be too exact, for something that is a rule of thumb, for something that is slightly vague. The first one we will talk about is 1- Visibility of System Status. This is about instant feedback. If somebody pushed a button, does it instantly depress or maybe even make a sound, or a visual where it appears to be moving into the screen, maybe changes colour, or text on button changes. Some instant feedback we have interacted with the application. But we aren't just interested in visual feedback that the user has interacted with the application, but we are also interested in any visual feedback of changes in system. Maybe a process is in place like a file downloading, and a loading bar to tell us what the percentage downloaded that file is. The system giving us a visual information about the current state of that file download. When the user understands exactly what is happening with system, and with their interactions, they feel more in control. This would be a great experience. The map on Uber is visual feedback of where exactly the taxi is. If we were evaluating an application like Uber Visibility of System Status would be really high. The second is 2- Match between system and real world. The first important thing here is, is the language used like the language that is used in the real world. We don't want to give them any code or jargon. When you do research into your customers you would have found out certain words that they use to describe things, and any of those words that fit into the text on the sites, or application would be great. We also want the way it looks and interacts to feel like the real world. And finally do the functions mirror how it works in the real world? When you buy something on an online store, and you put in a delivery date and address, there is an extra box to say "would you like to give any more information to the delivery driver?". And this is great because when you go into a physical shop and buy something you get asked that. So that field on the form is mimicking the real world, and is matching how that same scenario would work in the real world. Third is 3- User control and Freedom. This is all about if a user can escape their last action? They have realized they have done something wrong, and used the back button a lot, but the back button is not always the most appropriate button. Sometimes you want to go back to a previous state on a page, without refreshing or going to a previous page. If at any point in an interaction somebody wants to reset, go back or undo, is that option available to them easily? This is also really important for experience reasons, it makes them feel less afraid to try different things. You don't want someone to feel scared to push a button because they might not have the option to escape afterwords. Does the user know they can escape anytime? Fourth is 4- Constancy and standards. Standards and conventions is about "does it use existing conventions or standards that exist elsewhere on the internet and also feel like other sites they have used?". Jakobs law says people spend more time on other peoples site, so it should look like other people's websites. As a law we shouldn't agree with it, but as a heuristic or rule of thumb then sure. So does the site work like other sites you have used? This could be identified by is the shopping cart icon a shopping cart icon? Is the attachment icon a paperclip? And also how closely does it follow the standardized design patterns like the ones we might see on a UI design patterns website? And also does it create it's own standards and conventions that it sticks to? Google have 3 different buttons on most apps, a red button for create, green button for share and blue button for submit or do. You might not have been consciously aware of that, but on a subconscious level you see a red button on a google application it's going to let you create something. And you would want to mark a site down, if they had a red button somewhere else that didn't create something. Are they reusing visual channels from that convention for a different convention? Fifth is 5- Error Prevention. This one is about does it stop people from performing different errors? We looked at the WW2 plane that Alfonzo changed the levers around so less people crashed. In planes today they have made it so you can't change the landing gear when the plane is landed. It doesn't allow you to make that error. And if somebody is about to walk into a serious error and we don't want to stop them from being able to do it, we might want to just warn them first, "Are you sure you want to delete all your data?". Some long forms have a reset button on them, though they have disappeared now, and it seems to normally be as obvious as submit button. You don't really want someone being able to click reset, and cancel 20 input fields. We could at the very least make the reset button less obvious, so that when they do reset they have to search around for it, and they don't click on it by default. Sixth is 6- Recognition rather than recall. If at any point we have data or information we can store on screen, so we don't have to store in working memory, are we doing that? And if they store something in their long term memory, can we just give them the information on the screen? Rather then them having to find it in their memory by reigniting all those neural pathways? If somebody is in a specific category on a website, you can make the category in the menu highlighted in some way so that they can recall where they are. All pages, as a heuristic, should have the page name on them somewhere. Seventh is 7- Flexibility and efficiency of use. This is for the users who already know how to use the application well. Are there things we can do for their routine tasks to speed them up? An example of this is Figma with components, and recreating components. Do we have something in place to help advanced users effectively or efficiently speed though routine tasks? Eighth is 8- Aesthetics and minimalist design. From learning about perception, we know that everything has to be interpreted and digested by our working memory. The more stuff on the screen, the more stuff we might potentially filter out. So we want to have the minimal amount of stuff on screen, but this doesn't mean having no colours or no style at all. Sometimes people tend to mark this sections down because the site looks good. Don't get looking good and minimalist mixed up. Something can look bad and minimalist and something can look good and complex. Ninth is 9- Help recognize, diagnose, and recover from errors. Does it tell them about any errors? Are the warning sings clear in english? Can they find the solution easily? Does the error text have a link to the solution? Is the error clear? Tenth is 10- Help and documentation. Is there help available and does the user know where it is? Some applications have a nice onboarding experience when they first arrive, that tells them exactly how to use an application and you can hit skip if you want. We move the sliding scale for the 10 heuristics to right and left for a project we are currently working on. We take a look on the ones with a lower score and see if there are things we can do to improve it. We must remember these are heuristics, rules of thumbs, so you don't necessarily have to fix them for the sake of being good or usable. All of these things are relatively more or less important depending on what exactly it is, who it is for, and how they use it. Links: - https://www.nngroup.com/articles/ten-usability-heuristics/ (10 Usability Heuristics for User Interface Design) Usability Audit:- After completing the Heuristics evaluation, we are now going to do a usability audit. They will look similar but are very different. Heuristics are quick but vague. Audit is precise, and are the rules to your design. There are no rules to design, but your specific application has rules that you create. Flights are so safe now, and one of the reasons is that all flights have a checklist before they take off. A pilot has to tick through a checklist of items before they can take off the plane. It's the smartest people who make the stupidest decisions. They are not using focused thinking, they are in default mode. Creating this checklist will take a long time. But every time your company releases a new version of the design, every time there is an update, someone can run through the checklist quickly and ensure you haven't missed something which you have decided earlier is vitally important. Sometimes people pay consultants a lot of money to complete one of these checklists, and they might even call it an expert review. How are they an expert? You are creating something completely new. An application that has never been created before, for a new group of people to solve a new problem. No one else is an expert to give you an evaluation or review on that application. But also it suggests a certain level of skill is required to fill out one of these audits. This audit should be so simple that when given to two children, they will come back with the exact same answers for yes and no. If they come back with different answers, the audit needs to be updated to have more specific rules. Unfortunately, similar to how you created your design process, you are going to have to do most of the work on your own. It won't be great at first, but as you practice designing more, you are going to improve the rules you make around your design, and can probably reuse a lot from between one project or another. We will though look at some examples. "Heuristic Evaluation - A System Checklist" by WebCriteria from 2002 is one. It is recommended starting with just 3 in each section. For each of the 10 heuristics we are going to create specific rules, The first one is about do we get visual information to give us feedback for our own actions and any system actions? We could specifically say all feedback is given to user within 500 milliseconds. It is very unlikely the person doing the audit is going to time that, but they will have a good idea if the feedback is over 500ms after action. This means if auditor clicks download button on page, then the page gives them no feedback for 2 sec, they know it has failed this task, and so we check no. Looking at comments from WebCriteria's Audit, some have abused the comment section to put opinions in there. But the comment section can be useful because someone might want to say the exact page or situation where problem occurs to help others. Another example of something you might make a serious rule about, might be colour contrast checker. Some say on the audit or feedback that the contrast is too low when it is fine, they just haven't used on of the checkers. https://contrastchecker.com/ to select foreground and background colour and see how many criteria it passes. For our audit we might have a rule saying all colours must pass the contrastchecker.com check. We might say ratio score must be over a certain number. The sooner you start creating an audit, the sooner you can use it in a project, and the sooner you stop getting some issues coming up. In consistency audit for google, we might say all create buttons are red. And if at any point an auditor finds something using red that is not a create button of some kind then it is marked as no on audit. The most important thing when creating an audit is that it is idiot proof. Everyones answer should be the same. Links: - see "Heuristic Evaluation - A System Checklist" "Web Criteria".pdf (from course resources) Usability Testing:- An important subject. An activity done single every week. Jared M. Spool recommends that in every single 6 week period everybody should spend 2h observing a user. Steve Krug (Don't make..) said something very similar, that everybody in the company should be watching users try and use their software, the engineers, the managers, everybody. It can be a humbling experience. If you spend all the time in your office coding, you will never see that your assumptions are wrong. We talked earlier about the importance of challenging your assumptions and this is the best way of doing that. As you design and build software you are going to say "I know how people think, this is definitely how people will use the software", and the second you start doing usability testing, the second you realize you have no idea how people think. As Steve Krug says thinking you know how people think is doubly dangerous because it shows that you think people think the same. If you observe 5 people use your software, you will observe all 5 people use it slightly differently, and this is okay because nobody learns how to use your software, we don't optimize we satisfice. We learn how to do what we need to do, and we lean how to do it in different ways. People don't hate learning how to do something, unless there is a problem with the learning experience. If someone falls off a surfboard, it is perfectly natural, it doesn't mean they hate surfing, as long as they understand why they fell off and paddle back out. What we are looking for is how people respond when making mistakes, and how they feel. And we are not asking people when we do usability testing. We are not asking people "Do you like it?", they are guaranteed to tell us, they are desperate to tell us if they like it or not, and recommend different ways of doing the same solution, but we can't listen too much. It's useful to know if they like or don't like the product, but as soon as they start explaining why, they are post rationalizing, and as soon as they start telling us why, they are telling us what is easy and not what is important. Once they start suggesting different solutions, and saying "I don't like how this works, this is how it should work", they are trying to figure out a solution that would work in a hypothetical future situation. Nobody knows how they will behave in future, and we know people are very bad at guessing this. Our users can't predict how they would use software if it worked differently. So when a user starts telling us why they don't like a software, this isn't useful information to us, we need to observe how they are liking it. Jared M. Spool completely dismissed the idea of testing with 5 to 8 users. An idea that originated in 1990 by Bob Virzi, and copied by Jakob Nielsen in 1993 without looking into it too deeply. To test with 5 people is a bad piece of advice, because it makes people think of design as a science. It is trying to make people think in a precise regimented king of way and that is not even how scientists think. Jared M. Spool says usability testing is really about us understanding them better. The more time we spend observing them the better. The correct number of usability tests you can do, is as many as you can fit in. Usability Testing is observing somebody using a software, giving them a specific task, and basically watching them and seeing what you learn. There is some debate about how well this person should know the software or know you or how close to the real user they are. Ultimately it should be someone who would be using the software in the exact context that it would be used, who hasn't yet seen the software. But that is not always possible. One thing to remember is those testers who would be testing daily with Apple employees or dog fooding, might not have got the absolute best information or insights they could have got, but they were practicing this every single day, and observing people using the software is quite difficult. You need to look at the micro-responses in their face and how they are feeling and what they are thinking. Also you as an interviewers or facilitator needs to be as impartial as possible. Everything you do and say needs to not affect their output. Some people write the tasks on cards, and as the user completes one task, they can hand them the next card, and they don't have to say a single word to the person. And this is because the more report or connection you build with the person, the more they will want to please you or you to please them. And that is going to massively change how they react, and what they say, and how they use the software. We want to minimize those effects. You are never going to get a real accurate case of how someone would use it in the real world, because someone is watching them, sometimes holding a notepad and pencil. And a lot of people record these sessions, but that can't be very useful. Ideally you will learn from a few of these lessons, iterate on your design, and like Apple the design is going to be different the next day. So that video is no use to you. That was someone using an old version of software. If you do a 30 minute usability test, it's going to take you 30 minutes to watch the usability test back. You could spend that 30 minutes just doing another usability test, and gain more insight. We often overlook the power of intuition. The more input you get from observing people, the more the subconscious brain can analyze it all itself, and make your intuition slightly stronger. And is another great reason why it is useful for programmers, and managers and anyone not involved in design to every 6 weeks spend some time observing some users. One thing that is true for all usability testers is they believe the person you are testing should be unfamiliar with the software. An example of why this is incorrect is you could be using something like Trello for years, every day for all kinds of reasons, it is a project management sort of board that uses Kanban, a technique developed by Toyota, kanban is the Japanese word for card, and we use it because Japanese words sound cooler, but we also use it to reference this is a kanban board as it makes it more obvious what it is, you could have been using Trello for years, for professional projects, personal projects, personal life, for all kinds of things, and there might be many things you don't know how to do on it. There is an icon that says create from template, and you might have no idea what that means, and if you were doing usability testing with a person that just so happens to have used Trello for years, but never used create from template, you give them a task, your next task is to create a column from template, the user who happens to have no idea what that is, would click on it with no clue what is going to happen, you could get it exactly right, and it could be the exact thing you the tester thought user was going to do, but whether they do it correctly or not is not important. The fact that the user looks uncomfortable and clicks on it reluctantly is the information they want to take away from that. Another task example might be deleting a trello card, and suppose the user happens to have no idea how to do that, they might click on the card, and look for a button that says delete or is close to it, and click on archive while thinking "is this the same thing? Does it go to another board somewhere where you can retrieve it?", clicking in it makes a delete button option appear, at this point they don't know where the card is or if it can be retrieved, but as a usability tester from trello, is this something that would bother you or you pay much notice to?, the person being tested might not be much bothered by it, once it was archived it was gone from board and user was happy with just that. It didn't stop the user from using the software all these years, and the tester knows this is a reasonably happy customer, in spite of possible uncomfortableness in the task displayed by user. A lot of people believe you shouldn't do testing with existing users, because they still use the software anyway, and are too familiar to get good insight, - but this is could possibly be wrong because people keep doing usability testing with people who have never used a software before and the entire design of site is skewed to help people on their first visit and distract and annoy people on all future visits. If people just do usability testing with people who have never seen the site before suddenly everything has labels and popups and question marks on stuff thats useful to people precisely one time when they first use software. You might want to check with your sales or finance team, but most companies believe existing customers are considerably more valuable than new customers. Possibly 10x more valuable. We don't want to be just designing for that customer for the first time they use an application, we want to be designing for people who use it everyday. When you first buy a car there is a period of trial and error, where you find out which does the indicator and which does the lights, but it doesn't stop your long term effect of how much you love or hate your car. It affects a very small amount, and we don't want to interrupt the other part of experience. No one loves their car because its easy to use, and no one remembers how hard it was to use it. And for that reason, it is worth observing at least so people who are regular users of the software. As user uses it, you want to know their mental model of software is, as they use it you want to know what they think will happen as they click on things. When doing a usability test, it's really good to get the user to do that. They might click on the exact correct thing, but they might not understand why or what it's done. And we don't really feel good about being unsure of things. From this we can get a good picture of their mental model, some document this and put it in a fancy looking chart, but your better off doing more tests, iterating and testing again. If you have your prototype built in Figma, its not the exact right software, but you should be able to iterate on the design and create something slightly different so quickly that you could do usability testing with a completely different set of users the very next day and see if any hypothesizes made from your current tests are actually true. Although it is said you cant test with wireframe, because lots of things will change once you have real content and colours in there, there is also the fact that the sooner you start testing, the sooner you start seeing how people respond, the better. You don't want to completely finish the design before you test, but you also do want to test before you have a complete design. Do not take everything said in the course as gospel, and don't take everything everyone else says as gospel, teak it and do it in slightly different ways and see what you learn. If you do usability testing every day for a year you are going to be very good at it. And the kinds of insights and way you do it will get better. The more you do it, the better you will get at it. Even if you don't have product of your own, use another person's product. Even a really successful product like youtube is used incorrectly by most people and thats ok. This is one of the most useful techniques, you and possibly everyone on your team can be doing. Links: - https://articles.uie.com/user_exposure_hours/ (Fast Path to a Great UX – Increased Exposure Hours) - https://jmspool.medium.com/a-fundamental-mind-shift-for-usability-testing-ffae207b96a8 (A Fundamental Mind Shift For Usability Testing) Click Testing:- So far most of our tests have been qualitative. And from time to time you will need to get quantitative data to do some quantitative testing. Usabilityhub.com is one such site, and they have a product called 5 sec test, a click test. There are other sites that offer this too. And if you have a large development team you can create something in house to not have to pay fees. On site they have many examples of the service they provide to testers. Choosing one shows us the view a tester would see. UsabilityHub finds maybe 50 people to do a test before showing you the results. When you take a test, it describes the task at top, like planning a train ride but you find out its cancelled and you want a refund, there is a mobile screen below, and clicking on "click to view interface", starts the test timer and test to see how long it takes you to complete a task. Once the test starts you will see its not a finalized design, it might be a low fidelity wireframe. Scrolling down the app page you might see many options. You might click on hamburger menu, you see many options, you see customer service option and click it, and it ends the test. Now you can see all the data of people who have taken the test. Usability hub had 50 people take the test, and you can see the actual data yourself. There are filters to filter things like data by country, gender, age range, education level, income, etc. You can see the exact place they clicked on screen, and 26% of people clicked hamburger menu, and 74% clicked elsewhere. The exact place being clicking on hamburger menu and then "tickets". 38% of people clicked the right place. This shows an incredibly small number of people clicked on right place. The application tells us exactly where they clicked and who the testers were, which is good, but it's data and we are not data analysts. And you want to avoid thinking you are a data analyst. You want to think of data like how a doctor thinks of a thermometer. It could tell you something is wrong and that is all. If you regularly put some of your app or site scenarios into this test, and some of them have very low scores, then that just tells you to look into it more. It's like a thermometer telling you that you have a high temperature. We don't actually know how to fix it. And this represents the big problems about the click test, is that we don't know why people clicked in wrong place. It doesn't tell us much. As we also know from the module on experience, we don't even know if it is a problem. We don't know how the people who clicked in all these places were feeling. Maybe the 26% who clicked in the right place were confused. We are just not sure, we can't answer any of these questions with this information. In this instance anyway we can't be sure quantitative testing is that useful. But a lot of people use this product and it can be useful, if you want to test the difference between 5 different wireframes and slightly different things in different palaces and purely get data, get number of people who clicked in right place. --- Section 16: Form Follows Function: Introduction:- We know that we naturally like environments that we understand. We like to be in environments that our perception can make sense of. We objectively feel more comfortable in environments that feel natural to us, we are drawn towards them. Humans find sterile, unnatural or un-humanistic environments repulsive. They even shorten our lives. We have a basic human need to be in a natural environment. A lot of UX or product design courses, books, speakers advocate looking at beautiful websites and then turning noses up. Aside from being arrogant, this shows a ridiculously narrow understanding of design, and shows just how immature a disciple digital product design still is. Some people feel that the aesthetics of an application or the form, the look and feel are subjective. That it is subjective if it looks good or not. What is ironic about this, is that of all the things talked about in this course, it is the only area that isn't subjective. It is the only are we can measure. And the results might surprise you. The other thing we can measure is that it is the only valuable part of your design. It it doesn't look good people will be repulsed and they are perceptive. Filters will be searching for why they hate your product. People find their products more usable if they think it looks good. Form vs Function:- Steve Jobs said "Most people make the mistake of thinking design is what it looks like. People think it's this veneer - that the designers are handed this box and told, "Make it look good!" Thats not what we think design is. It's not just what it looks like, and feels like. Design is how it works." From now on we are going to refer to how it works, as being function, and this veneer of making it look good, as being form. And what Steve said here highlights a conflict at the center of every decision a designer makes. What is particularly important about this quote, is that it could have just as easily been said by Henry Cole in the 1840s. Henry Close said "Design has a twofold relation, having in first place, a strict reference to utility in the thing designed, and secondarily, to the beautifying or ornamenting that utility. The word design, however with the many has become identified rather with its secondary than it's whole signification. - with ornament, as apart from, and often opposed to, utility. From thus confounding that which is in itself but an addition, with which is essential, has arisen many of those great errors in taste which are observable in the works of modern designers.". In short he, what he is saying is people are getting obsessive with making something look pretty, and adding ornamentation, that it's drawing away from it working well. This was said over a decade before Michael Sonnet's No. 14 chair. A designer is still very much a craftsperson, but now they have more mechanical tools at hand to start trying to mass produce things. And when the market became flooded with these ugly, high Victorian era, overly ornamented designs, that disgusted Henry Cole so much. The beginnings of mass production brought lower quality products with them. Mass distribution meant that people didn't even know who you were that were buying your products. And both of these things led to people making much cheaper shoddier products then they had in the past. Often Ornamenting was using to cover up what a poor product was underneath. And as will soon learn, minimalistic design is hard, very excessive design is easy. You just put flowers and colours everywhere. Minimalists need to really consider every single mark on page or on mug or on clock to make sure it looks perfect. The high Victorian era early designers simply don't have things to inspire them yet. They didn't already have products that worked for them to copy or be inspired by. And they didn't have products that already looked good for them to be inspired by. The great exhibition in Crystal Palace, South London, brought inspiration from all over the world and allowed these new designers to see what they could possibly be creating. It brought them inspiration and it also brought them motivation, because it turns out British products were pretty shoddy. Nothing is more motivating to a British man than seeing a french person better than them. Henry Coal had a passion for drawing and painting. He is famous for being the first person ever to create and send a Christmas card. So similar to how Steve Jobs had studied Calligraphy and Typography, Henry Coal also had a very visual and creative background. He also made it his personal mission to design and change the way we think about designing. The difference between the two characters come from Steve making a private company, like most today, whereas Henry Cole went changing how we publically think about design. Henry Cole, amongst other things, worked with Prince Albert and Queen Victoria, to create the Royal College of Arts, and the Victoria and Albert Museum, where still in the archives, you can see some of his work today, including a tea set, which you may notice in contrast with other tea sets from high Victorian Era, had very minimalist, simple, beautiful features. Henry Cole solved the problem of many overly ornate, ugly, design by educating people about design. By creating museums and colleges where people learn from artists how to make things more visually appealing. A large number of designers solve the issue of overly ornate, ugly design by simply saying it doesn't matter how it looks, let's just think about functionality. And we will look at why that is a mistake. All cultures, communities, professions and societies have contradictions at the core of their beliefs. And those are the things we will always argue about the most. The most modern Western liberal democracies believe in equality and believe in freedom. And those two things massively contradict each other on most issues. Designers believe in importance of form, and importance of functionality. And those two things will always come up as conflict in all design. To just ignore one and say it is not important is a mistake. They are both equally and vitally important to make a good design. Humans require the products they interact with to be both functional and beautiful. Links: - https://www.toptal.com/designers/creative-direction/art-vs-design (Art vs Design – A Timeless Debate) - https://usabilitypost.com/2010/03/24/value-of-good-design/ (The Value of Good Design) The New Art:- The Exhibition in London in 1940s brought products from all over the world, so that our designers and craftspeople, could be inspired by all these new and varied products. Amongst them was new fascinating products from the USA Most of the groundswork for mass produced design and production had been done in the USA. Back in the American Civil War, huge quantities of guns were produced, at the Whitney Will Armory and later at Colt's armoury. The complex parts were made to a very specific set of specifications, so that if one part wasn't made particularly accurately, it could be swapped with the same part of another gun. Being able to factory produce guns made the American civil war very bloody. But perhaps the ingenuity behind it helps explain why people in the USA today, still love their guns. What we want to talk about is how did ornate flowery patterns end up on the handle of a weapon of war that was pass produced in a factory in the USA or even on the Singer sowing machine, that would probably never leave the house and be seen by other people, except at the great exhibition. These ornate flowery patterns, may have been added to cover up shoddy workmanship from time to time. No disrespect to Cornel Colt, but let's not forget the reason he started selling guns to the general public is because most of them were refused by the American military, because of shoddy standards. Henry Cole must have looked at these ornate flowery patterns and said these are ugly we must get rid of them. But other people looked and said "why is it other people want to buy something more because it has flowers on it than something that doesn't.". William Morris, a British textile designer, believed we had a deep down necessity for the things around us to be either natural or humanistic. These flowery patterns may be ugly to us now, but we weren't very sophisticated at designing yet. All we knew is that people hated machines and cold sterile environments. So as soon as we started mass producing, we started mass producing decoration. William Morris was one of the founding members of the Arts and Crafts Movement. The Arts and Crafts Movement believed the devision of labor between the creator and designer had created jobs that people hate, which created items that people hate. The arts and crafts movement went about creating new products which only used minimal factory processes. The cost of factory produced items started to come down, making it almost impossible for people to justify buying these items from William Morris. Even today, even if the aesthetics are no different, we like to know a human is involved. And when we see a product, we want to feel like a human or nature made it. Before long we started to creating factory processes that make our products appear more natural or human created. Art Nouveau or New Art was the first big design movement. Art Nouveau took many forms all around the world, but it normally had sweeping flowing motions, sometimes things like branches, lot of natural colours, and generally things that made people feel more at ease or comfortable like they were in a real world environment. It was one of the elements that led toward the Art Deco movement, that exploded in the USA in the start of 20th century. Looking at the Chrysler Building, you will see some natural forms, when you look up close, some much more simple forms of sun bursts, and floral looking patterns, but much much more simple and clean, than some of the other art nouveau elements. As soon as we started creating products with machines, we started creating ways to make them look more human or natural. It turns out we were taping into an important emotional human need, to be surrounded by and interact with things that were real. Links: - https://www.theguardian.com/science/blog/2015/aug/28/how-the-great-exhibition-of-1851-still-influences-science-today (How the Great Exhibition of 1851 still influences science today) Form Follows Function:- Louis Sullivan is often called the father of skyscrapers, but is also called the father of modernism. In the late 20th century, the USA not only had a booming economy, but new stronger steel. Which would allow us to build much stronger buildings, and throughout Chicago and New York, Louis Sullivan was working as an architect. He believed in an ancient Roman saying form forever follows function. What this means is if the function of the building is for banking, then the building has to look like a bank. But Louis Skyscrapers had multiple purposes. These new buildings had multiple floors and therefore multiple functions on different floors. The Prudential Building in New York, also called The Guaranty Building, has three distinctive layers, for three different functions. The lower few floors are a commercial area, a shop, floors in middle are offices, and very top floor with some circles, are where the functional parts of building are hidden away. And from a distance away we can instantly see this is a shop at bottom and offices further up the building. In the 20th century, people massively misinterpreted what Louis Sullivan meant. If we take a closer look at building, we can see it has incredibly intricate and detailed ornate features. These new buildings came at a vital time in the history of the USA. They were trying to shake off their colonial past, and come across as having a cool new image. If you were to walk around New York or Chicago today, you wouldn't give a second thought to the British, French or Dutch, who previously ruled in these area. Louis Sullivan's buildings, and the Art Deco buildings that followed gave New York and Chicago a new identity, and filled a very important emotional need, as well as the functional needs of the buildings. By the mid 20th century, some modern architects believed that function was in some way more important than form, and went about trying to create purely functional buildings. Sometimes this was purely economical. When former Czechoslovakia needed to rebuild, they quickly threw up lots of Panel buildings. But sometimes these purely functional buildings were a result of a new problem we have throughout design in 20th century, arrogance. The Bijlmermeer project just outside Amsterdam, was incredibly expensive. The architects believed they were going to change the way we think about how we live. They threw out the rulebooks, and it very quickly became a slum. The true irony of these purely functional designs is they were incredibly un-functional. Flat roofs are hard to maintain, pillars hold much less weight than arches, and sometimes people would have a hard time remembering which building they lived in. But even if people were visiting, they couldn't even find the entrances. Some some reason, time and time again, people just put the blinkers on and think about functionality. The last thing they actually create is functional. The only advantage of these purely functional buildings, is they were cheap. And in the long run it turned out to not be an advantage at all, because we cannot wait to demolish them. And having one of these ugly buildings down the street, will lower the value of your house. There is plenty of evidence to suggest it may even increase crime, lower life expectancy, and all kinds of unexplainable psychological damage. Throwing out the rulebook, and creating purely functional design, proved to be a huge mistake. But history has a tendency to repeat itself. Louis Sullivan was the first modern architect, he believed in the term form forever follows function. Some designer have misinterpreted Louis to think that perhaps the function of the building is in some way more important than the form. This is absolutely not what he meant. If anything, he was merely saying it should look like the thing it does. Louis didn't even believe we should copy Roman or Greek architecture. He thought we should be inspired by nature. In fact, he is famous for using simple natural ornamentation, that later inspired the Art Deco movement. Louis also famously said, there has never been a complete architect. Men sought to express themselves entirely through their heads or through their hearts, meaning they either think purely about the function, the logical part of the building, or the emotion, the ornamentation of the building. Architecture, like all forms of design, require for us to use both the head and the heart. Links: - https://www.architecture.org/learn/resources/architecture-dictionary/entry/louis-sullivan/ (LOUIS SULLIVAN) - https://www.nytimes.com/2009/06/01/arts/01iht-DESIGN1.html (The Demise of ‘Form Follows Function’) Flat vs Skeuomorphic:- The majority of the designers throughout the 20th century have lived by the form follows function rule that you should have it look like the thing it does. Some designers have made the mistake of thinking it is not important if it looks nice, but most have agreed it is important that the thing looks like what it does. Unfortunately this got increasingly more and more difficult up the point were we invented the smart phone. A tiny thing that fits in your pocket that does a 100K things. How do you make that look like what it does? In the early days of the iPhone to help us transition into this new way of working and thinking, Apple took this very literally and created Skeuomorphic design. Which we can think of as make it look like what it does. Some designers were outraged, all these extra gradients and shades make it look more complicated and ugly. There are so many extra shapes and shades that we need to look at, and perhaps it forgets that one of the advantages of using a digital product is it is easier to look at and interpret than things in the real world. In time Microsoft came out with the exact opposite thing, Flat design. There are no rounded edges, shades, gradients, drop shadows, or anything at all. A button is a square of colour. This is often seen as an improvement. But let us not forget about those dull, ugly, hard to use mid-century modernist tower blocks in Czechoslovakia, that we cannot wait to demolish. You might be incredibly surprised by talking to people about flat design as this new Microsoft style. People seem to believe that flat design is more functional, whereas the skeuomorphic 3D design is more pretty In actual fact both of those comments are wrong. As recently as Dec 2017, the Nielsen Norman Group did some testing, into flat buttons and 3D buttons, and found that people were likely to actually miss flat buttons altogether. It is often believed that over time, our ability to identify flat shapes as buttons on a screen, will improve, but this shows an incredible lack in understanding of human perception. You have already learned all about how perception works. You know that skeuomorphic design uses more visual channels than flat design. But also uses preventive visual channels, something that is never going to make flat design more usable. Not without a significant amount of human evolution. Flat design is not more functional, similar to those midcentury modernist tower blocks. It has the appearance of being more functional but is actually less functional over all. The real reason for the success of these flat design elements is actually because they look more pleasant to us. Google with Almost Flat design tries to solve both of these problems. It has incredibly subtle gradients and incredibly subtle drop shadows. So you can still identify it as a button out of the corner of our eye without all the visual noise that the original Apple designs had. Skeuomorphic design is a perfect example of Louis Sullivan's thoughts that form should forever follow function. Flat design is a perfect example of something that is crisp and clean in the name of aesthetics. Unfortunately that aesthetic is normally trying to make it look more usable. For some reason, some people think flat design is easier to use. If we wanted to take Louis Sullivan's advice and use our heads, and our hearts, we would probably go for something in between, like Google's almost flat design. Recently even Google has started sacrificing usability, taking off the drop shadows, the gradients, the rounded corners, so a button is just a square. For reasons we are going to look at next, form has a strange way of forever winning out against function. We all seem to prefer beauty to functionality for strange reasons. Links: - https://www.nngroup.com/articles/flat-ui-less-attention-cause-uncertainty/ (Flat UI Elements Attract Less Attention and Cause Uncertainty) (Flat interfaces often use weak signifiers. In an eye-tracking experiment comparing different kinds of click-ability clues, UIs with weak signifiers required more user effort than strong ones.) - https://www.nngroup.com/videos/skeuomorphic-design-tog/ (Skeuomorphic Design: Don' t Apply It Blindly (Bruce Tognazzini)) (Summary: When using skeuomorphic design, apply aspects of the real-world counterpart that are useful, and leave out the drawbacks.) Power of Form:- This section recommends two scientific papers, you can read them or take the words given as is. First one is by Claudia Townsend and Suzanne B. Shu. It's called "When and how aesthetics influences financial decisions". Through their experiments they found that people value things that look better. We kind of know this already, but even people who are investors, their entire job, their whole livelihood, is based on their ability to assign a value to a product. They will change their valuation for a company dramatically just because their presentation looks better. If you run your own business, make sure your slides look good. For most of us this isn't too much of a surprise. We wear a suit to a job interview for a reason, because we always want to present ourselves looking our best. We want everyone to know we take great care in everything we do. But what might come as a surprise, is that people find things easier to use just because they look good. Our perception of the functionality, is effected by the form itself. And as our perception is changed, our visual filters are looking for things that prove us right. We are looking for reasons that we like it. If we are trying to find reasons we like it, it's guaranteed we will find them. We are very good at proving ourselves right. The next recommended paper is by Katharina Reinecke. She identified that not only do our first impressions count, but we make those first impressions in less than a third of a second. That means that if you look at a web application, you know if you like it or not, before you even know what it is. If we don't like how it looks in that 1/3rd of a second, it really doesn't matter how useful the application is. We have already decided. If an application looks great, there would have to be something very wrong with the functionality, to change our minds. One belief is the first impression sticks so well, because for us to change our first impression, we would have to admit that maybe we were wrong, which is something we are not very good at. So the functionality would have be really really bad for us to change our minds. So what makes us decide if something is good or not? This research is very conclusive and it turns out some of it depends on where you live, what gender you are, what your education level is. Katharina created the website labinthewild.org, a little dated looking now, but she realized that the subjects of most psychological studies were all based in the same geographic location, normally California, were the same sort of age, normally students, and that is not too much use to us if we want to learn about human perception and how we use websites, because humans aren't all students in California. Each experiment on this site is translated to multiple different languages and recruiting people from all over the world. It turns out we are all a little bit different, but some things are the same. Those visual channels, the attributes about our design that are most important to all of us are the same the world over. By far the most important aesthetic atributes of your design is how visually complex it is. And second place is how complicated or how large the colour palette is. And third place is so far down, your better off just focusing on first two. The degree between slightly different countries can be slightly important. Malaysian's like things to be more comfortable. Finland likes less visual complexity in their designs. People who are educated higher like less colours. Before we dig into the complexity of different cultures opinions, it is worth noting that almost every web application is too visually complex and too colourful. If all you care about is how aesthetic it looks, the best thing you can do is to get it as close as possible to looking like a plain white sheet of paper. You already know this because that is how you painted the walls in your lounge. There are regular conversations who say no it doesn't matter how it looks, just look at google, they are successful. Google is one of the best examples possible of the two things we just talked about. It's not very visually complex, and it doesn't have a complicated colour palette. Google spends billions on their designs, and they are not going to miss out on a trick like making sure it looks good. You can compare their past, current and future planned designs. You can see the huge effort they put into removing colours and visual complexity from all their designs. Another example people use is Craigslist, which is still very ugly and still very popular. Craigslist is very ugly but it also has a network monopoly. You can make your application as ugly as Craigslist, as long as you also have a time machine. You need to go back in time, recruit the whole network to your site, and then people won't be able to abandon it. There are plenty of examples in design where we sacrifice aesthetics for other reasons, posters or magazine covers or adverts. All of these sacrifice aesthetics to make it more eye-catching. Otherwise no body ever even sees them. And increasingly with digital design, we need to wake people up, we need to switch on their mode 2 thinking, their central executive network. So sometimes we need to create a certain amount of disfluency, to make sure we are activating our users brains. People decide if their like your application, within a 1/3 of a second. They don't even know it's an application yet. That is how instantaneous it is. And they are almost definitely not going to change their mind, unless something very serious happens. They have already created a perception of how useful your application is, how valuable you are, and also how trustworthy you are, within a third of a second. What looks good is different for different people. But as a general rule of thumb, your application is too visually complicated and too colourful. Links: - https://www.nngroup.com/articles/aesthetic-usability-effect/ (The Aesthetic-Usability Effect) (Users are more tolerant of minor usability issues when they find an interface visually appealing. This aesthetic-usability effect can mask UI problems and can prevent issue discovery during usability testing. Identify instances of the aesthetic-usability effect in your user research by watching what your users do, as well as listening to what they say.) - https://www.sciencedirect.com/science/article/abs/pii/S1057740810000677 (When and how aesthetics influences financial decisions) - https://dash.harvard.edu/bitstream/handle/1/12561368/Predicting%20Users%20First%20Impressions.pdf?sequence=1 (Predicting users' first impressions of website aesthetics with a quantification of perceived visual complexity and colourfulness) - https://jnd.org/emotion_design_attractive_things_work_better/ (Emotion & Design: Attractive things work better) Ugly Aesthetic:- In the last video, we were talking about how some websites are ugly, but somehow still get away with it. Here we will talk about how some are intentionally ugly. HackerNews is Y Combinators open forum, and it is pretty ugly. The colours don't go well together, and not a lot of space around it. The text is all crammed together. It is definitely an ugly site, but still a lot of people use it. So what is going on here? Many years ago I was working for a big high tech company, and I was helping create or design some internal tools, that all the high tech people would be using. And one of the observations I made when going around interviewing staff and seeing how they interacted with software and did their jobs, was that these were all people who prided themselves on how intelligent they were, and how capable they were of doing difficult things. For these people easy to use software, was kind of insulting. Almost all had post grad degrees from oxford, in maths or science or computer science. They all enjoyed picking up something that appeared to be difficult and figuring it out. This is something you want to be very aware of. You are going to be working very day with very technical people, and the only way to really get inside their heads and understand them, is if you yourself learn a programming language. If you were to learn a programming language, one of the things you will notice is people using very complicated sounding terms to explain incredibly simple concepts. And this puts a lot of people off learning to program, because there is a lot of macho developers who love saying complicated terms to make it sound like they are doing something which is actually quite simple. They can argue for hours about which is the best language and why, and there isn't much in it. They are trying to make their job complicated. Now, if you take the point, that there is a large amount of intelligent people who love the fact that their job appears complicated on outside, and can be complicated on inside, then you might understand why the aesthetic of hacker news, appeals very much to tech startups. And when I did develop those internal tools for that high tech company, I left it looking kind of ugly. I made sure it looked a little bit complicated. Everyone got angry when I made it easy to use. They all took a lot of pride in making it sound and look very hard what they were doing. Even if sometimes it came with the detriment of their own understanding. I used to work with a developer who would only read facebook through the cal command. He would open up the terminal on his computer and he would access his facebook posts that way. It didn't make the facebook experience any better, he just liked being nerdy, he liked tweaking things, he enjoyed complexity. Making your site look good is very important, but some of it can be a little subjective, according to your audience. If you were developing something for a high tech audience, you might want to make it a little complicated, or at least look a little complicated. They take a lot of pride in understanding how to use hard things. Making something always slightly pleasing is always in the eye of the beholder. Different people like different things in slightly different ways. One audience you are always going to have is developers, because you are working with them. They are always going to want to argue, surely users can understand how to do this. Surely everyone is as smart as me. And they will probably want any tool they use to look a little difficult. Links: - https://thenextweb.com/news/why-are-some-of-the-ugliest-sites-on-the-web-also-the-most-popular (Why are some of the ugliest sites on the Web also the most popular?) - https://www.independent.co.uk/life-style/gadgets-and-tech/web-designers-are-making-sites-intentionally-ugly-and-unusable-a7020736.html (WEB DESIGNERS ARE MAKING SITES INTENTIONALLY UGLY AND UNUSABLE) Art Into Industry:- No module about form in design, would be complete without the mention of Walter Gropius, and the Bauhaus School of Art, Design and Architecture in Germany. During the first World War, Walter's entire unit was wiped out, he was severely injured and left lying under some rubble. And it was during this traumatic period that he realized, the old stuff is out. Everything must change. After the first World War, Germany, Russia and other parts of Eastern Europe believed in revolution. Political revolution, social revolution and along with it an aesthetic design revolution. The new world that emerged did not want to sit on chairs that looked like the Czar of Russia would sit on. They did not want to live in rooms that looked like the Kaiser's room. They did not want to own products that looked like what a king would own. The new middle class demanded a new world to live in. Classical art, architecture and crafts use a series of simple rules. One of those is the Fibonacci sequence, or sometimes called the Golden Spiral. The Fibonacci Sequence 0, 1, 1, 2, 3, 5, 8, ..., if we draw the boxes, we can put a spiral around, and this is a spiral we can find in nature. We already know that people demand the objects they surround themselves with, and interact with to look humanistic and natural. And we actually know this exact ratio, is the easiest ratio to perceive. Shapes that use this ratio, are less effort for us to perceive, and so we consider them beautiful. If you use your favourite search engine, and look for the golden ratio, you will see how this ratio is used to create all kinds of designs and logos of all your favourite brands. But this was part of the old stuff, this was out. Another technique used by classic artists and craftspeople is the colour wheel. We can identify various contrasting colour combinations, the simplest is if you look at one colour, and look at the colour directly opposite in the wheel, we have a nice contrasting colour. These are the colours we believe looks nice together. And that is why you always take photos of sunsets. It gets that nice orange and nice blue right next together in your picture. Or to put it in a more scientific way, the blue uses different cones and rods in our eyes to the orange. So it means they all get an equal break or an equal bit of relaxation at the same time. It's easier for us to perceive, and we consider it beautiful. Looking at a random classical painting, and putting the golden spiral over it, we can see how the composition fits almost exactly. We can also see how maybe they are wearing a light red colour in front of a light blue background, or one of characters is wearing a blue shawl, and we know that those two colours fit into contrasting colour combinations. This painting has no place in new Germany, it is too visually complex, but also the colour combinations and composition reminds us of the old world. Walter Gropius set up the Bauhaus School of Art and Design, and encouraged students to learn about different forms of art. They would paint some days and dance other days. He also insisted on removing the hierarchy between teachers and students, and for everybody to feel like they were learning from each other. One of the artists employed by the Bauhaus school, was the Russian artist Wassily Kandinsky, famous for creating abstract artworks. Creating work like this was vitally important in the school of Bauhaus, because by trying out different colours and mark making on a page, we can find new forms, new compositions and new colour combinations, that we believe look good, without relying on classic techniques. During the time the Bauhaus school existed, it created some pretty funny looking, uncomfortable pieces of furniture, but it encouraged a whole new world of exploration, and inspired every design curriculum in the world since. Since throwing out the rule book has always been a mistake, you can't say how effective this building is, but you notice the door is red so you can find it. But Walter thought us not just how important form is in making it visually appealing, but how our cultural identity is built around the way things around us look. Simple things like contrasting colours, or the composition of a piece of design, can make us hate it or love it. We have to make sure when we are designing things, we understand the visual world that the consumers who use it live in. It's really great for us to understand natural forms like Louis Sullivan did, but in todays modern times, our users exist in completely different cultures, completely different visual, interactive and virtual worlds. Our users natural environment have evolved differently around them. - Jakob Nielsen's advice that people spend more time on other people's websites so make it look like their is great, but you need to know the websites where your users are spending their time, and what look like. Katharina Reinecke research told us, not only how massively important form and aesthetics are to our users, she also thought us how much variation there is. She thought us how much variation there is in people's age, background, education level, gender, which makes a huge difference in how visually complex and how colourful as well as which colours they are going to like their environments to be. If we don't understand the visual and interactive world that our users live in, we cannot design for them. This is their new nature. Links: - https://www.nationalgeographic.co.uk/history-and-civilisation/2019/10/why-bauhaus-such-big-deal-design (Why is Bauhaus such a big deal in design?) Summary:- Back when design first became a career, back in the times of Industrial revolution and mass production. We instantly remembered our human need for these new items to appear natural or humanistic in some way. We covered products and ornamental floral patterns and what now looks like high victorian. The same things happened when websites first became created, and it happened for the same reason, because the first websites were shoddy, just like the first mass produced products. The ornamentation covered up that shoddiness. We now constantly distrust the high victorian aesthetic, particularly because we know we are subconsciously susceptible to it. We know if we liked our application before we use it. And our perception filters will make us look for all the reasons we love it. We are very good at proving ourselves right about our first impressions. And our first impressions are our site. But if your application functions so badly, that we can pick it up even through our filters. If it has such bad functional problems, that we have to admit our first impression was wrong, we will be mad. Making us admit we are wrong, how dare you? If you make an application that is functionally amazing, but it's ugly, you probably won't hear from us. No one will tell you the problem with your site, not just because it's harder to articulate, but because no body is using it. You won't hear people raging about ugly websites, because they aren't using them. Form and function are at the center of every design argument. They are both incredibly important, and at times they are in conflict. Like everything else we need to find a balance. If we don't seek balance, and we don't learn whats important in each specific situation, digital design may never mature out of adolescence. --- Section 17: Aesthetics (Exercise): Moodboard:- So we already know that our first impressions are rarely changed, because changing our impressions would be admitting we are wrong. And we don't really do that unless something very bad happens. We also know that by a matter of milliseconds, our first impression is sight. How something looks is incredibly emotional, but also uncontrollable experience. So arguably, how your application looks is the most important part of the experience. And also, as we talked about in the experience section, it's possible that experience is the most important part of your application. How good it looks, is slightly subjective, very slightly. Overall the most important part of a visual, are it not being too visually complex, and not having too complex a colour palette. And compared to those two things, everything else is reasonably not that important. But there is a small, small margin of difference, between different cultures, ages, education levels, career choices, genders, and locations. Because this is the most important part of designing an application, if we understand the subtle changes in our different cultures of our users, we might be able to get a competitive advantage in the industry. So we need to understand the visual worlds, that our users exist in, the things they like to use, the environments they like to be in. And this is going to help us understand the subtle differences in how visually complex they like their world to be, and how colourful they like their world to be. Moodboard's are simply getting a few images that our user likes, and putting them on a board, so we have a reference point when we work through the rest of our designs. Depending on where you are working, it's quite unlikely that your job would be to create one of these. It's more likely your brand manager, or marketing manager has already got this. But for this exercise we should create one anyway, to understand how important they are, and how they are used, how they are created. At some point you are going to be working on the homepage of a web application, and someone is going to tell you "it's not colourful enough.". And if you don't understand the user's visual world, if you haven't seen the moodboard that was created to inform those design decisions, then you are in absolutely no place to comment. When you are speaking to your users, and realistically you would do this as part of your research stage, you would ask them what kinds of brands they already use, what applications they already use, and what locations they enjoy being in. You would collect up some images, and you would show them to all your users and you would ask them how enjoyable they think the image is. You would ask your users how much they like the images. And finally you collect them together on a board. And you would check with your users if they like how it looks. But absolutely make sure you don't ask them to rationalize, why they think it looks nice. They will post rationalize and lie to you. It's too much of an experience for them to be able to rationalize, and it might actually change their answers. A good reason for creating this moodboard, is later on in your design process, when someone inside your company, when someone in your office says "they don't think the design looks good", you can ask them "but does it follow the same visual style as the moodboard", because it doesn't matter if someone in your office thinks it looks good or not. It matters if it fits the visual style that your users like. So you can use this moodboard as a point of reference. You may have noticed from some examples on screen of googling moodboard images, that some have a lot of pictures and some very few or are quite simple. Realistically the fewer pictures on your moodboard, the better. It gives more clarity in how your visual style is going to pan out. So for this exercise, go speak to your users again, find applications and images they enjoy, and click them together onto a mood board. Create a few of these and have them vote on which looks the nicest. The fewer pictures you have on your mood board, the better. How you create it is up to you. You could create this in Figma, and if you have a nice colour printer, you might want to print it out, and put it on your wall. How you create it is up to you, but make sure you do create it. Grid System:- The majority of the videos in this module are going to be restrictive. You learnt how to be creative, now we will be restrictive for the next few topics. We will talk about balance at end, but it's up to you to decide how much you want to be restricted, and how much you want full reign. Making it look good can at times conflict with how functional it is, with how usable it is, and with how creative you can be. All of the various elements in design exist in perfect harmony in very specific ecosystem. It's the exact reason someone can't look at a design and say if it is good or not. Often when you improve how good it looks, you are reducing multiple other things. Trying to find a perfect harmony between all of those things, trying to find some kind of compromise, really is the goal of design. Grids are often thought of to new designers as a very restrictive terrible thing. But actually they are really important. You might not see it on a finished design, but if they are not there you can instantly tell. You could get all the other elements of your design right, and if you don't have a good underlying grid, it's going to look messy, untrustworthy, and hard to understand. Grids make it easier for us to perceive. It's easier for our brains to understand what's on the screen if things align and fit into the underlying system. It's easier to perceive so that people looking at it are happier, and they trust you more, and they are going to get frustrated slightly less. Working out a solid grid system, before designing or adding anything to a page is vital. You will find that it's less restrictive to your creativity than you think. People can often be more creative within certain guidelines, than if they just have full reign to do whatever they want. Depending on where you work, your developers have probably already created some kind of grid system. Or are possibly using something like foundation or Twitter bootstrap, which gives you a grid system built in. You definitely want to check with the technical people who will be building the application, or if your are building it yourself then you want to think about what kind of grid system you are using. Most of the systems have a 12 column grid system, and they are responsive, so they shrink or enlarge with the frame. And the elements you create will span onto the grid as size changes, you might say at exactly 940 pixels, the 12 column grid turns into an 8 column grid. As we align items to our grid, we can have elements that stretch out the whole thing, like the menu at top. And from time to time you might want to have something stand out. To try and break the rhythm, so it doesn't apply to the rules. This is going to make it have a huge amount of salience, so it's going to stand out and give us that small wiggle room, where we can be creative. Just because we have a grid doesn't mean we want it to stick to everything. Once you align the items and hide the grid, you will instantly see that it looks like they all belong together. Everything just instantly starts looking more cleaner, better aligned and more professional. It's hard to articulate exactly why it does that, but once you know there is an underlying grid system, you will sort of understand. We want to be alligning things to edges of columns as much as we can. We don't want to be aligning to the inside edge,. Not everything on our page is going to be a box. Suppose we use an ellipse, we want to think of it like a sponge more than a wall, and so we place it slightly outside the grid like a little bit of padding. A rounded edge that sinks slightly into the column, and it might feel a little more like it belongs. Using the grid is like writing a song, if you have notes thats offbeat, it's going to be kind of confusing and frustrating, and cause a certain amount of tension. You are ultimately going to want to put every note of your song on beads. It makes it easy to understand and perceive. You can occasionally have something offbeat, and its going to draw attention to it, and give it that extra salience. Take a random website like rumsans.dk, you will notice a very clear grid system, and one box that breaks the grid system, which makes it very obvious, it makes it instantly very clear. And because everything else on page fits so nicely onto grid, the fact that this elements break out doesn't make it look messy or unprofessional. We can break convention in little small places quite easily. Scrolling down on website, it moves from 4 column to 3. You might hear people talk about a stacked grid, This is one of multiple reasons why you might want to avoid a 12 column grid. (8 for desktop, 4 for mobile.) This might sound crazy, but if you are using twitter bootstrap or some foundation or grip system in your code. You are actually loading a huge amount of code in there, for all kinds of scenarios that you are not going to use. There is all kids of other people using that exact same grid system, for different reasons, and they are using different bits of code. You are loading a huge amount of code you are not using. Some companies wouldn't allow that anyway, they wouldn't want something built by a third party on their website live. They wouldn't want that because if there is a bug in there, they don't know anything about it. They can't fix it, and they need to rebuild the whole application from the ground up. Another thing is if we want our application to look slightly unique, and we have done that moodboard of our users, we understand what they think. We know that people in Scandinavia prefer more white space, so they are going to want larger margins. If we are using bootstrap, we have the same standard margin as everyone else. We can make our site look instantly unique, by having slightly smaller or larger margins. We can also change those margins so they fit more to what our exact users like, what their visual world looks like. We already created our moodboard, we know how much white space we want around those columns. It's very unlikely, it's the exact amount our existing grid system gives us. And lastly a 12 column grid is too much. A 12 column grid is just asking people to create a cluttered site. They have made it 12 grids, because they want to create something that applies to everybody. Some people are going to want to split them in 2, and some will want to split them to threes. Different people will split them up in lightly different ways. And that means we are loading in a very complicated grid system, which we don't necessarily need. Also if we were to use different chunks of columns, and stick them together, (first row 1 box per 2 columns, for 4 columns, second row 1 box per 4 columns, for 8 columns.) you will notice that you have the same size margin, for the two small boxes as with the larger boxes. One rule we want to think about when we are thinking about when we are thinking about how we align things and our margins and grids, probably we don't want the same size margins for everything. Possibly larger objects want a larger margin. Some of these things might sound like nitpicking now, but this is one of the most important things to get right, before you design anything else. If your grid looks weird, if your grid doesn't look good, it's going to effect everything else. Even if grid is hidden on the page. It's the underlying framework, the underlying system of your entire design. You want to get it looking good. A 12 column grid could potentially be useful if you were for example designing a dashboard system. (first element takes white space and one large long grid, second element takes next two grids, third element takes same in same row next two grids, third element takes same in same row, but twice height.) If you were designing a dashboard with 12 different charts, in one view, you've probably loaded too much into that view. You've not really figured out exactly what the person wants to view on screen in that view. If you are in a position to develop your own grid, and you do need to speak to the developers about this, or if you are designing it yourself, you need to see what your capable of, you should look at a few different options. One thing is to use something called a stacked grid. A stacked grid is where you have two different grid systems, and for different sections of site, you use one of the other. Where one area of page uses one kind of grid, and another area of page uses a different kind of grid. (different gutter size for each row in addition to the different grid) An idea that can let you go really creative, with how you lay out your page, and make it look clean and professional at same time, whilst looking unique, is a Compound Grid. Pretty much the same as using two different grid systems separately, except we turn both these grids on at same time. You can change the colour of one to see it more clearly. And now you will see you have new layout options. The css or code required to create this is more complicated. But image you are working on an editorial of something, you might have some text that comes down in middle of page, and maybe have a quote on side of page that overlaps, and you give a white border to appear that it's got a margin, turning the grid off you see it indents the text a bit. It gives us something which fits into a grid, but still looks unique. Another option is using the same compound grid and having different elements stretching different area so we could have the main page heading which stretches the whole thing and a sub heading which stretches everything but first column and gutter following, and text fits in two columns on side, and a meta text which fits on other side. And instantly you start getting some really interesting page layouts, using the compound grid system, which looks far more interesting than those grids independently, and gives much more options independently. When we learnt about gestalt psychology we learnt about proximity. And that is one of the reasons we want the margin sizes to be slightly different for different sized grids. But it also means for an area like this, we don't want the margin to be the same above and below. We want to add margins into our grid where perhaps the elements closer related to has a smaller margin between it than the things it's less related to. To make sure the vertical spacing is good too, we want to have a vertical grid, and you might create a series of lines about 10 pixels space between. This means you have a certain uniformity of things running down a page too. So things have a similar vertical height and fit into a vertical grid as well. We are going to look at typography next, but having a vertical grid like this switched on can be really useful to make sure all our text fits nicely into page. And it stops us thinking we are missing a beat in a song. It makes things feel clean like there is a rhythm to page. To summarize, you want to speak to your developers and make sure there is a grid system and ask how it works, but where possible it might be good to create your own grid system if you can. Stacked grids, or even compound grids where you lay the two over each other, are probably better than a 12 column grid. A 12 column grid is probably far too complicated for any application. It has far too many columns. It only exists because it's a catchall for all possible application layouts. And if you are using all 12 columns, you have probably made the site too complicated. If you were designing icons, you don't want it to sit flush with the column, want you want to do, is create an area around it, that it sits in middle of. If you put it central to a box, a box that sits in middle of column, and fits into a nice grid, you can delete the box afterwords, and they are all going to feel like they fit into that grid, because they are centrally aligned into an area in that grid. Essentially we are aligning the boundary box and not the icon itself. And lastly, when we are designing our own icons, we might want to use the golden ratio thing. The golden ratio is an advantage to us, because this is the ratio that is easiest for us to perceive. If you drew a rectangle over box 1,2,3, this rectangle is easier to perceive than one of less or more length. It gets to your brain milliseconds quicker, we feel more comfortable, and more trustworthy. Plenty of logos have used this ratio. National geographic looks just like that. A golden ratio rectangle box. If we are creating our own icons, we want to make them align to these ratios. A home icon house might look like 3rd box square and half area of box 1 and 2. We can also get different shapes out of the golden ratio too. We have the spiral, and things look better on the spiral. Things are easier to perceive on this spiral. We cold take the spiral, overlay it on our page, and instantly try to get an idea of where we might want to position the important elements. To make sure they look aligned and they are things that we want to perceive more easily, and things we definitely are going to perceive. Whatever appears at starting or ending point of the ratio curve, is going to be very important. And lastly if we look back at golden ratio, adding a circle to each square area encompassing it, and these circles are going to allow us to create things in a very nice ratio as well. The apple icon, the Pepsi icon are made of these circles as well. To create a simple icon, you can use the circles as a basic grid to create those icons could be nice too. So your exercise for this video, is to speak to the developers or see what level of skill you have in developing grids, and see if they are using an existing grid system, and if not start talking about if you could create a kind of compound grid or even a stacked grid system, where you don't have to worry about the full 12 coloumns. Or at least see if there is any way that you can alter it to allow a certain level of room for creativity while still keeping your application looking clean. Links: - https://www.smashingmagazine.com/2019/07/inspired-design-decisions-pressing-matters/ (Inspired Design Decisions: Pressing Matters) Typography:- We are going to be creating your type system. That's all the fonts you will use, what sizes they are going to be, the line heights and which font you can use in bold or narrow or even italic. Typography and how you use it, can be a really nice way to add some character or some emotion to your site. Unfortunately if used badly, it will always look bad. Most designers wish they knew more about Typography, and credit it as being the key thing that helped them most in career. It's one of the basic building blocks. Absolutely anything you create is going to have words on it. And those words are quite weird irregular shapes, that we need to be able to read easily, be legible, and need to have some sort of character, and they need to look clean and natural together. To get all of these things working right, presents quite a large challenge. Luckily for you, if you get this right, you are going to do so much better than most designers and it's going to be so obvious that you are so much better, in almost no time at all. On the screen you will see the word Typography, and two yellow lines around it, above and below the middle area of font, this isolates the one important part of typography we will talk about, and that is the x height. If you add an small lowercase x in there, you will see its the same height, as the o, the a, the r. Certain words like h or t have an ascender, and words like p and y have a descender. In the article below, you will find all the terms described well. https://visme.co/blog/type-anatomy/ You don't need to know any of it to get by, but x height is a really important one, because when we are trying to find fonts that work together, x height will be very important. Google fonts is a place to look for fonts, you can really quickly get them in Figma, you can add them to your site for free, they often have different weights, etc. https://fonts.google.com/ If you go to this site, you will see different categories, and their categories are 5 different categories of typography. There are other ways to categorize type, but you might as well learn the one google fonts uses, because this will be a good place to search for fonts. - Serif is the one with little feet at top and bottom. Imagine being carved into stone in roman times. There is a lot of debate on if these serifs make it more or less legible. Ultimately it's giving each specific letter character, making it easier to identify, and therefore should be more legible. But at same time is giving more to perceive. There is more bits your brain needs to understand to pick up. Taking a stab in the dark, can say it's probably harder to read words in serif, but you are probably more likely to remember it. - Sans serif means literally without serif. Letter are very straight, and there aren't little feet. Display font can be a serif or a sans serif, but ulitmately by categorizing it as a display, we are saying this is a font which is only going to look good, when you make it big. You want to use it for headings, you want to use it for posters. It's about grabbing attention. It's about having a lot of character. But as soon as you make it small it's going to be hard to read. It's going to be too complex at a small size. If you were to select a Display font from google fonts, this is the kind of thing you would use for a heading. - Handwriting is more humanistic, so it looks more natural and more flowing. Probably making it slightly more complicated for you to perceive and understand. But probably give you a better comprehension in the long run of reading. It also naturally adds a but more of a humanistic element, making people feel a bit more comfortable and relatable with what's being written. - Monospace just means the width a character takes up is same. So every time you see an i in monospace it looks pretty big, because an i is normally quite thin, taking up very little space. Whereas an M in monospace takes up little space, as it is literally taking up same space as i. If you see someone writing in code, it is normally written in monospace, so the same length word, is same length on each line. There are all kinds of other font specifications that you might not have heard of, or you might not have needed to hear of. Egyptian serif, Block serif, Wedge serif, it's getting increasingly more popular for new fonts to actually transcend genres and take elements from different bits. So you might get one with serifs but it's also hand drawn for example. Much like music no one wants to stick in one genre anymore. One thing to be aware of when you are choosing google fonts, or if you use one of the system fonts, is that free fonts generally aren't very good. And that can be quite hard to say, because if you look at them they might look pretty great. But one thing to be aware of, is the spacing or kerning, is much more accurate with a font you paid for, it's a general rule of thumb. But when people make a free font, they generally don't include a definition in the font file, for what the spacing should be between each letter combination. To explain this in more detail, the first thing you need to realize is the difference between Typography and Font. Typography is the artwork or styling. Font is the actual file. Essentially the Font is the software. It's the thing you install on your computer, so you can use the typography. And that piece of software defines how each letter looks. And then the program, be it Figma or google chrome or Firefox, will identify itself how good it thinks the spacing should look between each letter. So if you look at a word Typography, for example, between the p and o, there is a certain amount of space there. But if you draw two i, you will notice the two i are further apart, than the p and o. This is because of how the kerning works. The space may be different, but the area with x height encompassing, is the same for both. This is largely worked out by looking at it. If you were to create a font file, you would have to work out how close a capital T and Y should be. T and O should be and a 1000 other combinations. A lot of free fonts haven't identified those spaces between the letters, meaning they leave the program to make it up themselves. It basically means that sometimes, these letters just look a bit weird how well they are spaced together. And if you were a typography designer, or making a logo, you could spend all day getting the logo spacing just perfect between the letters. But if you are placing 1000s of lines of text on an application, you are not going to ever do that. And that is one reason, why it's kind of worth you actually just paying for a font, rather than using one of the google fonts fonts. But one thing you want to ensure is if you are working with a brand, and they say you need to use our branded font on your site, you have to make sure they own the rights to that font. Sometimes you can own the print rights and digital rights independently. And some companies might actually charge an annual subscription, for using the fonts on your site. So there is some legality around using a paid for font. How you choose your display font or heading font is up to you. It's based on looking at your moodboard, and seeing what is popular with your customers. Thinking about what the brand whats to communicate. If it wants to look more official, maybe a serif font looks good, it looks more like a newspaper. If it looks to look more technical, maybe the serif looks a little old fashioned. You just have to think about what exactly it is you are trying to say, with the brand, and then change the typography slightly accordingly. Some brands might just get aways with having just one Typeface all throughout the site. The problem is some fonts just don't look good as Headings, and some fonts just don't look good as Body fonts. It's exactly the same as how you can't get an icon, that is suppose to be looking small and make it big. Making a small house icon logo large would make it look very weird, and is far too simple and looks strange when made big. If you had a simple monospace font, you couldn't just use it as a heading. There is not enough definition, there is not enough character to it to make it that large. If you had a really nice display font, which looked pretty funky, hand drawn, if you make it too small, there is going to be too much to comprehend, and at a small size it's going to be hard to read. So really, you are going to want one kind of font for headings, and one to use for body text and also any kind of meta text. We could potentially have a third font for the meta information, meta text, better text descriptions for images, that kind of thing. For now lets just assume we pick two fonts, and the bit you are going to notice straight away, is at some point you have to just look at them, and decide if they look good. Really the only rule is headings need to stand out quite a bit, and need quite a bit of character, you need to portray what the brand is trying to portray. And the body text should be quite clear and easy to read, and probably have quite a bit of space around it. When we choose the heading font and the body font, they also need to work well together. And there is a few things to consider here too. If the fonts look too similar, but they are different, they kind of clash with each other. It's really confusing for people trying to read it because their perception is not picking up necessarily as a different font. But then suddenly E's or O's look a little bit different and it messes with our heads a bit. It kind of looks ugly and it makes it hard to read. If you did want you heading and body font to look similar, just use the same font. And some font families have the heading and body versions of same font family. Or have so many weights and variations, that you kind of just use one font throughout. It makes this exercise slightly easier, but it also gives your application less character. When you want to use fonts that compliment each other, rather than use the same font or clash with each other, they need to be distinctively different, but still have some similarities. One thing we want quite similar, we want the letters width, height ratio to be about same size. You might compare two headings one, with and without serif, and they might roughly be around the same size of width, some letters though might be wider. Another thing that is really important is the same for heading and body font is x-height. Lining them up over each other you can see how similar in heights they are. The reason that is important is as we get the rhythm of the page going, it's going to look quite strange if some fonts have a large amount of trapped area, and then font further down have less or more trapped area. It's going to break the vertical rhythm of page. The two fonts might have similar widths and similar x heights, we need them to also be quite different in some ways, to stop them from clashing. There is a few things that stop these things from clashing, that means they compliment each other rather than clash with each other. One is just using bold for headings. The thickness and width variation would then be different. The bold might make the cross bars thick and side bars thin. Non bold might not have any such variation. Wedged serifs are very stylized, an unusual kind of font. If one of your fonts is a bit crazy, then the other has to not be. You can't have two fonts that are stylish. If one had a hand drawn element to it, ideally the other shouldn't. You will see on multiple different variable, they match on some, but they contrast massively on others. Another you might see is if one is angular, the other might be curvy. We don't what they to contrast on everything. We want them to contrast on some variables. One cheat to use might be using 2 fonts from the same company, eg BW. So you know design is going to create fonts in a similar kind of way. So just by using the same designer you might get 2 fonts that look quite nice together. Once you have chosen your 2 fonts, before you get much further, you will also want to think about the full back fonts. And this is, what is someones browser fails to load in that font file, there is always going to be a fallback. And ideally it should be a fallback most people have on their computers, like Helvetica or Arial. And if you are creating a brand for the company, you are going to use different fonts in emails and on powerpoint presentations. Because they are both things that people can load up on their computers, without being able to load in these different font files. If you send a powerpoint presentation to someone, it has to be in standardized font. Likewise when you send an email, that will be in a font available on their computer. So when you pick fonts, you will also want to pick a fallback font. From time to time, you want to double check on your designs, to check if they still look good if the fall back loads in. To create out typography system, our font system, we want to have multiple different heading sizes, and possible a small meta text style as well. You are probably going to end up with eight different styles of text. One quick and dirty way of doing this, is to go to a type scale creator. One is type-scale.com, and you can put in the base size, your body text should be about 16 and 18 pixels. Choosing a scale means it is the same throughout the system. Looking down you can see how body fonts of 16 looks with different heading sizes, and gives you 6 headings. Another is grtcalculator.com, or golden ratio calculator does kind of same thing, but it nicely prints out the font size on side, and is potentially kid of useful because it shows line height as well. One probably with all of these, there is hundreds of them, is that they are all based on calculations, so similar to looking at kerning of each of letters, we are thinking about how this program is never going to run perfectly. It's not got the eye to look at it, and say if it is definitely looking good. Also this is saying, that with a point size of 16, you should have a line height of 27. Going to Figma and looking at a font at size 16, the line height is 24, turning it to 27 gives a lot of white space. When looking at text online we want more white space to strain our eyes less. And we can just make the page bigger or longer for it to fit, so you might as well have a bit of extra white space around it. You personally might think it looks okay, but another might like it a bit more condensed, and as a general rule of thumb, you want the line height to be 130-160% of font size. You obviously don't have to stick to carefully to that. You might want to reduce the line height to fit into a vertical grid, and so the space and text fit nicely inside the lines. Every heading you create will have a similar margin around it, but also every element you will create on the page, would use the exact same line height. Everything would fit into the same vertical rhythm, based on just the body text. This might be a better way to do it, because the body text is the thing people are going to read the most. It's the vertical rhythm they will be most familiar with whilst browsing the website and therefore everything else should try to fit into that rhythm. If the heading goes to two lines, then you want the line height to be closer to 130%. Because having a heading with bigger text, it doesn't need as much wide space around it. People are going to be reading something at this kind of size, so you can reduce that a little, but you also want it to fit onto that same rhythm. So you might expand the line just enough so that it sits on the red line. It should be relatively easy to copy in css. The body font might be close to the heading, so you want to make sure that it is always appearing slightly lower down, leaving a nice weight space between the two. The next thing you want to define, is what kind of margin you want around your body text, and around your heading text. So you want to think about what kind of margin box is behind this. And some some point you are going to turn the grid off, and do it by eye a little bit, because it is very unlikely that our margin is also going to fit in these sort of same increments. The next thing you want to do is create 6 different versions of this, for the 6 different heading sizes. At this point its probably worth just dragging your grid out. With the huge tall art board, 6 different blocks with 6 different headings. Once you've got heading 1, you want to know how big heading 6 is. And once you have figured out heading 6, you can figure out all in between the two. Heading 6 will be pretty close to 16, maybe 18. Because it doesn't need to be that much bigger. In fact you can have a heading that is the exact same size as the body text, but maybe it's just in bold instead. You can make it black so it stands out a but more, and even increase that letter spacing a bit. You can make fonts stand out, not just by making them thicker or higher font size, but by giving more white space around it. Once you've worked out heading 6, you can try and work out what works best for all the headings in between. Try and good a good size, good line height for all the ones in between those two. Once you've worked the sizes out, you can work out the margins that work better for them as well. You can go back and adjust the sizes and margins as much as you like. What you want to try and do next is try and get an idea of how these all fit together, if you had a heading 1 followed by heading 2 for example. As we start to position them on the page, we can start getting an idea of where the margins are too big, where perhaps the fonts clash a little. How it would look with two bodies of text following a heading?, As a little aside when creating these paragraph blocks, it's worth noting that your paragraph blocks ideally want to be about 60 characters long, give or take 15 characters. Somewhere between 45 and 75 characters, if you want them to be easy to read or look good. Start to create an example document with headings in every order, how does heading one and heading two to paragraph paragraph look?, how does heading three heading four paragraph look?, and try and get an idea for those. You might also want to create a standardized way, for example how a quote would look, is it slightly thinner or slightly thicker, is it a larger font, how do the quotes look?. Or maybe how does metadata look?. Metadata can be a little smaller than 14 if you need it to. You could potentially choose a slightly different font for metadata, thats really clear when only making it 12 points. So go ahead and have a first bash at choosing two typefaces that work well together, and trying to identify how 6 different font headings, what their line height will be, what their margin will be, what their font sizes will be, and what weights will work at different sizes. And if you like also think about what your meta text id going to look like?. If there is some describing text that's quite a lot smaller, what kind of font are you using for that?, are you using the same font?, does that still work?. So go ahead, this is really important work for you to be doing, and improving, and always looking at how you can do this better as a designer because typography looking good and being readable is so important. It's on everything you will ever do. Links: - https://visme.co/blog/type-anatomy/ (A Visual Guide to the Anatomy of Typography [Infographic]) - https://fonts.google.com/ (Serif, Sans Serif, Display, Handwriting, Monospace) - https://type-scale.com/ (Custom scales and fonts) - https://grtcalculator.com/ (Golden Ratio Typography (GRT) Calculator) Colour Schemes:- colour is something we instantly perceive. Some people believe blind people can even sense colours, and are effected by the colours around them. The emotional experience of an application or product changes completely if we alter the colours even a tiny bit. And they genuinely have an emotional impact on us. A lot of designers will even avoid putting colours in their application because they are scared of how it effects it. And how once you add colour to an application, thats all anyone can talk about. And of course that is all people talk about, it's the most important thing to them, it causes an emotional reaction. Because of this some designers will avoid using colours, or will defer adding the colour to someone else. So that they don't have to learn how to use it better, or they don't have to handle that meeting or presentation, when they show the designs with the colours in. It changes everything. All that usability testing you did, if you did it with a wireframe or black and white design, that is great to get some initial checks in place, but you absolutely have to usability test again once you have added colour. Everything is different now. People's instant reaction is different. If they don't like the site now when it has colour, it's going to change how usable they find it. How well they perceive the site, and identify things on the page all change. An application without colour isn't done yet. The black and white version and colour version are completely different designs. A lot of design courses and books teach design theory by talking a lot about what different colours mean. They might say blue is calming, or reds have more passionate or emotional or angry feel to them. We can't do too much with this. In fact, when you look at the psychology of it, a lot of the time, some of the words even crossover. Maybe a certain shade of blue calming and another one actually isn't. And as soon as you change culture, the meanings of those colours change. All we need to worry about is how the colour actually looks. And we already talked about the cones and rods in our eyes, and how we perceive things, and we now know that if you had two colours next to each other, they might look more pleasant to us. At the same time, when you put two colours next to each other, they don't look the same as when you look at the two colours separately. The cones and rods in your eyes are doing different amounts of work, depending on what other colours are around it. So it can change how you perceive the colour, but just having a colour different next to it. You might see some people do stuff like putting a solid colour box inside another solid colour box, to see how well they work together. And also to check that they appear the same when they are put next to each other. Interestingly by adding example this green and blue, the blue box inside green might look bigger than the green box inside blue. It almost changes perception of how big the object is, just because of what colour it is, and what colour surrounds it. This isn't just true of colour. When you are laying out a page, everything is changed by whats next to it. Our perception is altered just by whats in area. This is why we have to think of design as a whole eco system. But how if you have a completed finished looking design, and you add one colour or remove one colour, it's going to change everything. Sometimes it's going to be hard to people who don't work in design to understand. They might look at a finished looking design and say "can we just change the colour or remove this one thing", and then you realize that changes the entire design. You might even need to start again. Likewise, if someone has just finished the wireframe, so they hand it over to someone else to add the colour, then it's not done yet. The wireframe might need to be moved around after colours are added. The other thing about colour is that it is completely natural to us. We are so used to seeing certain colours together and certain ratios of colours together, that the second we see them not in the same ratio or in incorrect places, we are instantly aware of it, and it instantly crates an uneasy feeling. With all the seriousness about how important colour is to us, some designers might even just try and make the design as grey as possible to avoid having the colour. And honestly you can make it look good by just doing that, you can probably make it usable by doing that, but you certainly can't make it have a personality, make it creative, or unique by doing that. So you can't call it a finished design. So let's start picking a colour scheme for our application. colour.adobe.com is a good website for this. And this is free and it's been free for the last decade. We can instantly get things like those complimentary colours. You can click complimentary and you'll see it instantly choses colours across opposite sides of the colour wheel. And we instantly know this purple and this yellow and these various colours in between are going to work quite nicely together. If I keep complementary selected and then wiggle it around, I can find a slightly different colour scheme, but still using that complementary harmony, that rhythm. One thing that can be really valuable with this is if you already know a starting colour or a colour that you want to find a colour palette that works around, go to the colour box in the middle with the little white arrow says base colour under it and just paste in the hex code. Once you've selected that, it's going to automatically update all the other colours. So you instantly have a colour palette that works good with this colour. Load this up and have a play with it. There's different ways to find colours that work well together. Go to custom and we're going to choose colours slightly randomly at first. Under the colour boxes, you can look at how we define the colour. A hex code is essentially the red, green, blue value. If you look down here right now, you might see the red value is 55, green value is 179, and the blue value was 118, and the hex code has simplified that into two digit numbers rather than three digit numbers. And it can do that because it uses letters above the number nine. Now, RGB is probably the most common way of us defining our colours, looking at the red value or the green flag value and the blue value. There's a couple of others on here. There's actually plenty that aren't shown here. CMYK is used when we're printing something, and that's because we print by mixing inks and we show colours on the screen by mixing light. If I change to CMYK we get four different numbers and this is the cyan, yellow and black. Black is K because B is used by blue already and K is the last letter in black. And the other thing to know is the colour is probably changed slightly. It might not show up quite on the screen, but when you change it between RGB and CMYK, the colours are not exactly the same. It's worked out as to what is the closest thing that can be defined to that of a colour space. But really, we are never going to use CMYK unless someone sends us some colours and we need to change them. In which case you generally want to ask them, what are the RGB colours? If a company has some branding guidelines, they'll have the colours defined in both of these values. Because you can get some slight inaccuracies when you change between the two. The next one is an increasingly more popular colour space, and it's called HSV or HSL, and that's hue, saturation and lightness. So what that means is the top slider is going to change the hue, in the name of red, green, blue, yellow. The second slider will change how saturated that colour is. The third slider will change how light that colour is. Pull the middle one to the left, and it will remove all the saturation, there will be none of the colour left, we will just have the lightness. If you move the top slider, we're going to change what we might traditionally call the colour, but that's the hue of the colour. Now this colour space can be really, really nice, especially if we need the code in some way to change the colour, because we could select how lights and how saturated we want it to be and change the hue. And we can get colours which look like they belong together quite quickly, by keeping the lights and saturation, and just changing the hue. A big problem with the HSL or HSV colour space in the thing we talked about earlier, the difference between how we perceive colours and how we might define colours, in an RGB colour space, we change the incremental values based on how we perceive the colour, HSL is actually not. It's actually based on the scientific amount of extra light or saturation to make up that colour. What that means to you is if you move this top huge slider, you are getting a colour with the same amount of saturation and lightness as you were getting elsewhere on the sliding scale, but it's not perceived as the same amount of saturation and lightness, which unfortunately makes this HSV colour space a little redundant. We use HSV colour space to quickly find different colours which have the same saturation and lightness. But we are going to have to tweak those saturation sliders a little to match our perception. The last one is LAB, L for Lightness, A is how different it is between green and red, the B is how different it is between blue and yellow. And part of the reason that we have the LAB colour space is because although our eyes cones and rods pick up the different colour frequencies that decide if it is red, green or blue, as soon as it leaves our eye, our eye has already kind of process that a little. It's already done some processing, and how our brain interprets it, is more to do with how green to red it is, and how blue to yellow it is, and how much lightness there is. So by defining the lab colours, the lightness, the green to red and the blue to yellow, we are actually defining more how we perceive the colour, how we see it, which is far more useful for us to do than look at the RGB value. So this LAB colour space is far better for how we perceive colours. The problem here is that within these number values, within these colour areas, there's certain colours we can't actually perceive. And when someone works out to colour space like RGB or HSL, they have to work out how to not keep those unconceivable colours in there. The problem with LAB, if it's defined correctly, is that there's certain colours in there we can't perceive. Those are the other colour spaces that you might come across. We're going to stick with RGB because everyone you work with is going to understand it. So you can select RGB here, you can decide you want complementary colours, you can pick the colours you want, and you can start to define your colour palette. When you pick your initial colour palette, you probably want to base this on your mood boards a lot. You're not picking colours that you like necessarily. You're picking colours that make sense to your users, that fit into their visual world, the sort of colours they surround themselves with. And Adobe have actually added this nice feature where you can extract your colours from an image. So if you have an image that you think really nicely sums up the visual world your users live in, you can drag it, drop it here, as well as the fact that if you have a very natural looking photo of nature, you can drag and drop that there. And you know the exact colours you're getting are replicated in nature somewhere. It's also interesting from time to time to come and look on the Explore tab, and the trends tab where you can see some of the colour schemes created by others, which are currently quite popular. Choose yourself the basic colour scheme, and don't worry about it too much, because in all honesty, as soon as you start designing, you're going to realize you need to alter it slightly. What we are looking for is a definition of what your colour scheme is at the start, which you can play with later. You're going to realize that it's not perfect, and you need to alter some of the colours a little bit. Grab yourself a colour scheme and let's start working with it. On screen you see the colour scheme that we have been using throughout this course on those slightly wacky looking slides you've seen popping up. It's been the same four colours all throughout. And if it is said these are the colours going to be used for a Web application, that is saying these are the only colours that can be used in a Web application. You colour scheme isn't really sort of a suggestions of colours that can be used. Ultimately it should be restrictions of these are the only colours that can be used. If at some point someone says, "I need a new colour for something", they can create it. But it needs to be added to the guidelines or the design system. And this stops other people going and creating another shade of yellow elsewhere, and having various different shades of yellow in all different parts of the application. But one thing you'll notice as soon as you start to try and design an application with these is that pretty soon you're going to have an overly colourful bright application, which will appear to be far too colourful. Also slightly mistake a lot of people make, is choosing too simple a colour palette. We've got four colours here, but we're going to have slightly different shades of those colours with different likenesses before we look at those. The other thing we're going to do is we're going to have a lot of greys. We can have a lot of greys in the background of our application. So we're probably going to have a whole separate section with just four different kinds of grey. Let's say, for example, these are the four greys that can be used for backgrounds and borders throughout the application just to make sure we don't have different greys that pop up. We want to keep them unique. We want to make sure we're not using the exact same greys as other people so that we have a certain branded grey. And one thing we could do is we could add a tiny little bit of the colour. Maybe all of these grades are a little bit blue. And what we could do there is from the colour picker, If you have it set to HSL in Figma, what that means is that the lightness is top to bottom, the saturation is left to right, and the hue is slider below the lightness and saturation box. What you can do rather than pushing it right against the left edge, if you pull it out a little bit, you are going to get a tiny bit of that blue in the grey colour. And this is going to mean that one of these branded colours is a tiny little bit in our greys. It's something that you probably want to use a lot, especially when we start looking at drop shadows and lighting and stuff. Because if you have a coloured object in a space, the colours around it are affected by that. Not just because of your eye, but also because of the light. The object will give off a certain amount of ambient light to objects around it. So we can make our application feel more natural to us by taking the the colours which exist in the application and adding a subtle amount of those colours into the greys. So now you can see that the colour palette doesn't just have four different shades of grey to use for backgrounds and borders, but those greys have a tiny little bit of this branding blue light. Another thing that we want to do to have lighter and darker versions of each of these colours. Sometimes we're going to use this yellow as a background, Sometimes as a border, and sometimes we're going to use it for text. You could created three little boxes under each colour box, and these are going to be kind of the sub brand colours of this yellow. We don't just want the one yellow because we're going to use it in all kinds of different places. First let's perhaps create a slightly darker one, maybe if we want to use this yellow as text. You've got the colour space set to HSL, hue, saturation lightness, use this so to reduce the lightness of this yellow. So you have a yellow that looks very similar but is darker. We could use this for some text and I'll still show up clearly. Remember, if you are using the HSL colour space, you will need to tweak the hue and the saturation ever so slightly as well because it is not perceptually uniform. So you need to use your eyes a little bit to try and figure out if the colour could be tempted to create one of these extra boxes for each of these colours and change that lightness, a similar increment. But don't forget that the lightness in HSL is not perceptually different, it's not uniform, it's not perceptually uniform. It will not change based on how we perceive colour, it is changed based on the actual lightness. Let's assume we at some point want to use this yellow as a background. So now we're going to create a new version with more lightness. You might have set the lightness to about 70, and now you are going to have one that's even lighter for a perhaps large area of background. We have now got four branded colours, which are all kind of the same yellow with different likenesses. You could do the same thing for the blue, the green and the red. And then we've got multiple colours that we can choose from throughout creating an application. Let's say this is it and is our colour scheme. We've got multiple shades of grey. We've got the greens and the reds and the yellows. One thing to point out is these yellows and reds and greens, are all quite bright. You probably wouldn't have a colour scheme with these three colours all in it. And that's because we want to start thinking about how these colours are going to be used. One colour is going to be our overall branding. One colour is probably going to be used on every page is probably the colour of the logo. And we might have pop up boxes with just a nice line of this on it. We might occasionally have a quote or some text using that colour where it doesn't really mean anything. It's just to keep the whole brand in line. If we, for example, had a pop up box, we could potentially add a kind of just a simple line of colour along the top just to remind us that that's the brand, just to keep everything in uniform and make sure we're all aware of it. Or maybe this pop up box text is even the branding colour so that we're using it for for text around the place just to keep it all in line. Now, if we're using this blue, for example, as the branding colour, we have to always use that solid blue. We're only going to use these very sparingly for background colours and things like that, perhaps. But ultimately, we are mostly going to be using that same blue colour. Now, one of our colours should ideally be the call to action colour. And what that does is as someone navigates around the site, there's one colour which always says this is the thing you're supposed to do. You can click on this button and it will take you where you need to go. So we might have one colour that's always the call to action colour. It could be red, but red perhaps says error and green maybe says success. Let's just say it's yellow for now. If you came to this website and everything, there was a call to action. This yellow colour then is pre attentive, filters your attention, and filters are going to already be looking out for that colour. So you're going to find it quite quick. And then that kind of teaches people how to use the site a little bit so we can use one of the colours to help with usability. In fact normally an error message would have a red mark on it somewhere, a success message probably have a green mark. A warning message might have a yellow mark if we were to use one shade of red, one shade of green and one shade of yellow. For those purposes, we kind of want to keep that shade just for that thing. And lastly, from time to time, we're going to be using a colour for a sort of accent colour. This is a colour that makes something stand out, but it's not because it's a call to action and it's not because it's branding and it's not because it's an error. It could be perhaps you felt it on a page and you want people to remember that they felt it. Remember, storing information on the page in the real world is always better than asking your user to store it in their heads. Then you might have something that looks a little bit like a button. So we keep people informed, but we're going to try and avoid using colours we've used elsewhere. We might refer to this as an accent colour. Lastly, one thing that, sort of touched on earlier, is that from time to time, a lot of companies, when they are trying to create something that looks different to everyone else just because of the amount of applications people say and the amount of colours they come across, all the colours have already been used. So at some point you might want to use a gradient because it kind of creates a new style that perhaps hasn't been touched upon by other people in that industry so much. And you can quite quickly create something that might look quite unique. You can change perhaps where the midpoint is or change that tiny bit, you can quite quickly create something which isn't seen on other applications and isn't too overpowering. So gradients, particularly if they're quite subtle, can be quite a good thing to play with, to create something kind of interesting, new looking without going too crazy. So get yourself over to colour.adobe.com, find yourself a basic colour palette and then start seeing if you can create a series of grey using that colour palette and a series of different lightness is of that same colour so that you've got different colours. You can play with the backgrounds and stuff next. Perhaps think about which of those colours is the branding colour. Now, if you are already working with a brand that shouldn't be too hard question to answer and what the use of the other colours are. Some of them could be accent colours, call to action colours and some will be used for errors or warning messages. Lastly, once you've found your colour palette, one thing you need to be quite aware of is you need to be aware of how they look inside each other. If you for example put this red inside this blue, how does that work? How does it actually affect the colour? Can you use different colours next to each other or inside each other? Or should they always be kept separate? Links: - https://colour.adobe.com/create (colour Wheel, Accessibility, Explore, Trends, Library) Adding Depth:- So we know we need to make any interactive elements on our page, have a certain amount of depth. A button like a blue box on screen needs to appear like it's sticking out, and some areas need to appear like they are recessed into the page. If you were to drag and drop an element onto something, it should appear like it's deeper into the page. Maybe a card wants a slightly different drop shadow, so it appears like it's resting on the page. And something like a dropdown box, should appear like it's in front of everything else. We absolutely have to have these drop shadows so that people can instantly see that these are interactive elements. Also remember, if they look slightly 3D then could be pretty attentive and that's going to make it easier for them to a find. But the more drop shadow we add, the more gradient we add. Anything like that, the more visually complex we are making the page. And therefore, at the same time we are making it less visually pleasing. This design on screen of blue pressable looking rectangle, and grey looking hole in frame, would instantly look better if they were flat colours, and had no drop shadow, that would just be easier for us to perceive, and therefore we would enjoy looking at it more. So we need to find this right balance between it looking like it sticks out the page and it not being too visually complex. And one other thing we want to be aware of is where's the light source? In this example, the sun or some other kind of light source is in the top left. We don't know this, someone could be sitting looking at their phone with a light behind them. We don't know, but at least everything on the page appears to have the shadow in the right place. It would look really weird if one button had a shadow on one side and another button had a shadow on the exact opposite side. Now, whether you think you would identify this easily as a button or not is slightly debatable, and it's up to you to tweak it slightly. One thing to say is most things in the real world have at a slightly rounded edge. This wasn't mentioned earlier, but people have done tests and found it's quicker for us to perceive a box with rounded edges than to perceive a box with square edges. So you're instantly giving people a slightly easier time by having some kind of rounded edge. Both squares on screen are given a slight rounded edge, just so it at least appears a bit more real. The blue is given a tiny gradient, almost unnoticeable, but the intention is it to appear lighter at one side than the other. So it appears like light is actually hitting the top of the button. Drop shadows were added, and you want to avoid having a completely black drop shadow because that shadow is going to pick up some ambient light from the bottom. You can drag this blue colour down so you get a black, which has a tiny little bit of that blue and is instantly going to make it look a bit more real. Realistically, if you look at any object in a room with light, it has a little bit of drop shadow on the side. The light is very rarely hitting it directly on top, it is always a slight angle. If I had a card, that drop shadow that goes all the way around the outside is going to be blurred out slightly more because the card is sitting just above the surface, whereas a button is sticking out from the actual surface itself. When you have an inset box, this could be a text area or this could be a drop zone, you are going to do the exact opposite. Your going to send in a shadow and your going to have a very thin inner shadow going the whole way round and a big thick one at the top and the left. One thing you could also add to this is a slight gradient into this background colour, So it's perhaps slightly darker in the top left and slightly lighter in the bottom right. Another advantage in doing it this way is you don't need to put an outline around this box or this button because it already looks like its inset. So we can actually remove some visual complexity because we have these gradients. One thing that's increasingly more popular these days, especially as we do have mobile applications, is pretending the light source is bigger and above us, especially if you're looking at a phone screen, the chances are the screen is very small with a bigger light above it. And we can create a 3D effect with a tiny bit less visual complexity. So what you will notice here is there isn't an additional drop shadow on the right hand side or the extra drop shadow is just on the bottom. And your gradients should be going from light to dark so now to create this effect with a shadow on the bottom and doesn't have too complicated drop shadow techniques. It's up to you how you apply these shadows. But a belief is that having to insert shadows, one with the ambient shadow all the way around the side and one at the top, first of all, means you can remove the outline. Secondly, makes it look a bit more realistic, but thirdly means that it's not to visually complex, whilst still allowing you to know what it is working out. How you drop shadows are applied to drop zones and buttons is pretty necessary and you need to define it beforehand because all buttons and all things need to have a style which suggests the light is in the same place. Design System:- Before computers or before websites, companies would have something called branding guidelines, this would say what colours you have, how you can use the logo, what texts they use, what the visual language is, What style of images they use, and a couple of other little rules like that. Maybe when we started making websites, we started talking about digital branding guidelines where we would include things like how the buttons look and that sort of thing. And we now mostly call this a design system. You may remember right at the start of the course, we talked about something called atomic design. The idea was you design the atoms first and you build it up. And lastly, you design a page or a specific template for a page and then design a page. So in the last few videos, we have talked about the real sort of atoms of your designs, the type you're going to use, what colours you're going to use. And then we've started talking about some slightly bigger things, like how your button might look and the shading on your bottom. Now, we can't design the buttons until we already know the colours and the typography, and we can't design a form until we know how the button looks. But the advantage of designing an atom first before you design a page is quite hard to decide every single time. Should a button have bold text for example, or should it be twelve points or thirteen points? Do you centrally align text and a button? By having this design system, that's already defined for you, you don't go and worry about that each time. You already kind of know how it looks. You can download the Figma file, and edit yourself. And one thing you're going to notice, especially if you've already watched the Figma videos, is how quick and easy it's going to be for us to change this. All of these are created as components and all of the styling are created as styles on the side. So let's say for example, you were designing a page for a Web application, let's say you want a certain kind of button on it, you can just go to you assets. You have got all of these assets, you have already created a component, you can pull the button out, drop it on the page, and you have already got a button with the exact styling that we use. You can then go and change the text to say whatever it needs to say in this instance. One thing that's super nice with Figma is because we have created all of these styles and all of these components, if at any point you decide we don't want our buttons to be the blue, we want them to be the green, we can go in there, we can change the styling and we can choose our branded green colour. If it doesn't look too great, but OK, you can look back there, you'll see it will have updated on every single design, which is using these components. So really, if you're using Figma, you don't need to create this design system page with all your components on it because you've got them all saved as styles and components. You can just drag and drop them from there onto your application as you need them. You should to get this file, and update these things to see how they look on here and make sure you have got some of the basics documented. You have just added buttons, notifications, pagination forms and some basic tooltip stuff. So as soon as you start designing something, you're going to realize this things that are missing from here. And as you do, you can add them to the components to make sure that every time you create that element in future, it's aligned and follows the same design standards or system. Now, once you've got all of these elements, you might want to think, how does a modal window look in my application? You can created a super simple model with some kind of button and some kind of text, and realistically there might be an icon at the top here to close it so I can just select all these and create a component from this. And then that component will also update every time you change that button colour. Any style you take on from here, you can take the drop shadow effect. All the elements that have a drop shadow, the same drop shadow, and then in the effect at any point, you can go and open this drop shadow effect and you can change the styling on it from there and it will change in all instances. So one thing that's nice about Figma is when we're working with our own design systems. Your exercise for this video is to start creating a really basic design system. You can download the fig file because the components are already added and just adjust them. Or you can create one from scratch. As soon as you start designing pages, you'll realize there's elements that are missing. But in all honesty, you're better off starting with a very simple design system and building on it as you find new things rather than having a very complex design system from the start. So download the file and update these with your typography and your colours that you've chosen and start building on it as soon as you realize there's elements that you need. Visual Language:- You may have noticed that all throughout this course, when shown summary slides, there's a random little yellow line between the words summary and the text. What's the purpose of this yellow line? Nothing really. We could say it breaks these two things up, but they're already pretty broken. The purpose of this yellow line is it creates a visual language, visual language that brings everything together. It makes it look slightly more unique. It reminds you where you are. It might spark in your memory. Other summaries you've read in other videos, which possibly you watched months earlier, could aid your memory in bringing these two things together. And on the left, I've always got a picture which I've always made a greyscale picture. This very simple summary slide has a same visual language for every single summary slide throughout this been black and white and this yellow line don't really serve any practical purpose. They create a visual style which can be carried on all through the course. This yellow line doesn't really serve any purpose. It doesn't stretch the correct width. It's kind of a bit randomly placed between these two things. But it is unique and that's what gives it value. It could be one of the most visually valuable things I have throughout this whole course. This funny yellow line would call this the visual language. And when you're defining how your application should work, you need to be really aware of the visual language and make sure it is unique, but also similar across the application. An obvious example of this is how the photos are used. There's a style of photography I've come into contact with whilst creating a sort of branding style for a company before, which was referred to as sniper photography. This is where a photographer would go around our offices, poke the camera in without people knowing it was coming, and take photos, but not of their faces, but of close ups of their hands, etc. , of them actually working. Now, all through this course, I've used quite cheap stock photography, and one of the reasons is there are about 300 pictures throughout the course. It would cost tens of thousands to get nice ones. We can straight away see that these people probably aren't really in the middle of doing something important. They're posing for a cheap stock photography. There's some psychological evidence that people might trust things more if they see someone's face. Maybe that's true, maybe it isn't. But the part of sniper photography is that you actually would blur faces out and never have people's faces in so that maybe the person viewing it feels more like they're a part of it or it could be them. Some people's photography style would just have one thing in a photo that would be the central point of focus. There's a different styles if you use this picture on the left of screen, and then you had a picture elsewhere on the application that was a bit close up of someone's face. You don't really have a consistent visual style. One to be aware of is if you are using photos, you need to define a visual style for those photographs before you can bring any photos in. And just the fact that some of these stock photography like this on screen are so overused, it makes them incredibly unvaluable, just like how that yellow line is potentially quite valuable because it's weird. These are so common that it instantly is going to make your app seem cheap. And that's precisely why a lot of applications don't even use photography anymore, because if you want to get nice photos, it might cost you tens or hundreds of thousands of pounds. You can get these for next to nothing, but they're going to make your app seem really unvaluable. They will make everything feel cheap. They will make people hate it. As well as deciding what style the photographs should be, there's going to be other things you want to think about, like how do you overlay text onto a photograph? Sometimes you can do it by having a black overlay, sometimes by a white overlay. What colour text should be over it? What we don't want is this picture on the left and this picture on the right been used in two different places on the same application because they don't have a congruent visual language. We should define how we overlay text onto an image. And actually, if you had a gradient of some kind, you could potentially use a gradient over the image to overlay those text two. But also, if you had quite a complicated image, like certainly this one on the left, the gradient is going to look really overpowering. Remember the importance of visual simplicity. We can only use a gradient over a very simple image unless you have a lot of money to spend on a photographer for your project and you don't want to buy these horrible, cheap stock photos. A lot of people have started using illustrations. Look how cheap these photos look and then imagine having these illustrations on your application instead. These have a unique style straight away, and they were probably created relatively easily. They are unique and they look good. They are simple to perceive. So probably this is a better way to go than photographs if it fits with your application. The three screens shown are all quite simple so they can get away with. These circles and squiggly lines and triangle patterns in the background, if you had a more complicated looking page, you'd have to get much more simple with your visual language. You certainly wouldn't want a picture on it as you define the visual language of your application. It's pretty much where you are going to have to be let go, because you need to be creative, unique. It needs to work with your brand. There's very little you can be told about how to do that, but I would recommend having a look around dribble and some of the inspiration galleries to get some ideas of how you can have a unique and interesting visual language to add value to your application. This is a very different example from that last one. It's still a very unique illustration style, but it's very simple and it's very clean. And actually they've got a really nice typography there. And what you will notice is this is actually for a bank. So this is a very trustworthy, secure sort of application. And yet they have managed to still get something unique looking in there. So this is a really impressive piece of branding. The application, you'll notice they use a lot of thick, solid lines and very sparingly use rounded corners, all of these things that might give people a sense of security and probably came away from their mood boards, but at the same time is feeling secure. It feels valuable because they have got a unique style to it. This one's almost quite childish, and this would be very hard to use this kind of styling in the background of much of your application. But you can see how unique it is. And if you could use this sparingly, that would be pretty amazing. This one, on the other hand, they've used a similar thing like that yellow line in summary slides. You will notice it looks super clean, but there's this random little black lines coming in from the side and there's text on its side. And actually the Hamburger icons on screen are a little unique, too. So you can see how they've taken an application that's super clean and simple, but still added these visual elements, s till added a visual language. And lastly, this is an example of an application which isn't really used. This is a demo piece just for them to put on to look nice. And you'll see how they've added the number 1960 in the background over here. And this has similar to those yellow lines in summary notes. There's no real purpose in it. It's just creates a visual language. It makes it unique, adds value. So now you have an idea of the colour scheme and typography and the rest of it have a real thing. Can have a look about what really simple patterns or simple visual elements you could use to create extra value in your application. This is going to mess with that balance a little bit. We know that the thing that's most visually pleasing to us is incredibly simple and doesn't have too many colours, which is why this isn't too overpowering. You are recommend this pdf found on refactoring UI. But showing you one of the examples, you should pretty much get get the idea straight away. They've got an example of a component from that application and it's got lots of lines everywhere for no real reason. And then on the right, they have got an example of what they have removed all those lines. They weren't adding anything and created a bit more white space around it. So it instantly looks cleaner and it instantly has less visual complexity and therefore is more visually pleasing to us. What refactoring UI have missed out slightly is that by having this so visually simple, by removing that visual complexity, this now has a certain bit of room for adding that visual interest instead for creating a visual language. This blue box here could easily be textured or maybe a paint splat. There could be some kind of simple background pattern. It could just have simple black lines like on this here they have managed to remove the visual complexity. So there is a small bit of wiggle room to add to the visual interest, but they haven't taken it that next step. Take that next step, find a visual language that you can add to your application, maybe a photography style, maybe an illustration style, and maybe simple patterns and elements which can be added in. To keep it can grow and add value, make it unique and creative. And you're instantly going to go to an application that looks quite average value like this one here to something that looks really high value, like this one here with a unique texture, unique illustration style, and there's unique visual language elements. One quick way to do this could be icons. On website flaticon.com, it is a really good place to come and get some free or relatively cheap, simple icon styles. If you look for something like settings, you see there's absolutely hundreds of examples of icons that you could get. The problem with these is similar to those stock photos that were quite overused icons and therefore not making your application look any more valuable. Between photos and icons, is buying a premium icon that is far cheaper than hiring a photographer. This website ui8.com, and there's loads of these, this is the best one for buying these kind of stock icons with multiple sets and you can buy fonts on here as well. So you could have an icon which changes as you change the screen size so that you don't have an icon, which is too simple, a large size and an icon which is too complex a small size. So maybe an icon set like this could be better for your application. Or there's also there's also multiple icon sets you can buy for a relatively cheap price if you want something slightly more premium. And that could be a really easy, really nice way of creating a unique visual language for your application. As far as the physical exercises in this course go, this is where you will have to be left. Everything's going to be quite theoretical from now on. And that's because you can't be told how to make some unique style for your application as it is not going to be unique. You check out lots of inspiration galleries and also try and move away from dribble, because this is what people are already using for digital product design. See what people are doing in magazines and packaging, but definitely make sure you keep an eye on these inspiration galleries. Links: - https://dribbble.com/ - https://www.refactoringui.com/ (Tired of relying on Bootstrap?) - https://ui8.net/ (5,140 curated design resources to energize your creative workflow) (Buy icons) - https://www.flaticon.com/ (Access +6.0M vector icons & stickers) (download free icons and stickers for your projects) --- Section 18: Minimalism: Introduction:- There's an old Japanese proverb that says, your garden is complete when there is nothing more you can remove. Japanese ideas spread to the West when we were amazed that their products were so common and simple, but still met our emotional and humanistic needs. There is less sexual effort required to understand a minimalist product. The simpler shapes, colours and ratios can be comprehended with less cognitive effort. We enjoy being in environments that are minimalist. We learned how people value things that are beautiful more. We know that beauty can be achieved by making something less visually complex and having a less complex colour palette with some variation for different cultures, education levels, genders, etc. But can you not remove from your garden? The utilitarian out there would say you can remove everything. That would probably not make a calming garden. At first, the West's Western minimalist designers got this wrong and made designs that were anything but common. Minimalism is hard, much harder than dressing up a Christmas tree. Form is imperceivable valuable to us and our customers. We can't remove much more application, or it no longer looks beautiful. We need to achieve the results with less. Minimalism is hard and it took the West a long time to learn. The Japanese also believed everything has a soul. You cannot remove the soul from your God. Soullessness is not minimalism. A characterless design is not complete. You removed too much. If your Japanese garden no longer has a soul, you removed too much. Minimalism:- In 1853, Commodore Matthew Perry landed in the Bay of Tokyo, Japan, and had been cut off from the rest of the world for 200 years, and our cultures had evolved in isolation. Once the rest of the world got their eyes on the arts and crafts that had evolved separately in Japan, everybody was amazed. Everybody was influenced to make simpler and cleaner crafts and arts. Japan had a calming, much more simple way of life than the rest of us. It wasn't uncommon for a Japanese wealthy family to eat dinner around a table that was a single rectangle of marble resting on some legs. We might marvel at the beautiful simplicity of such a table, but actually the simplicity to the Japanese drew attention to the cracks and the damage in the table. Every time the table was scratched or damaged, it built on the personality, the individual identity of the table. Sometimes people would even fill the cracks with gold. It took the rest of the world many years to fully understand minimalism. Over the course of the next hundred years, we will accidentally think it means that forms are not important. We will sometimes build incredibly ugly buildings just because they are simple in the name of minimalism. And even today we will make very ugly websites, not understanding the importance of form and just saying, well it's minimalist, it's clean. And forget that at its roots, minimalism was a very spiritual thing. Throughout this section, we will be looking at how we learned about minimalism and how it influenced design. From the mid 1980s onwards, Japanese arts and crafts changed the way all other countries design. We now know that this is because minimalistic forms are more aesthetically pleasing, more calming and less work for our eyes to interpret. But at the time, the rest of the world did not understand why they liked them so much. They didn't understand that this minimalistic forms drew more attention to the character in they object to its imperfections. The rest of the world saw it for a while and thought, this seems to work. This is acceptable in this culture to make something so clean. The rest of the world started to design things with no character and call it minimalism. This was a huge mistake. Links: - https://www.japantimes.co.jp/culture/2019/08/20/arts/minimalism-not-straightforward-seems/ (Minimalism: Not as straightforward as it seems) - https://usabilitygeek.com/is-less-really-more-the-truth-of-functional-minimalism-in-web-design/ (Is Less Really More? The Truth Of Functional Minimalism In Web Design) (\*Some really nice designs, check back again) Less but better:- During the Second World War, the Bauhaus House School of Art and Design was closed down, and a lot of the artists, architects and designers moved to the United States and other countries. Once the war was over, they started to return and continue their mission to create a new kind of design. The Braun School of Design was created to follow in both houses footsteps. And one of its most famous students is Dieter Rams, who studied architecture at the School of Design. Dieter Rams came from a long line of craftspeople, and he was massively inspired by all of the German designers who had been at the house and had moved elsewhere in the world to create great things. Dieter Rams will go on to probably be the most famous product designer in history. Even today, some of the greatest designs of our time, those created by Jony Ive of Apple are unashamedly influenced by Dieter Rams work that he did at Braun. Rams loves architecture. He loves how precise and detailed everything has to be before you can start working on it. And he didn't understand why product design wasn't the same. He didn't understand why we made a toaster and then threw it out a couple of years later because it wasn't made properly. And he was very aware of the arrogance that existed in some areas of the design industry. Rams wanted to dethrone the designer as some rock star who creates great things and wanted instead to hero worship the user, the person who will use the product. And he wanted to make things that people could keep for their whole lives, not just a few years and then throw away. Rams created the ten principles of good design so people could follow in his footsteps. It's very much about building things that are long lasting, that are beautiful, but above all, simple and easy. We still use these ten rules as a benchmark today, but many people have failed to meet them. The thing Rams is so upset about today is how we make everything to be thrown away. Dieter Rams loves what Johnny Ives and the rest of the Apple team have done. But even with them, he's upset at the way we stare at our iPads and fail to acknowledge anything else or each other. Rams believes that design today has failed to meet his ten standards. As we all jump on the latest fashionable trends to make something that will last a couple of years and then be thrown away and recreated with architecture and product design, it's pretty obvious to see why we don't want to be throwing things away very quickly. But designing software is nothing like building a house. In the very early days of software, we talked about it as if it was like building a house. And then we realized we can update the software, send people a disk with the new updates and they can change the software on their computer without having to completely start again. In short, software design is nothing like architecture. If we could add a door somewhere in our house or move a wall, we would still do that, even if we put huge amounts of effort into designing it beforehand. The reason we don't, is because it's really hard and really expensive and sometimes we still do anyway with software. If we want to move a door later, we can do that. It's fine. The reason we do all the design upfront with the product design or a piece of architecture is because we don't have any choice. But with software we do. So if we're designing software and we want to take some tips from Dieter Rams, we really want to look at these ones more. It needs to be our aesthetic. And it needs to be innovative. Yes, we've covered these. It needs to be useful. It also needs to be unobtrusive. And it has to be honest and it needs to be understandable. In this module the thing we will be focusing on is good design is little design as possible. Dieter Rams changed the way we think about design. He made things very simple. He made them beautiful. He made them easy to use, and he made them long lasting. His influence is still seen today. The most famous designs of our time are massively copied from Dieter Rams himself. The one thing we're going to really focus on first is that good design is as little designed as possible. We know that what makes something aesthetically pleasing is that it's simple, it's clean, it doesn't have too many colours. It isn't visually complicated. But is that also what makes it functional? Removing Things:- In our second module, we talked about form, and we looked at how we want to keep it very simple. In the last video, we looked at how Dieter Rams created very clean, very simple designs. And people love making jokes online about how Johnny Ive's basically copied all of the bronze products. But let's take a little deeper look at Apple, a company who have done incredibly well for themselves. They took the disk drive out of computers way too quickly. You may have still been using disks and they decided you shouldn't use them anymore and took it out of your computer. Not long after that, when we were all using CDs, suddenly the CD drive was gone from your computer. And if you had to put a CD in your Mac, you had to buy a separate box to put the CD in. Both of those things looked like they might have been a mistake if it wasn't for the fact that it kept happening and Apple shares kept going up in value. More recently, Apple got rid of the headphone socket on the iPhone. They took the headphone soccer out and all of us made jokes about it and how we will never want to lose their headphones because they don't have wires attached to them anymore. And then about a week later, every single person on the subway is wearing these headphones with no wires. And now you look like the odd one out untangling your wires on the train. There is no rational reason to not let us have a headphone socket, but it turns out everybody loves it. When Apple decided they were going to take the headphone socket off the iPhone, there was a petition around Apple. Around 100K people signed a petition saying keep the headphone socket. No one will buy an iPhone if they can't plug headphones in. And Apple released it anyway completely against conventional wisdom. They were right again. And not long after that, they took away the home button on the front of the phone. And low and behold, everyone went and spent over a thousand pounds on the new phone. Of course, every iPhone also has new advanced technology in the phone, but for some reason they keep taking things away and people keep wanting to buy more. It's clear that Apple are massively influenced by Dieter Rams. Very clean, very simple design and aesthetic. But more than that, they were inspired by his belief that less is better. These are the people that took away the right click mouse button. And yet people still use their computers. Right now, it's become a bit of a cliche that design is as much about taking things away as it is about adding things. It can be hard to make sense of. Why would someone want a product that does less? You can still use Bluetooth headphones on a normal phone. There is some very good reasons we prefer things with less features, especially with digital things. We need to learn a little bit more about humans. Affordances:- Earlier in our section on Perception, we talked about Gestalt psychology, the psychology of how we perceive patterns and why that's an advantage to us right now. Now we talk about one new Gestalt theory, and that is the theory of Valence. The theory of valence is that any object that we perceive has two forces. It has positive balance and negative balance. One attracting us and one repelling us. And these comes in different quantities. Ideally, if you want to make a desirable product, it would have a greater amount of positive valence to negative valence. Don't worry about this at all, you won't need to use this. It's not going to be on the test. In the 1960s, a guy called James Gibson built on this theory of valence. At the time, the word of Ford was purely a verb. It meant, "what can something provide?". If you can afford to buy a new TV, you can provide the money to exchange for that TV. If a sofa can afford your weight, then you can sit on it. James Gibson took this verb and turned it into a noun. This sofa now has an affordance. It's now an attribute, a thing the SOFA has, or much more specifically a thing that it has that people will notice. That people perceive it to have. As another example, if you had a particularly strong balloon that would also take your weight, you wouldn't say it had the affordance of taking your weights. Because you would look at it and assume the balloon would pop if you sat on it. Or to put it another way, the balloon is strong enough that it can afford your weight, but it does not have the affordance of taking your weight. It's about perception. So the affordance says other possibilities. We believe an object to have an object is now not just made up of shapes and colours, but also the perceived possibilities. So the affordance is other perceived possible uses of an object. To give you a clearer example, we're going to move on to the 1980s when Don Norman, an engineer who had studied psychology, moved to the UK and was wondering "why is everything so hard to use?". Why are even light switches and door handles sometimes hard to use?. Don Norman is famous for coining the term human centerd design, and also coining a term we'll talk about later. But he's also wrote this book, The Design of Everyday Things, which is on the absolute must read curriculum for every design course ever. If you look at there's a door on the screen now, we still call this a Norman door and people love finding these and taking photos, and uploading them to Twitter #normandoor. This door has two distinct different signifiers, two different signs that it's telling you what you can do with it. It has one that says push in actual words. This suggests that you can put your hand on the door and push it forward, but it has another signifier. It has this big handle that you can grab and pull it towards you. We would refer to both of these as a signifier. They make us think about what you can do with the door and they inform us of the affordance, that the door has. So from a distance from this picture, there's two conflicting affordance is the importance of pushing the door and the affordance of pulling the door. If walk up to the door, you would probably push it. But if you were in a hurry walking down the corridor and you saw this door, you wouldn't read the instructions on the door. No one reads instructions on a door. You would grab the big, handle, pull it towards you and you would look like an idiot. And then after you pulled it towards you, you would probably read this sign that says Push and it would just make you feel like more of an idiot. Essentially, the sign saying push is just making you feel twice as stupid when you pull it towards you. In this exact context, it doesn't matter that much. Someone's going to look stupid for a bit. They might report it to the building owners and they'll be like, "oh yeah we'll fix that", and never do anything about it. We know that's why these doors still exist. But in the context of your product, your software or your application that you're making, how many different things does it afford?, how many things does it signify that it affords?, and if any of them conflict with each other?. Most important to realize in this chapter about minimalism is how many affordance does your product have? The more it has, the less clear each one is and the more possibility of one conflicting with another one. This door, for example, can remove both of these signifiers. If you could put a flat panel on this door that you put your hand out and you push it. There would be one affordance for the door, which would be putting your hand, pushing the door and walking through it. With the existing door, even if somebody gets it right first time they don't feel. All about it, because there was some ambiguity before they pushed it. They weren't sure, they didn't feel confident about themselves as they went through the door. And experience is all about making people feel confident about themselves. Now, if we think back to that Gestalt theory about valence, something has positive violence and negative violence there in direct conflict with each other. It is the same with avoidances. They are all in conflict with each other. If your product does one single thing, it can signify that one single thing much more confidently and the people using it will feel more confident that they're using it correctly. Really, when we reduce the number of features a product has to make it more successful, we're reducing the number of affordance it has. Or to put it another way, we are reducing the number of things that people perceive that it can do. Single Function:- Now we know what affordance is. Let's see if this helps us understand why Dieter Rams or Johnny Ive's from Apple were so successful and why their designs, where they took features away from us, actually made us want them more. First, let's look at this. This is a bed sofa. This is brought up because, right now I'm trying to buy a new sofa and get rid of the old one, the old ones uncomfortable to sit on. Most of the time the blame is on the fact that it's also a bed because this item affords both sitting on and it affords folding out to lie on and sleep on. It's probably half as good at both of those things. Realistically, it might not be at all. But somewhere in the deep, dark depths of the mind, you might not believe it can be good at both of those things. When Sony released the first portable tape player, the Walkman, they had a feature to record on it as well. You could maybe record your voice or record from another tape. At the last minute they took this feature off. It didn't really affect the price of the Walkman all that much. But what it did do is it made it incredibly clear to us what this is for and how to use it. What's a bed sofa for?, Is it for sitting on or sleeping on it?. We don't like that confusion. We don't like having features that we don't use. When Apple took our CD drives away, they said you don't use CDs anymore. That's not what this is for. When they took the right mouse button away, they said, "you're either clicking on something or you aren't clicking on something, Why would you have this in between half click thing?". The opposite of all of this in the real world would be the Swiss Army knife. The Swiss Army knife has been going for generations and generations and people take them camping with them and everybody has one in their cutlery drawer. Somewhere you get to out when you can't find the bottle opener. It's never your first choice of a bottle opener. It's never your first choice of a corkscrew or a knife is definitely not your first choice of a toothpick. It's there because sometimes you can't find your first choice or sometimes you go camping and you don't have much space in your bag. If you're making a piece of software, there's no advantage in having a Swiss Army knife. The Swiss Army knife has carried on existing because sometimes we'd lose our bottle openers. Sometimes we go camping and probably overall, sometimes when a young teenager goes camping with their friends for the first time, their granddad buys them one as a present. There is absolutely nothing we would find desirable about a digital Swiss Army knife. Think about what your product or service signifies. Think about what it affords, and then think about this quote that you hear about public speaking events. Sometimes the quote goes, "if you tell them three things, you tell them no things". The idea is if you give a ten minute speech to a roomful of people and you try and make three different points in that same ten minute speech, nobody will get any of them. There's a reason why each of these videos basically goes on about the same point a little bit too much. That's because you're only going to remember one or two main points from each video. And when people look at your product, they're only going to remember one or two things that it does. The more buttons, dials and weird features, the more it muddies the water and the more likely we will miss the actual important features we want it for. The most successful designers of our time by far have been the people who have taken features away rather than added them. When Somebody is describing your product to a friend, they are going to describe one thing on it. Make sure that one thing is really good and make sure it doesn't do anything else. Categories:- I have a theory I called the chef's special. Imagine you're in a restaurant. You are in a restaurant and you are looking through the menu, the menu has 30 items on it. You stare at all 30 of them for a while and hopefully someone interrupts you and talks to you for a bit because it's a bit daunting. Looking at 30 different things, you have no idea where to start. You don't really know what you want. It's difficult. Thirty options all written in a list on a page is kind of impossible. It's impenetrable. You can't get started now. Some restaurants employ this clever trick. They have a little arrow pointing to one of them saying Chef's special, while they put it in a box. Now you're looking at a page with twenty nine menu items on one menu item. That's the chef's special. So you look at that first. The chance that that it is really the menu item you want best is probably about one in 30. You didn't really learn anything from the menu there. It didn't help you decide in any way. It did help you with something, you are no longer a person staring at 30 items on a menu. You are a person reading one item out of the thirty on the menu. If you break down all the little micro tasks inside, the bigger task of choosing something from a menu, transitioning from the state of staring at 30 items to the state of reading about one is a big jump. The arrow saying Chef's special, it gave you a way in and gave you a way to start reading about one of the menu items rather than scaring at all of them. You may see this in the aisles of bookshops. You are staring at a wall of books, but two or three of them turned sideways to poke out at you. What this means is you walk up to one, you pick it up and you read the blurb on the back. You are no longer staring at a wall of books. Now you're reading the blurbs on the back of books. That was one way in which we used to live in a world where people couldn't get the information they wanted. We now live in a world where there's far too much. If you're looking at our website, you can't afford all the information. You don't have the time to exchange for it. If you pop out for lunch, you probably can't afford to understand all the information on the menu. If you go to Amazon.com, you're screwed. These e-commerce sites try and come up with some clever way of having a chef's special. Sometimes it's a special offer. Sometimes it's a recommended for you. And even if the recommendation is not that accurate, it still gives us a way in. For all we know, the chef's special was just picked entirely at random or it's just some food they were trying to get rid of. The books turned on their side in bookshops, might just have the nicest covers. And you know what they say about books covers. Psychologists back in the 1960s found that people really don't weigh up all the options in a shop. They really quickly categorize and remove categories in their brains. We instantly think, "I trust this brand, so I'm going to ignore everything else in the shop". Toothpaste brands, for example use this to their advantage. They will have so many different kinds, teeth whitening and fresh breath all day and all these different options that when you get there, you just go, "I'll just take the toothpaste that I saw ad of that I trust" because there's far too many options to weigh up. If someone walked into a shop in the 1960s and even then weighed up only a handful of options in the shop, imagine what someone does online today. Spotify has told us that now that people have every single song ever written at their fingertips and they can listen to anything, people actually explore a smaller range of music than they did when they had to go into a shop and buy the CD. The list of options on Spotify is too daunting for us to ever find new music. They try and solve this using curated playlists. "We think you might like new releases from bands you've listened to in the past", anything to help get you listening to different kinds of music. The faster our brains have worked and the more information we've got, the more companies have focused on curation rather than providing endless information. It seems that a lot of people have adapted their own version of searching where they see what the top level categories are. Pick one of those, look for the subcategories, pick one of those and use this kind of faceted filtering approach to searching. The reason is the top level categories maybe have ten things and you can pick from ten things subcategories, then maybe have ten things and you can follow this path easy enough. You can't decide from every option in the shop. And sometimes people invent new categories to make it easier. IPA Indian Pale Ale has now been used as different acronyms for all kinds of things. There's now am American Pale Ale and XBLA, also means experience pale ale. Sounds cool and new and exciting, but it still fits into a handy category that we can choose from. Suppose you like pale ales now. Do you like Indian ones, American ones or experience ones? Before the Internet even existed way back in the 1960s, people didn't walk into a shop and consider all the products. They instantly chose one category and then one subcategory and filtered down to something very easy to choose from online. We can move ridiculously fast and we have ridiculous amounts of content. The challenge has therefore become one of context and not of content. As soon as the options become larger than a certain number, they need to be split into subcategories. We need to minimalize the number of options. A very big hit recently is the website The Culture Trip. It gives us curated lists, the five best hotels in Paris. How did we go from being able to find about every hotel in Paris to just want to know about five? Case Study: Booking.com:- Booking.com perfectly emulates a business model that existed before the Internet, where you would have to walk into a travel agency, and you would have to say, "I'm going to Paris for two nights and this is my budget, Where shall I stay?". And the travel agent would maybe produce two or three options and tell you a little bit about each of them. You would pick one and they would phone them up and book the hotel for you. The travel agent would take a 10 percent cut of how much the hotel makes from the booking. So they make a bit of profit too, thanks to their expert knowledge of hotels in Paris or probably lots of catalogs. Sadly, the Internet's made travel agents almost completely obsolete as a job. But now you can get onto your favourite search engine, look up hotels in Paris, maybe write your price range. It might help your search results, and be presented with a list of hotels. In 2019, and trying to do a search, if you search for hotels in Paris, you end up with pages and pages of links to sites exactly the same as booking.com, and it is now pretty hard to actually find a hotel's website. But if you go back in time about ten years and imagine that hasn't happened between you and the hotel, you should now be saving about 10 percent. Except you don't, do you? You actually spend more money. You actually go to a hotel booking website, which often take between 20 and even up to 30 percent commission for booking and you book it there. Now that you don't need a travel agent anymore, you spend more money for an automated travel agent. As the Internet filled up with more and more and more staff, we went from requiring more content to requiring more context. If you go onto a hotels individual website, you need to search around to find out if it has Wi-Fi and parking and if pets are allowed, you need to search around to find the pictures and a little description that is pretty much all booking.com and gives you. There is a list of bullet points of the facilities. There is a paragraph of text, there's some pictures, and there's the reviews because of the way a lot of people like to search and certainly not all people. But the faceted filtering allows us to essentially filter down to the exact options of the hotel that we want. And then when presented with a handful what booking.com did, and of course, hundreds of other websites, is they took a lot of information and made it basically easier to digest. There's a lot of information on each hotel page, which is missing. You know there's parking, but you don't really know how security. You know there's Wi-Fi, but you don't know what speed it is. There's all kinds of information missing, but we're not going to ever find all the information. All we want is enough information to make a decision, not the best decision. Just like when we browse a website, we are not really looking for the optimal decision. We are trying to look for a satisfactory one. We used to live in the age of information. Some people might say we live in some data age or something now, but it's entirely possible that we live in the age of attention. One of the most expensive things to buy is specific ad space to grab people's attention. As we browse the Internet we are always having things competing for our attention. So we are able to just go to one place and have the basic information that we need. Narrow down with no ads jumping out at us is actually a really useful thing to have. Booking.com business model was to take away information, to narrow it down to the basics of what we might want to see. And it turns out quite a lot of people, not all but quite a lot wanted that. And they wanted it so much that booking.com can now charge more than double what a travel agent used to charge. Minimalism isn't just about how it looks. This booking.com website doesn't look particularly minimal at all. It's also ab