'

UX

Понравилась презентация – покажи это...





Слайд 0

The importance of UX


Слайд 1

What is UX?


Слайд 2


Слайд 3


Слайд 4

What we’ll cover A brief history and future of UX What is UX and why? How do we deal with UX: Project approach


Слайд 5

A brief history and future of UX


Слайд 6

A brief history of UX Since the beginning of the Machine Age Henry Ford pioneered ways to make human labor more efficient, productive and routinized


Слайд 7

1940: ergonomics & human factors A brief history of UX Focus on design of things to best align with human capabilities


Слайд 8

1950: cognitive science & augmented reality A brief history of UX potential of computers to serve as a tool to augment human mental capacities


Слайд 9

A brief history of UX 1955: ‘Designing for People’ by Henry Dreyfuss “When the point of contact between the product and the people becomes a point of friction, then the [designer] has failed. On the other hand, if people are made safer, more comfortable, more eager to purchase, more efficient—or just plain happier—by contact with the product, then the designer has succeeded.”


Слайд 10

first GUI first mouse first computer-generated bitmap graphics > inspired Apple Macintosh Xerox PARC A brief history of UX


Слайд 11

A brief history of UX Rise of Human Computer Interaction


Слайд 12

A brief history of UX


Слайд 13

A brief history of UX


Слайд 14

A brief history of UX Donald Norman User centered designer at Apple first mention of UX


Слайд 15

A brief history of UX Increasing functionality, interactivity >>>


Слайд 16

Focus even more on the user A brief history of UX


Слайд 17

A brief future of UX technology will not disappear will become more people-centric technology will not look like technology anymore it will dissolve in everyday life


Слайд 18

A brief future of UX technology will not just tell you the answer, it will help you solve your problems together the ability to figure out what a person needs at a given moment emerges as the killer app.


Слайд 19

A brief future of UX More hands, less mice Natural UI Less chrome, more content


Слайд 20

A brief future of UX Contextual Designing


Слайд 21

A brief future of UX Unbundling of apps


Слайд 22

Future technologies


Слайд 23

A brief future of UX UX will become more and more the tool of innovation


Слайд 24

Movie Corning https://www.youtube.com/watch?v=v-Hd9kip1wA A brief future of UX


Слайд 25

What is UX and Why is it important?


Слайд 26

Everyday, everywhere we experience things


Слайд 27

We love talking about them


Слайд 28

So if we like talking about experiences and feelings so much why do we keep creating horrible experiences?


Слайд 29

We’re building something that needs to be used by someone


Слайд 30

How does it make people feel? How can we make their life easy? How can we add value to their life? How does it solve a user’s problem?


Слайд 31

Give your users control but not too much


Слайд 32

So what is UX?


Слайд 33

We want you to make the user experience pretty What UX is not


Слайд 34

What UX is not UX is not UI


Слайд 35

psychology anthropology architecture sociology computer science industrial design coginitive science communication design content strategy What UX is


Слайд 36


Слайд 37

Information Architecture Interaction Design Visual Design Foundation Function Emotion


Слайд 38

What a product does > form follows function How a product works > form follows psychology (of users)


Слайд 39

Easthetic design > does the button have the right texture and appeal? Functional design > does it trigger the right action? UX design > is it big enough, does it have the right location to other buttons? > Does it feel right?


Слайд 40

Thoughtful design doesn't just enable our habits; it pushes us to improve behavior, making us more economical, reflective, and responsible


Слайд 41

The best UX design is when everybody is involved IBM: 1 dollar in design is 100 dollar in development


Слайд 42

What is UX? “Experience design is the design of anything, independent of medium or across media, with human experience as an explicit outcome and human engagement as an explicit goal.” Jesse James Garrett “UX is the tangible design of a strategy that brings us to a solution” Erik Flowers


Слайд 43


Слайд 44

Why UX? “Good design brings a story closer to the people” Richard Turley


Слайд 45

Can you design UX? Experience is a subjective phenomenon that occurs within the mind of the individual


Слайд 46

So, if you aren’t designing experiences, then what exactly is user experience design?


Слайд 47

You can design for UX A good UX designer understands how people see the world A good UX designer understands how people all see the world differently A good UX designer has good soft skills He knows how not to let people feel stupid


Слайд 48

A good UX designer listens, tries to understand


Слайд 49

Good UX principles First impressions last


Слайд 50

Don’t ask too many questions before user can use the application Good UX principles


Слайд 51

Good UX principles Give users tiny surprises, regular updates


Слайд 52

Good UX principles Create for playfulness


Слайд 53

Good UX principles Hidden treasures


Слайд 54

Good UX principles There were smartphones before iPhone but Apple was the first one to create a good UX


Слайд 55

Good UX principles Innovate


Слайд 56

Good UX principles See the product in an ecosystem


Слайд 57

Good UX principles The most effective webpage online!


Слайд 58

UX for web applications


Слайд 59

Before companies had to have a website they couldn’t fall behind


Слайд 60


Слайд 61


Слайд 62

Adding functions and features increases the difficulty level of usage


Слайд 63

Saving users time saves company money Good UX


Слайд 64

Types of applications Brand presence Marketing Campaign Content source Task-based applications


Слайд 65

Brand presence Perception of a company brand Offer easy access to products or services


Слайд 66

Marketing Campaign Set focus within limited timeframe combined with other media targeted at groups Microsite


Слайд 67

Content Source Newssites, intranet, support centers Focus on presentation and structure of information


Слайд 68

Task-based applications


Слайд 69

Crossover projects E-commerce E-learning Social networking mobile


Слайд 70

Practical A project approach


Слайд 71

The lifecycle of a project Define Technology Strategy Formulation Discover Requirement Analysis Specification Design Architecture Design Documentation Develop Standards Best Practices Driven SDLC Deploy Production Operations Support


Слайд 72

What we’ll do - Capturing the project ecosystem Get to know the business & Business Requirements SWOT Analysis > Project objectives - Plan the project Project Approach: Methodology - Research & Test Task Models & User Journeys Customer Experience Map - Information Architecture Usability Testing Wireframing - Visual Design


Слайд 73

Project Folder Keynote / Powerpoint Description of company Personas photo’s of workshops Wireframes Mockups


Слайд 74

Team 1 LETS Leuven Trading website Team 2 Rockstar Energy Sales app


Слайд 75

Project team - business representative (CEO, IT manager,…) - product owner - project manager - business analyst - ux designer - developer CLIENT SUPPORT


Слайд 76

Part 1 Capturing the Project ecosystem: Business requirements


Слайд 77

Project kickoff


Слайд 78

Kickoff meeting Understand the company culture What project will we be working on? Why is the project important to the company? Know the people you’ll be working with Type of work you’ll be engaged in WHAT IS THE STRATEGY IN A LINE? WHAT ARE THE PROJECT OBJECTIVES?


Слайд 79

Project objectives help you: help you ask the right questions plan research with users details the ideas from stakeholders create effective interaction designs manage request for changes


Слайд 80

Workshop Business requirements > Know the problem before you create the solution 2. Must have functionalities/pages > Define must have functionalities or pages (home, login, catalog, forum,…) 3. SWOT analysis > Know the Strengths, Weaknesses, Opportunities and Threats of the product 4. What is the strategy? > Formulate in one sentence Understand the business Understand the product


Слайд 81

eg search form does not bring back all possible results


Слайд 82

Part 2 Plan the project


Слайд 83

Which way are we gonna go?


Слайд 84

Specify the must-haves and nice to haves within budget Define the deadlines and key points Create high level estimation Envision the scope Understand the scope


Слайд 85

Project approach Waterfall / Agile?


Слайд 86

Waterfall treats the steps of a project as separate, distinct phases approval of one is needed to continue on to the next - assumes that each phase can be completed with minimal changes to the phase before it > can throw off the plan! - more straightforward planning - better measure of process


Слайд 87

Waterfall approach


Слайд 88

WHEN WATERFALL? - the project is simple - the project is complicated, but you have the expertise to deliver it - it is all you know and you have no support for change - the upfront investment is not risky to make - you focus your performance measures on delivery date and budget


Слайд 89

Agile - Change is constant - Much more flexibility - More people-centric - Fast feedback from client - Focus on rapid collaboration - Less focus on detailed documentation - Working in sprints - Quickly produces working versions


Слайд 90

Agile Method


Слайд 91

- More complex, novel or urgent projects - You don't completely understand the value and definition of what you are building - There’s a budget for it - Whole team is very dedicated to project - Everybody is preferably in the same physical space WHEN AGILE?


Слайд 92

Agile Method


Слайд 93

Developers transition into Agile via Lean UX Less deliverables Less time and waste Quicker to market Build - Measure - Learn (Obligation to) Fail at start


Слайд 94


Слайд 95

Part 3 Research & Test: User Requirements


Слайд 96

Let’s start designing


Слайд 97

FOCUS ON USER


Слайд 98

Design in context Information design principles


Слайд 99

Design with user in mind Information design principles


Слайд 100

Keep it simple Information design principles


Слайд 101

Don’t forget to design for edge cases Information design principles https://www.youtube.com/watch?v=4m2YT-PIkEc


Слайд 102

Use analytics Research


Слайд 103

Recreates DOM and its mutations > so shows how browser and website were behaving at that time https://www.fullstory.com/


Слайд 104

Competitors all use a certain approach: > should you deviate from this? > recognize design patterns > evaluate other sectors as well Competitor benchmarking


Слайд 105

Different forms of user testing: - Guerrilla testing - Stakeholder interview - Contextual research - Call center listening, email reading,… - customer surveys - … User Testing


Слайд 106

- Must meet your user group - Information based on research - Can never replace real user testing Personas


Слайд 107

User Journeys - Set the context Where is the user? What is around him? - Progression: how does each step enable him to get to the next? - Device: what device is he using? Is he/she a novice, expert - Functionality: what type of functionality does he/she expect? is it achievable? - Emotion: what is their emotional state in each step? is he/she engaged, bored, annoyed


Слайд 108

User Journey


Слайд 109

Task Models - Description of activities a user needs to perform in order to reach their goal - Helps you understand how your users interact with information provided by the product - Can help you choose features for a widget (eg comparison table, sharing widget,…) - Can help you decide: eg is the widget handy here in the task flow or elsewhere? - Helps you understand how users think about the task at hand


Слайд 110

Task Models


Слайд 111

Workshop User needs & requirements > Brainstorm over possible user requirements? 2. User stories > Define user stories (as a user i want to…, so i…) Understand the user


Слайд 112

Customer experience map


Слайд 113

Part 4 Information Architecture & Conceptualization


Слайд 114

Start building


Слайд 115

Design Tools


Слайд 116

- IA should solve information overload - IA is commercially important > how well a user finds the product or service - Makes SEO easier - Will result in site map or navigation What is Information Architecture?


Слайд 117

Sitemap or Navigation Techniques: Card Sorting Mindmap Tools: optimalsort.com websort.com


Слайд 118

Specify the templates: what pages will you be needing? Order them in rank of prioritisation Prioritize Pages


Слайд 119

Sketch!


Слайд 120


Слайд 121

Workshop Create sketched wireframes 2. Create Sitemap Envision the product


Слайд 122

Wireframes


Слайд 123

Principles of wireframes Don’t spend too much time with makeup


Слайд 124

Principles of wireframes Use consistent terminology


Слайд 125

Principles of wireframes You can provide annotations Why men need postits!


Слайд 126

Principles of wireframes Test them! > usability testing


Слайд 127

Prototypes - Interactive wireframes - Ideal for testing - Fail first and fail early!


Слайд 128

Workshop Create wireframes Design the product


Слайд 129

Usability Testing - Let users perform tasks on an existing website - Write down quotes or remarks from users on sticky notes


Слайд 130

Usability Testing - Develop a test plan - Choose participants - Analyze data remote tools: usertesting.com


Слайд 131

Workshop Define user tasks Usability testing Analyze data Test the product


Слайд 132

Part 5 Visual Design


Слайд 133

Start playing with makeup!


Слайд 134

Design Tools


Слайд 135

Visual design principles Innovate in content and proposition Imitate in patterns and conventions


Слайд 136

Visual design principles Avoid using Lorem ipsum use real content if possible


Слайд 137

Visual design principles Strip out as much as you can


Слайд 138

Visual design principles Design with fingers in mind


Слайд 139

Visual design principles Maintain a pixel-perfect mentality


Слайд 140

Design elements Navigation - Use proper labels see Google Adwords Keyword tool www.adwords.google.com - Click here > mistake: you should always now where navigation is taking you - Try to make navigation scalable if info is added later


Слайд 141

- Keep it lightweight, no overkill with content most users don’t see it, they arrive at other pages - Should convey easily what we do or offer - What is the key task? put this on the homepage - Logged in and logged out states (cfr Flickr) - Homepage should inspire - Should show that it’s regularly updated (eg new products, dates, facebook likes) Design elements Homepage


Слайд 142

Show photos of how something is used, how it would look in your world Design elements Images


Слайд 143

Pictures say more than words Design elements Images


Слайд 144

Use authentic images not stock photos Design elements Images


Слайд 145

Mobile first Luke Wroblewski - Mobile Usage is explosive - Screen real estate forces you to think about the essence native capabilities of the devices - New strategy New way of writing code Before we design a word on…


Слайд 146

Website that looks great on all devices Responsive flexible grids flexible images mediaqueries conditional loading modernizr Adaptive better because same url but different structure


Слайд 147

Graceful degradation vs progressive enhancement


Слайд 148

Visual Design Photoshop or Illustrator?


Слайд 149

Design in Photoshop - Design with finger in mind - Create sharp images http://dcurt.is/pixel-fitting - Align to edges - Organize and name layers - Use vector shapes - Don’t just rescale - Don’t color manage document


Слайд 150

Workshop Create mockups Design the product


Слайд 151

Part 6 Exporting for development


Слайд 152

Exporting for development - Create pixel perfect assets - Align to grid - Export in different pixel dimensions (for mobile use)


Слайд 153

Slices pngexpress http://www.cutandslice.me Exporting Tools


Слайд 154

Wireframing & Prototyping Axure Invision Sketch Proto.io Tools Visual Design Photoshop Illustrator Sketch


Слайд 155

Tips & Inspiration Dribbble Pttrns Pinterest Behance Fontastic Flat icons Freebeegoodies Teehan Lax


Слайд 156

Templates iPhone 5 templates pixeden.com http://www.teehanlax.com/tools/iphone/ http://www.teehanlax.com/tools/ipad/


Слайд 157

Grids 960 grid system http://960.gs/ iPhone 5 grid edwardsanchez.me/blog


Слайд 158

Tumblr Pinterest airBnB Yahoo weather app Best practices


Слайд 159

Interesting Reading Smashing UX Design: Foundations for Designing Online User Experiences 100 Things Every Designer Needs to Know About People (Voices that Matter) Simple and Usable: Web, Mobile, and Interaction Design A Project Guide to UX Design: For user experience designers in the field or in the making User Experience Innovation: User Centered Design that Works Smashing Magazine A List Apart Flipboard UX Magazine


Слайд 160

Thanks!


×

HTML:





Ссылка: