Placeholder Image

字幕列表 影片播放

  • KENT: Hello everyone, and welcome to our April

  • webinar "Intro To User Experience Design:

  • Rethinking the Design Process".

  • Today, I am happy to introduce to you one of

  • the Cardinal Path UX team members,

  • also known as a major force in the

  • Cardinal Path design team, Mike Jones.

  • Mike is based out of our Phoenix

  • office where he works closely with

  • both internal teams and with clients to ensure striking and,

  • more importantly, effective design.

  • For those of you who have not attended a

  • Cardinal Path webinar yet,

  • though looking through the attendee list

  • it looks like most of you have,

  • my name is Kent

  • and I will be sitting in on this presentation and taking

  • any questions asked in the GoToMeeting's

  • question pane in the

  • overall GoToMeeting panel.

  • Then, at the end of this webinar,

  • I will feed these back to Mike

  • and we will see if we can answer as

  • many of them as we can.

  • So, without further ado... Mike

  • take this away.

  • MIKE: Hi everybody, this is Mike Jones.

  • We'll be doing an intro to user experience design

  • webinar this morning

  • hopefully you guys find it

  • helpful

  • and engaging.

  • uh

  • Real quick, just a couple of

  • things about me.

  • As Kent already mentioned, I'm a UX

  • and user interface designer here at Cardinal Path.

  • Those are some of my contact handles

  • if you want to reach out to me after the webinar,

  • that would be awesome and I can answer any

  • further questions you guys might have.

  • There will be another slide at

  • the end so you guys can get that info.

  • So, we'll jump right in.

  • Three main things we are going to cover today are:

  • What is user experience, or UX

  • and why should we care?

  • Secondly is

  • websites and UX.

  • So, how does user experience

  • deal with websites and website design.

  • And finally, breaking down UX into five planes.

  • We will get into that in a little bit.

  • We'll start with "What is User Experience?"

  • Or UX.

  • As you'll see in the industry,

  • UX is generally the term or the

  • acronym you'll see most for "User Experience".

  • So, what is user experience?

  • Seems like everyone is throwing this

  • word around right now, I see it

  • all over

  • blogs, and not just design blogs,

  • but also

  • blogs centered around

  • business and start ups

  • centered around

  • big companies like Apple.

  • Apple's been a huge

  • force in bringing

  • user experience to the

  • forefront of business.

  • But what is it?

  • What the heck is this term

  • people are throwing around?

  • I thought

  • a good place to start is the

  • all-knowing Wikipedia.

  • Because they're the source

  • of everything useful.

  • </sarcasm>

  • But actually, in this case,

  • it's pretty relevant.

  • I thought their explanation, they're

  • synopsis of User Experience was really helpful.

  • Basically, they said,

  • "User Experience, or UX,

  • is the way a person

  • feels about using a product,

  • system or service."

  • I think that sums it up

  • pretty well.

  • So,

  • basically,

  • what we want to say

  • user experience is

  • is "UX equals Feelings".

  • How people feel about

  • using whatever it is you are putting in front of them.

  • Let's break this down a little bit.

  • before we jump into

  • the design of UX.

  • I want to make sure we understand

  • user experience and what goes into that.

  • First up is

  • let's break down a user.

  • Ultimately, a user is a person.

  • So, it's a real human being.

  • They have

  • dreams

  • They have goals.

  • They have thoughts and desires.

  • And ultimately, when they

  • use something they're

  • generally doing it with

  • something in mind that

  • they want to accomplish at the end of it.

  • Whether that's a product,

  • or a website

  • or some service that you provide,

  • that has a user at some level.

  • And these users

  • are people, so they're

  • emotional, they have feelings.

  • And ultimately, it's these

  • feelings about your product that

  • become the user experience.

  • Everyday we make decisions,

  • based on how we feel.

  • So, the decisions that people make

  • about your product

  • or the final conclusion

  • they make about your website

  • are generally based on what they feel

  • and not so much

  • based on

  • what we like to think of as

  • the very logical steps of

  • did they accomplish exactly what

  • they were looking to do.

  • That's a big part of it

  • but

  • ultimately, it's feelings and emotions that

  • build that user experience.

  • And finally,

  • it's about experience,

  • it's about using something.

  • Ultimately, it's about accomplishing a goal.

  • So, when we talk about users

  • who have feelings,

  • when they're using something like

  • your product or your service,

  • ultimately,

  • they're trying to accomplish something

  • at the end of that.

  • So, we'll talk more about that in a minute.

  • A great example is

  • making a phone call

  • and making a reservation at a restaurant.

  • So, the user in this case is

  • someone making a phone call.

  • And ultimately their goal or their desire is to

  • book a reservation.

  • But there's a lot of things that

  • go into that experience, such as:

  • the phone they're using,

  • or

  • how the person answers the call

  • on the other end,

  • and then that whole conversation,

  • that experience with that other person,

  • all comes together to build the user experience.

  • All in the blink of,

  • you know, 5 minutes at the most.

  • Another example might be

  • a day trader, someone who trades stock all day.

  • A lot of these people do that online

  • and

  • they're using a system

  • that's built. They're using a

  • product that's built

  • for doing just that.

  • And they're using it all day, so

  • 8, 10, maybe even 16 hours a day,

  • they're sitting in front of a computer,

  • trading stocks.

  • What kind of user experience are they

  • building over that

  • 8, 10, 16 hour block of time?

  • That's a lot of time to be using

  • a system or a product

  • and so, over the course of that amount of time they're

  • building up a lot of emotion about it.

  • Either they're building a lot of positive emotion

  • or they're building a lot of negative emotion

  • as they continue to run into

  • frustrations or

  • hiccups or

  • things that they just

  • don't really like.

  • So, I want to kind of give a little

  • example of user experience

  • and a little story.

  • So, this is a story about getting a flat tire.

  • So, you're going to put yourself

  • in someone else's shoes

  • for just a moment.

  • So, pretend that you have

  • a big presentation at work.

  • and you really want to "Wow"

  • your boss and the client.

  • And so you

  • you get up early, you get ready,

  • you jump in the car,

  • in this case you have

  • a car and will drive to work,

  • so, you're not mass commuting

  • and saving the environment

  • and all that fun stuff.

  • So, you're going to hop into your car

  • and drive to work.

  • And on your way there, you get a flat tire.

  • And

  • the great thing about

  • getting a flat tire this day is you

  • have never changed a flat tire in your life.

  • So, you've never done it before,

  • don't really know how it works,

  • maybe understand a bit of the gist but

  • for the most part, you're pretty clueless.

  • So, you do what everybody does,

  • you grab the owner's manual, right?

  • And, you open it up

  • and you find the index and you look up,

  • "How to change my tire."

  • And there are some instructions in there about

  • where to put the jack and how to do it, so you

  • grab everything out of the trunk and

  • you get the jack set up and do everything.

  • And as you are jacking the car up

  • it doesn't work,

  • and the car actually falls

  • and it falls on the jack weird and

  • it breaks something.

  • The next thing you know, you're sitting

  • 3 hours on the side of the road

  • waiting for a tow truck

  • He's got to tow your car,

  • find out you've got hundreds of dollars in repairs,

  • you've lost all this time,

  • you missed your big presentation,

  • and you're really frustrated.

  • All because

  • the owner's manual

  • told you to do something that wasn't right

  • for that car.

  • So, what do you do?

  • You're obviously really frustrated and angry.

  • And you pretty much make

  • a decision you're never going to

  • buy a car of that brand ever again.

  • And don't use the Honda example in the picture

  • as gospel here, I'm a huge Honda fan,

  • So, not saying this happened to me or

  • this is a problem with Honda's [EVIL LAUGH]

  • just, it was an easy image to grab.

  • But not only are you frustrated about

  • brands, but you also go and tell

  • all your friends about your

  • horrible experience you had.

  • And you tell them about how

  • when you opened up the owner's manual,

  • it told you one thing,

  • and it totally didn't work.

  • and even though you were inexperienced,

  • and you never changed a tire before,

  • you expected the owner's manual to tell you what to do.

  • And you expected it to tell you what to do

  • in a way that would protect your car.

  • And not only did you tell all your friends,

  • you decided to go online

  • go to a couple forums,

  • go to a couple review sites,

  • and write some pretty nasty words.

  • So, this is a great example of

  • a negative user experience.

  • And this long story,

  • at the end of the day, the user is you,

  • a person who is trying to get

  • to work, on time.

  • And you've got a big presentation,

  • so there's a lot of emotion involved.

  • And at the end of the day, the product,

  • you felt like the product failed you.

  • And regardless of the reasons

  • why the product failed you,

  • in your mind, it did.

  • And, so, when we talk about users,

  • we want to make sure that we're always looking

  • through their lens,

  • their eyes and what they see.

  • How they're interacting with your

  • product, service or website.

  • So, that's a negative example.

  • Probably good to have a positive example

  • just to

  • make sure we're

  • balancing everything out.

  • This is actually a personal story

  • Moocards.com

  • I don't know if anyone is familiar with that,

  • but it's a great little site.

  • Basically, they sell business cards.

  • They have a couple other products but

  • primarily business cards.

  • So, a couple years ago,

  • I got an offer

  • to come to MooCards.com

  • and get some free business cards.

  • I never really heard of them before and

  • thought, man, I may as well check it out.

  • So, I come to the site,

  • it's really nice, it's clean,

  • easy,

  • easy to see what's going on and

  • find what I'm looking for.

  • I find the business cards in the

  • dropdown menu and I head over to it.

  • I start looking at the product

  • and what they offer and what's different about it,

  • and, you know, another online print shop,

  • I find out that I can

  • customize my design, I can even

  • upload a bunch of my own

  • photography, or my own images,

  • and it'll randomly

  • print them on the back of the cards

  • in a random order,

  • and I was like, "That's really cool,"

  • a nice extra I wasn't expecting when I got there.

  • So, I go ahead and like,

  • "Well, it's free, so I might as well do it,

  • I'll get 50 free business cards."

  • And, uh, so I

  • go and

  • go through the order and

  • it's real easy and I upload my

  • photos and that's really easy and I

  • get to the order form

  • now I can check out,

  • pay with a credit card,

  • I can put my shipping information,

  • and off it goes.

  • and about 30 minutes later,

  • I get an auto-email

  • as expected to confirm that my order went through.

  • And what was cool and what I wasn't expecting

  • was that

  • that actually came from

  • an email address they set up called LittleMoo

  • the print robot.

  • So, they created this little character who

  • sends out all their automated emails

  • that

  • provided some personality

  • to this straight mechanical automated robotic

  • auto-email type system.

  • Something I think most humans kind of go "ugh"

  • another auto-email, I know this is just

  • from their system, it's not even

  • a person on the other end and they went

  • "You're right, it's not,

  • so we're going to make a little character

  • and pretend their is some identity behind him.

  • That was pretty cool, I liked that.

  • And then, when I finally got the product,

  • And you'll see there's a little

  • image there, that's not the

  • the final product I got,

  • that was one I grabbed online,

  • same exact experience though,

  • I got this cool little box,

  • it was nicely wrapped,

  • this outer design thing, and then inside it said,

  • Yay, youíre our new best friend

  • So, hereís a little congratulations

  • for a new customer relationship

  • that they have with me.

  • Theyíre excited,

  • Iím kind of excited, I check it out,

  • cards look great,

  • feel great,

  • product is really nice.

  • So, overall, I had a really great experience

  • and that actually led to me

  • continue to order business cards from them

  • for, like, the next couple years.

  • I still have a bunch of them sitting at home.

  • I still hand them out.

  • So, hereís a great example of a

  • positive user experience

  • specifically with a website.

  • And how all these little touch points that we have

  • with the user, in this case

  • MooCards.com is thinking about

  • not just the design,

  • not just the copy,

  • but what are those little things that they can do

  • to add a little personality

  • to add a little bit extra

  • to create this great, wonderful,

  • exciting, fun,

  • user experience.

  • So, why should we care about user experience?

  • I think we kind of already know but

  • ll say it anyway,

  • ìUser Experience

  • builds brand loyalty, if you do it well

  • If you have users who are having

  • great experiences on your website

  • or with your product,

  • theyíre going to want to continue to come back,

  • theyíre going to want to tell other people about it,

  • and most of the time, theyíre going to

  • continue being a great customer of yours.

  • And thatís exactly what you want.

  • Thatís business done well.

  • When we have returning customers and people who

  • want to continue to use our

  • products, thatís

  • a great sign that

  • we are doing things well and that

  • we have a healthy business

  • or providing something very useful.

  • Throwing up a couple logos

  • just because I can, obviously

  • Appleís a big one.

  • Theyíve really defined user experience

  • as a core part of

  • everything that they do.

  • From every little touch point of their product,

  • Steve Jobs always had a great saying about

  • ìUser experience is not just the design,

  • itís how the product is actually built

  • So, they incorporate user experience

  • principles all the way down to the

  • engineering and manufacturing

  • of their products.

  • And you got Nike, another

  • great example of

  • a user experience centered company.

  • Iíd highly encourage you guys

  • to go and check out some of the little apps.

  • Theyíve got some great apps for iPhone and Android

  • for athletics and running.

  • Lots of cool stuff going on over at Nike.

  • Mini Cooper

  • this is kind of an

  • interesting niche brand. I know

  • most people donít own a Mini

  • donít really see a Mini cooper a lot of times but

  • ve got some good friends who are involved

  • in the Mini Cooper

  • realm of users,

  • customers,

  • and theyíve built

  • really really

  • great brand loyalty

  • with their products.

  • And a lot of it comes down to

  • the user experience

  • of not only their cars,

  • but how they sell their cars,

  • and that whole process of

  • going and checking it out,

  • ordering your car,

  • customizing it,

  • tons of options,

  • highly recommend

  • checking them out,

  • following them to kind of see

  • more of how a business

  • thinks about user experience

  • through the whole process of a product.

  • So, moving on,

  • we want to talk specifically

  • today about

  • websites and user experience.

  • So, weíve kind of got the big general

  • ìWhat is user experience

  • and we saw examples

  • of how that works with the product,

  • but we really want to nail down

  • what are we talking about with websites.

  • Ultimately,

  • most of us work in the web industry

  • we run sites,

  • or have clients who run sites,

  • and this is where we really need to

  • be on our (?) to user experience.

  • So, websites and UX.

  • Websites are not just text anymore.

  • They are really becoming applications and

  • anyone who has worked with any

  • cus.. excuse me, anyone who

  • has run a site thatís

  • you know, sells product,

  • online is really starting to understand this

  • Thereís lots of sites out there

  • that provide content

  • but even at that, thereís a lot

  • of interaction with users,

  • functionality thatís

  • becoming more and more application like.

  • And so

  • because of this

  • we really need to start thinking

  • more and more about

  • user experience

  • when weíre designing or

  • planning or building websites.

  • So, a great place to start is

  • how do we break down

  • user experience at websites, in particular.

  • So,

  • users have

  • lots of experiences with their websites,

  • positive and negative

  • and a lot of them are affected by

  • a whole bunch of different elements

  • and different reasons

  • why they have a positive or negative experience.

  • I am going to list out a few

  • so bear with me.

  • One

  • great one

  • Itís always

  • think should be at the forefront of your mind

  • and when youíre thinking about your website is

  • ìWas the user able to

  • accomplish what they came to do

  • Thereís a lot hidden in that little

  • phrase but were they able

  • to accomplish what they came to do?

  • Weíll talk more about that in a minute.

  • Did they find what they were looking for?

  • So, when they came to the site, did they

  • find what they were expecting to find?

  • Did they find more than they were looking for,

  • in a good way?

  • So, maybe you provided more information

  • or more features or

  • more options than they were expecting,

  • and they found that really helpful.

  • Did they find what they were looking for easily?

  • So, easy to find.

  • Or was it, at least

  • easier than other

  • sites or products they have used?

  • Or was it really hard to find?

  • Or maybe the process of

  • getting what they wanted was

  • really long and laborious.

  • They felt like

  • that was way too many

  • steps for what I was trying to accomplish.

  • Was your

  • site a new experience for them?

  • And this can be both

  • positive and negative.

  • Sometimes, people might

  • enjoy a new experience.

  • Or other might be like

  • mmm, that was too different for me.

  • That was

  • outside of the box

  • and I didnít really understand what

  • what was going on.

  • This is where really understanding

  • who your users are

  • and what they like

  • is great for understanding

  • how to build a website

  • that really caters to them.

  • Maybe youíve designed and

  • built a website thatís

  • pleasantly familiar and comfortable.

  • A visit is really easy for them because

  • it feels like

  • theyíve been here before,

  • even if theyíve never been there.

  • They know exactly what theyíre looking for,

  • how to find it.

  • Things make sense.

  • Does your site

  • stand out from other sites

  • that these users have been to?

  • So,

  • a great, you know,

  • thing to be thinking about is

  • does your site

  • differentiate?

  • Are there tons of other sites that

  • look and feel

  • act and

  • have the same exact

  • thing that your site

  • has and a user comes to your site and goes

  • ìIím not really sure

  • if Iím where Iím supposed to be

  • Or

  • ìThis really isnít

  • any different than that other site

  • that I always use,

  • so why should I

  • continue using this one

  • And thereís a whole bunch

  • more of these and actually

  • ve got a whole bunch

  • more, maybe some timell

  • throw these into a blog post and we can

  • continue the conversation on that.

  • For the sake of time, I going to

  • Iím going to move on.

  • So,

  • how can we provide user experiences

  • that are both effective

  • and delightful

  • when there are so many

  • elements involved

  • in the user experience?

  • A great place to start

  • is to break down the user

  • experience of a website

  • into bigger chunks.

  • or as weíre going to call them today

  • îPlanes of UX

  • ìFive Planes of UX

  • And these are:

  • Strategy,

  • Scope,

  • Structure,

  • Skeleton,

  • and Surface.

  • Andll be flat out with you guys,

  • I did not come up with these names,

  • or the structure,

  • I totally ripped this from another

  • guy, Jesse James Garrett.

  • He wrote a book called the

  • ìElements of User Experienceî

  • and I highly recommend you check that out,

  • if you get a chance.

  • He wrote this book in 2000.

  • and heís got some great insight

  • into how to break down UX.

  • And he breaks down UX into these 5

  • components: Strategy, Scope,

  • Structure, Skeleton, Surface.

  • And today I am going to break those

  • down a little bit further.

  • Give us a little more information about them.

  • And hopefully make it all make sense.

  • So, some important

  • points as weíre talking about these,

  • and as you see in the little diagram,

  • again, ripped right from his book,

  • and I promise Iím not

  • ripping everything from his books,

  • plenty of original content in here,

  • but I thought this diagram was too good

  • Strategies at the bottom

  • itís really the foundation

  • of everything you and then you

  • build on that from there.

  • And because of that

  • you canít skip around and leave stuff out.

  • It just doesnít work that way.

  • Itís really important that you

  • start with Strategy,

  • and you move your way

  • your way upwards

  • all the way through to Surface.

  • And these are also going to move from

  • abstract concretes.

  • When youíre working through the Strategy plane

  • youíre probably going to

  • feel a little bit out of

  • your element if

  • youíre not used to working

  • in an abstract thought.

  • But know that

  • as you continue to work

  • up that chain

  • start building on Strategy

  • building on Scope,

  • building on Structure,

  • things are going to

  • become more and more solid.

  • Youíre going to feel like

  • your ideas are more concrete, as you move up.

  • And thatís a good thing.

  • The abstract thought

  • that you start with

  • in the Strategy plane

  • is really important for

  • defining and creating

  • really concrete designs

  • and user experiences

  • that make sense.

  • That said,

  • each of these planes is going to

  • overlap a little bit into the next.

  • Itís not like youíre going to finish Strategy

  • completely wrap it up

  • tie a little bow on it

  • and then move on to Scope.

  • The reality is

  • as you work through Strategy, you

  • will begin to creep into Scope,

  • and as you work through Scope,

  • youíre going to creep into Structure.

  • And thatís great.

  • Each of these has a little bit

  • of fluidity to it, and thatís great.

  • So, letís break these down.

  • First up is Strategy.

  • So,

  • what do we mean when we say

  • Strategy?

  • The word gets tossed around a lot.

  • I see it everywhere,

  • and it really just means

  • ìWhatís the goal?

  • Whatís the purpose?

  • Whatís the big Why for your website

  • And this is where itís really

  • important that we start with users.

  • What are maybe the one

  • two or

  • three core

  • things that your users want

  • to get out of your site?

  • What is the desire or

  • goal that theyíre trying to accomplish

  • that your site is going to meet for them.

  • And in turn, what are the ones

  • two, or maybe three things that

  • you and your business

  • want your site to accomplish.

  • So what do users want

  • and what do you want?

  • Hopefully, at the end of the day, what

  • they want and what you want match up.

  • So,

  • a great example

  • and weíll actually look a little bit more at

  • Amazon in a little bit, but

  • Amazon sells books.

  • So, ultimately their

  • big why, their

  • big goal, their

  • big purpose is to sell books.

  • So, hopefully theyíre

  • users want to

  • buy books.

  • So, if we flip that around and we say

  • ìMy users want to buy books,

  • and I want to sell books,

  • that sounds like a great match

  • And that sounds like

  • you have a great start

  • to a successful website.

  • So, what does Strategy do?

  • Ultimately, it provides

  • focus and foundation.

  • Itís going to inform

  • every decision you make

  • after it, so when

  • all those other

  • planes that follow

  • your Strategy is what youíre

  • always going to be

  • coming back to you and saying

  • ìDoes this

  • meet that end goal of our users

  • Does this meet that

  • end goal of our business?

  • Hopefully, those two things match up.

  • If they donít,

  • you probably need to rethink things.

  • If your users want

  • something that your siteís not

  • providing, you either need

  • to change what your siteís

  • providing, the big Why, the big Goal,

  • or you might need

  • to find different users.

  • So,

  • thatís part of that whole strategy, is

  • really figuring out who your users are,

  • the big Why,

  • and focusing on all of that.

  • So, letís move into Scope.

  • Weíre going through these quickly,

  • Hopefully, there will be some more opportunities

  • in the future to really delve

  • deeper into these 5

  • planes of UX.

  • Thereís a lot to unpack in each of these.

  • but for now, weíre just going to do

  • quick overviews, so,

  • moving on to Scope.

  • Simply put, this is

  • the list of things users

  • should be able to accomplish on your site.

  • So, all the tasks,

  • or all the userís stories.

  • What are all those little things that

  • get the user to the final goal of

  • what they really want out of your site.

  • So,

  • buying books

  • is a great example.

  • What are all those things

  • that are going to lead up

  • to them buying books?

  • What are the extra things that

  • you might want to tack onto that

  • to provide

  • for what your business needs out of it?

  • Hopefully, selling more books.

  • So, a great example

  • talking about books, letís talk about Amazon.

  • So,

  • strategic goal, we already talked about this,

  • Amazonís probably their big

  • strategic goal, Iím guessing here,

  • I donít actually work for Amazon,

  • but Iím pretty sure this is

  • one of them

  • is to satisfy userís

  • desire to buy books.

  • So, what are all the ways that

  • theyíre going to do this?

  • Well, hereís a short little

  • user story to kind of give you an example.

  • So,

  • users can search for books

  • and be provided best matches of books

  • based on their search keywords.

  • That makes sense.

  • I want to buy a book,

  • ve got to find the book first.

  • So, letís give them a way to find it.

  • Theyíll be able to search by author,

  • title, ISBN, maybe some other things.

  • Thatís all part of that task.

  • And then,

  • as Amazon.com,

  • weíre going to provide

  • some extra information about

  • the book when they find it.

  • So, maybe theyíll be able to

  • view the cover artwork,

  • maybe read some reviews,

  • see a synopsis,

  • and actually if you check

  • Amazon.com,

  • Iím sure you all have been there,

  • and you click on any product,

  • but especially books,

  • thereís tons of extra

  • information that they provide.

  • So, theyíve really built out that task

  • and really said, ìWe want to make

  • sure that our users have

  • a lot

  • of different options of content to be

  • engaged with

  • when they find the book they are looking for.

  • And then, moving on,

  • they can save them to a cart

  • for later purchasing, so they can

  • continue to search,

  • add books to their cart,

  • thatís a great user task.

  • And then they might even be able to see

  • related books,

  • when you kind of have to go

  • ìHow are they related, like,

  • how do we determine what

  • other books to show them based on something

  • they have already looked at or

  • already put in their shopping cart?

  • Well, maybe itís based on

  • all the other users on our site.

  • So, as Amazon.com,

  • theyíre tracking what people are looking at,

  • what people are putting in their shopping cart,

  • and theyíre saying,

  • ìHey,

  • you, you just looked at this book,

  • why donít you check out some of these other

  • books that a lot of our other users have looked at

  • who also looked at the book that you saw

  • Itís a great example of adding some

  • an extra feature, an extra task,

  • that a user might find really helpful

  • in the process of buying a book.

  • And then, moving on from there, obviously

  • being able to checkout,

  • pay with a credit card,

  • and get an estimate for shipping,

  • those are all additional user stories,

  • user tasks,

  • that

  • can all be part of that

  • that long string of

  • that user going from

  • I come to your site

  • and now Iím going to accomplish

  • the goal that I came to do.

  • Thatís all part of that big Scope.

  • tsk

  • Sorry, there we go...

  • So, the next one is Structure.

  • So, weíve talked about Strategy,

  • talked about Scope.

  • Now, weíre getting a little bit

  • finer, weíre going to talk about

  • the Structure of our site.

  • What do we mean by Structure?

  • Well, you kind of need a plan for how

  • those users are going to

  • flow through your site.

  • So, ultimately, Structure is talking about

  • the flow of your site.

  • So, as a user,

  • how do I find what Iím looking for,

  • whatís the flow of actions

  • or interactions that Iím going to take on the site?

  • A great way to visualize this

  • is mind maps or flowcharts.

  • Couple examples here,

  • the one on the left

  • is more of a content oriented site,

  • thereís not a lot of

  • everythingís pretty much just

  • a static screen for the most part, itís just

  • content on pages.

  • We want to organize that

  • in a way that makes a lot of sense.

  • Maybe provide some categories

  • for different sections.

  • how are those categories related to one another.

  • And a mind map or some kind of

  • chart like that usually makes

  • that very easy to visualize

  • and really helps as you continue to move

  • through the 5 planes of user experience.

  • The one on the right is more of a flowchart.

  • So, itís kind of, what are the interactions

  • that a user is going to take,

  • so they might click on the curiousity button,

  • and then they have some options

  • and then they have

  • more options that they can choose

  • from, and then whatís going to be provided

  • if they click yes versus if they click no.

  • Kind of just the whole flow of your site

  • or the different functionalities within your site.

  • It doesnít really matter what you end up

  • using or what tool you use,

  • the more important thing is you are really

  • thinking these things through

  • in a very logical manner

  • and youíre thinking through as

  • as much detail as you possibly can.

  • You can spend a lot of time on the Scope,

  • or excuse me, the Structure phase,

  • and thatís really important.

  • Itís really important to solidify these things

  • before you move on to the next planes

  • of user experience.

  • The next one being Skeleton.

  • So, weíve figured out the Strategy,

  • figured out the big Why, big Goal,

  • and weíve figured out the Scope,

  • figured out what are all the functionality that

  • weíre going to allow our users to have.

  • And weíve kind of figured out a

  • flow of our site.

  • And so the next thing is the

  • first kind of visual element

  • of our site.

  • And thatís

  • wireframes, itís like the layout of sites.

  • What are all the elements

  • that are going to go on each of these

  • pages or each of these

  • views that the user is going to see?

  • What images are they going to see?

  • What copy are they going to see?

  • Where is that button going to go?

  • Is there going to be a call to action?

  • Where is that going to go?

  • A great way to visualize this

  • is with wireframes.

  • This can be as simple as a little

  • sketch in a sketch book.

  • I actually use those a lot.

  • Theyíre really nice, just really quick

  • quick and dirty explanations of

  • how a user is going to

  • see and visualize the site.

  • Where things are going to go,

  • how we communicate effectively.

  • The one on the right

  • is a little bit more fleshed out.

  • Obviously, itís been rendered in some kind of

  • computer graphics program.

  • You can still tell itís not focused on

  • the aesthetics of the site,

  • itís focused on just layout.

  • Where things are going to go,

  • whatís going to have the most emphasis,

  • things that are dark

  • versus whatís going to have less emphasis,

  • things that are light.

  • What content is going to be on the site?

  • Ultimately, the Skeleton stage is

  • all about creating

  • kind of a package from which you can build out

  • the skin, or the visual aesthetics, of your site.

  • And it also ensures that youíre

  • creating a site that communicates really well.

  • That things are clearly

  • defined of where theyíre going to be

  • so the user has a very logical and

  • pleasant experience as they work through your site.

  • And that leads us to the last

  • plane of user experience,

  • and thatís Surface.

  • Basically, Surface is the interface.

  • Itís the visual elements,

  • itís the copywriting,

  • itís the eye candy that the user is

  • going to experience as they

  • are on your site.

  • I kind of like to think of it as

  • the packaging of your site,

  • if your site was a product.

  • As they

  • play with your site,

  • theyíre going to open it up,

  • theyíre going to play with the packaging,

  • and even beyond that,

  • theyíre going to actually play with your product,

  • if your website is your product,

  • and theyíre going to touch it, theyíre going to feel it.

  • So, itís really important to be thinking through like

  • the copywriting on your site,

  • is it engaging?

  • Does it

  • really speak to the user?

  • This is where itís really important to understand

  • who your users are.

  • People communicate in different ways.

  • Great example, a really simple one,

  • I think weíd all be like, Ugh,

  • duh, thatís an easy one, but

  • do your users speak English,

  • or do they speak Spanish?

  • If they primarily speak English,

  • itís probably a good idea to have your site in English.

  • And if they primarily speak Spanish,

  • itís probably a good idea to have a site

  • thatís built with Spanish.

  • Or at least give them the option

  • to switch back and forth

  • because maybe your users are multi-lingual.

  • But it could be even more specific

  • in that you could be looking at users who

  • maybe theyíre an older generation,

  • and so

  • if you throw around a bunch of slang terms,

  • that are really catchy with

  • people in their teens,

  • then you might have a hard time engaging

  • people of an older generation

  • who donít really

  • understand what you mean,

  • or find that maybe that slang term is

  • maybe a little offensive or

  • maybe it just doesnít resonate with them.

  • Same thing with a lot of

  • business sites that I see.

  • A lot of them write copy

  • thatís industry related.

  • So, theyíll use catchy

  • industry related terms

  • or theyíll use an abbreviation

  • thatís familiar within their industry

  • and

  • thatís great if youíre talking to your competitors

  • but

  • a lot of times

  • businesses are not

  • talking with people who are familiar with

  • all the industry jargon

  • within your industry.

  • And so,

  • they might find that actually kind of off-putting, like

  • ìMan, youíre using all these

  • words and I have no idea what they mean.

  • And, not only do I not know what they mean, but

  • you havenít really given me anyway to figure out

  • what they mean

  • So,

  • no definitions,

  • so if you are going to use industry jargon like that,

  • great idea is

  • to at least provide some explanation.

  • Donít assume that your user understands

  • all the terminology

  • and vocabulary that

  • you would normally use in your everyday life.

  • Again, it all comes back to the user.

  • Who is your user?

  • How do you build an experience that

  • really resonates with them?

  • Moving on from copy,

  • you can also talk about design.

  • And thatís going to be everything from

  • typography, like

  • what fonts do you use,

  • is it going to be big or small,

  • are you going to use bold or

  • italics to emphasize certain things?

  • Building some typographical Structure

  • for your site.

  • Iím just going to include what images

  • maybe you have specific styles for your images,

  • I love this example on the right.

  • This is a

  • to be honest, I donít remember what site this was,

  • oh, itís the eyeglasses,

  • ya, so their product

  • is eyeglasses, theyíre trying to sell eyeglasses,

  • and

  • theyíve created a really cool Structure of

  • typography, so they have

  • some interesting fonts theyíre using and

  • but beyond that,

  • theyíve really gone to the next step

  • and they said, ìYou know what,

  • letís have photography thatís all

  • done in the same style

  • And itís an engaging style,

  • you kind of see thereís kind of this

  • kind of quirkiness,

  • slight quirkiness to it, like each of the

  • the models they are using

  • can have these quirky expressions,

  • It really

  • built the brand into

  • everything theyíre doing with

  • the design of their site,

  • the aesthetics of their site,

  • this interface that

  • users are going to interact with.

  • And even moving beyond just

  • the static style of your site,

  • is even transitions, animations,

  • what are those little

  • interactions when someone

  • click on something or

  • they roll over something.

  • those are all part of the user experience.

  • And while they might be really small

  • and minor

  • in our eyes,

  • a lot of times,

  • users find those

  • things really engaging and fun.

  • And not only fun but

  • when you have buttons that

  • feel like real things,

  • people are probably more likely to click on them.

  • When

  • an interface

  • has functionality that

  • feels like Iím hitting a key on my keyboard,

  • at least somewhat,

  • thereís a connection there.

  • People can go,

  • ìOh, this feels like something

  • Iím already familiar with

  • That makes sense

  • that I get to click on it and it

  • and it looks like what would happen

  • when I click a button on my computer

  • Or,

  • ìI use the power button

  • on this other device that I have,

  • that makes a lot of sense to me

  • Lots of things to be thinking about

  • in all these different planes

  • as you can see

  • I would love to

  • dive into more detail on those in the

  • future, so hopefully there will be some

  • more opportunities for that.

  • So, just a quick wrap up:

  • what have we talked about today...

  • First up, what is UX?

  • Itís the feelings that a user comes away with

  • when using our product,

  • specifically, our website.

  • So, why does UX matter?

  • Are users feelings affecting immensely the

  • likelihood of making a purchase?

  • Continuing to use our product

  • or website again and again.

  • And even if theyíll

  • recommend it to others.

  • If people have great experiences

  • more likely than not,

  • theyíll find a way to share it.

  • And thatís

  • great for our product,

  • means that we get to grow and build it,

  • and itís also great for our business.

  • Usually more users means

  • weíll put more money in our pockets

  • and the ability to continue to

  • grow and expand as a business.

  • And finally,

  • we talked about

  • what is our user experience design framework.

  • So, we talked about number 1, Strategy,

  • which is the goal of our site or product.

  • We talked about Scope,

  • which are all the tasks that users

  • can accomplish on our site.

  • Itís the Structure

  • kind of that map

  • how things are going to work.

  • Itís the Skeleton, or the

  • layout of out pages,

  • or our views.

  • And finally itís the Surface,

  • itís the interface.

  • Itís how it all looks and

  • feels when the user interacts with it.

  • Last slideve got here,

  • just some other resources

  • that you guys can check out.

  • Andll make sure that we provide a link

  • to a PDF download so that you guys can

  • click these links and check them out.

  • Obviously, first off,

  • ìElements of User Experienceî

  • we already talked about this book,

  • by Jesse James Garrett.

  • Itís a great book to check out,

  • thereís even a free chapter you can download

  • that talks about some of the stuff

  • we talked about today.

  • Check that out there on the link.

  • Another great book to check out,

  • really short, really easy to digest,

  • great for anyone working within

  • a company who has got a site,

  • where you want to

  • be more user experience centered with

  • the design and the build,

  • of that site.

  • Itís called ìThe Undercover User Experience Designî.

  • I definitely recommend checking that out.

  • Cardinal Path blog, of course,

  • Weíve got lots of posts about UX, as well as

  • lots of other

  • digital

  • analytics and digital marketing

  • topics on there.

  • Definitely check that out.

  • ì52 Weeks of UXî

  • If youíre looking for kind of a crash course on UX,

  • this is a series of

  • great essays and

  • little brief thoughts that the writers have put together.

  • There are guys that

  • are UX industry

  • professionals and they built a site

  • and for 52 weeks, they posted once a week,

  • on there, thereís some great stuff to learn.

  • Wonít take too long to get through either,

  • theyíre pretty short,

  • but very insightful.

  • UX Mag, or UX Magazine,

  • itís got lots of great stories from the

  • field of user experience

  • of study and designs,

  • so you get some research topics in there.

  • as well as actual implementation of

  • design and build.

  • And across a whole bunch

  • of different industries, youíll see everything from

  • website designs and

  • website builds, all the way through to

  • healthcare applications and software.

  • Itís a great example of

  • how to see a lot of whatís going on

  • across multiple industries with user experience.

  • LittleBigDetails,

  • I love this site

  • itís just a little Tumblr blog, basically

  • the author just posts little screenshots of

  • small little user interface

  • details that they find inspirational.

  • If youíre a designer or

  • you work with a website,

  • this is a great way to get

  • some little inspiration on how you can make,

  • those little things that make

  • your website stand out

  • that can make an experience

  • just a little bit better for your users.

  • And finally, 90PercentOfEverything,

  • this is a fantastic

  • blog by Harry Brignull.

  • Heís a senior UX designer at Clearleft over in England.

  • which is a top UX design firm.

  • He just blogs about

  • anything and everything that comes to

  • his mind as a UX designer

  • and itís brilliant.

  • I definitely recommend checking him out.

  • So,

  • weíll wrap up with

  • questions and thereís

  • contact information if you want to hit me up

  • later today or whenever,

  • butll

  • hand this back over to Kent

  • and see what questions you guys have.

  • KENT: Oddly, we seem to have no questions right now, Mike.

  • Letís give everyone a minute or two to

  • to think things over and ask whatever they care.

  • MIKE: Definitely.

  • KENT: A good question and itís for me actually,

  • Will the slides be available for download?

  • Yes.

  • I will see if I can get these slides through Mike

  • soon,

  • and theyíll be up on our blog

  • in a new post either tomorrow or the next day,

  • along with a recording of this webinar.

  • I think thatís it.

  • Mike... o wait...

  • MIKE: Awesome.

  • Thanks everybody.

  • KENT: Thereís actually one last question,

  • just popped in here.

  • What Iím going to

  • guess the question is is

  • what are your favorite strategies for testing

  • user experience?

  • MIKE: For testing user experience?

  • Great question.

  • A/B testing is always good if youíre wanting to test

  • one off type things like

  • a call to action button.

  • Multi-variate is also a great way,

  • you can test multiple options over time.

  • Thereís a ton of different ways to do that.

  • I highly recommend checking out a site

  • called ABTests.com

  • Youíll see tons of examples of

  • A/B tests and multi-variate tests

  • on landing pages and website designs.

  • I also highly recommend focus testing.

  • So,

  • getting a more subjective

  • view from users of

  • the experience that theyíre having on your site.

  • You can do that as generally as

  • you know, play with your site,

  • give them a few tasks to accomplish through it,

  • and see how they do.

  • Notice the touch points where they get hung up.

  • And ask them to talk through it a lot.

  • Thatís a great way to get, like, just kind of

  • down and dirty like

  • what experience are users really having with your site.

  • Data, you know,

  • doing an A/B test,

  • doing a multi-variate test

  • with tons of people is a great way to test things.

  • But a lot of times

  • youíll get so narrowly

  • focused on just

  • one little element that youíre trying to test,

  • that you donít see the bigger picture of

  • ìOh my goodness,

  • this whole series of

  • checkout pages just doesnít make sense to people

  • We had, you know,

  • Ten different users go through it and

  • everyone of them got hung up on it somewhere

  • in that process.

  • And so focus testing is a

  • great way to, to really

  • for you to experience how your

  • users are experiencing your site.

  • So, that was a great question, Iím sure thereís

  • more we can talk about, hit me up if you got more

  • regarding testing.

  • KENT: One more here, and I quite like this one,

  • how do you overcome clients who say things like

  • ìI want it this way

  • despite UX recommendations

  • MIKE: [Evil Laugh]

  • That is a great question.

  • Well, first off, if youíre starting with Strategy,

  • and hopefully you are,

  • and you and the client have come to an agreement,

  • on that Strategy,

  • you can always point them back to that.

  • and say, look,

  • weíre making decisions based on

  • this goal, this main

  • reason why this site exists.

  • Letís make sure weíre making

  • decisions that make sense with that.

  • Ultimately, youíre

  • going to run into stuff

  • or like, hey, the client wants a specific little thing

  • or a specific

  • desire on their part

  • that you feel doesnít make sense

  • itís always going to happen.

  • Itís just the nature of

  • human communications and

  • just working with clients.

  • Ultimately,

  • I say, as a consultant,

  • itís your job to tell them what you believe,

  • to hopefully

  • prove it with

  • some experience or data to back it up.

  • But at the end of the day, itís their site.

  • itís their product and itís their decision, so

  • Iíd say let them know a couple times

  • ìI firmly believe this is the right way to go

  • And if they continue to push back, Iíll say,

  • ìNo what? Alright, weíll go with your route

  • A great way to kind of justify yourself on this is

  • start doing some testing once you launch.

  • Say, ìHey

  • letís try it your way, but do you mind if

  • we do an A/B test or some multi-variate testing

  • or some focus testing that

  • focuses in on that

  • specific user interactions

  • just say, ìMaybe this actually doesnít

  • work and letís find out

  • just be sure. Great question.

  • KENT: Weíll give a minute here and see

  • if any more roll in.

  • Doesnít look like it.

  • Alright, I think we can wrap this up.

  • Mike.

  • MIKE: Cool.

  • Thanks everybody.

  • Hit me up if you got anymore questions,

  • but otherwise

  • hopefully weíll be doing another webinar on UX

  • soon and we can dig more into this stuff.

  • KENT: Bye everyone.

KENT: Hello everyone, and welcome to our April

字幕與單字

單字即點即查 點擊單字可以查詢單字解釋

A2 初級

用戶體驗設計介紹。重新思考設計過程 (Intro to User Experience Design: Rethinking the Design Process)

  • 433 73
    Mi Chun Chiu 發佈於 2021 年 01 月 14 日
影片單字