This course is focused on the early user experience (UX) challenges of research, planning, setting goals, understanding the user, structuring content, and developing interactive sequences. While the concepts covered will translate to many kinds of interactive media (apps, digital kiosks, games), our primary focus will be on designing contemporary, responsive websites. In this course you will complete the first half of a large scale project—developing a comprehensive plan for a complex website—by defining the strategy and scope of the site, as well as developing its information architecture and overall structure. Along the way we will also discuss: - Different job descriptions in the web design industry and where UX and UI skills fall within this spectrum - The difference between native apps and websites - The difference of agile vs. waterfall approaches - User personas and site personas - User testing The work and knowledge in this course continues in the last course in the UI/UX Design Specialization, Web Design: Wireframes to Prototypes, where you will tackle—finally—wireframes, visual mockups, and clickable prototypes. This is the third course in the UI/UX Design Specialization, which brings a design-centric approach to user interface (UI) and user experience (UX) design, and offers practical, skill-based instruction centered around a visual communications perspective, rather than on one focused on marketing or programming alone. These courses are ideal for anyone with some experience in graphic or visual design and who would like to build their skill set in UI or UX for app and web design. It would also be ideal for anyone with experience in front- or back-end web development or human-computer interaction and want to sharpen their visual design and analysis skills for UI or UX.
Sitemap: Alyson and Bradley
Loading...
Из курса от партнера California Institute of the Arts
Web Design: Strategy and Information Architecture
119 оценки
Из урока
Getting your Ducks in a Row: The Sitemap
Welcome to the last week of this course. With your outline of scope in hand, you will now learn how to transform the content and functionality requirements determined last week into a navigable structure. This structure will be visualized by something called a sitemap. I’ll tell you all about sitemaps and how to create them. Along the way we will also define the term "information architecture". And I will introduce a tool called TreeJack, which will enable you to test your site map on actual users.
Познакомьтесь с преподавателями
Roman JasterVisiting Faculty, Program in Graphic Design
School of Art
All right. We're ready to talk about sitemaps.
Bradley, let's start with you,
just remind everyone your website is about affordable poke for college students,
Westwood Village, urban area of Los Angeles and they only open at night.
Quick delivery, late-night partiers and studiers.
Exactly.
Here's your Sitemap.
Take it away, what did you do?
Okay. So, we have like a home.
On that homepage, we have a Poke button,
Contact, About, and a Questions page.
So that's your-
Main navigation right there.
Main navigation.
Yeah.
Which makes sense because they are all related to the homepage.
Right.
Of this lines. Okay.
Yeah. Then from Poke,
you have a decision point whether to pick customization or Faves,
which are already made bowls for you and from Custom you can pick your Base,
Protein, Sauce, Sides, Toppings.
With Faves, there's a list of different poke bowls that are already pre-made.
They're specials.
Specials. Yeah.
So, you don't have to decide anything?
Exactly. Then from there, you go to Add Cart,
Checkout and then you can see your order process, that they're coming to you.
Why the separation between Custom and Faves?
The sitemap is because there are two different options you can pick.
So it's like a decision point.
So, there'll be a button that says Custom, and then Faves.
From either place, it takes you to a different one into cart.
I guess that's also something you developed early on in the strategy, right?
Where we wanted to give people the option
of being able to completely customize it or just pick one that's already existing.
Right.
Some people, the people that are not able to
customize anymore because they were partying too hard,
they might want to go, just go for the-
Just Faves.
Yeah.
One button.
Yeah. Exactly. Then About Us is in the About page and also,
about what Poke is. I think that would make sense.
Yeah.
And the navigation.
Which could have been two things, right?
There could have been About Us as a main navigation,
about Poke as a main navigation.
Then you would have five but you wanted to-
Keep it-
Condensed.
Condensed, yeah. Under Questions,
there's also like Is the fish fresh?
Just questions that the user will have.
Is there minimum order?
Also again, what is Poke?
Another quick answer then like, Ew!
Is raw fish safe?
Yeah, might be a question.
People might not know. Then also,
an important one is, Who can I contact for questions?
I want to talk about the word Faves.
Yeah.
Well, back earlier, I talked about an attitude for the website,
and I think that just plays off the college thing.
So, it's the voice of the site.
The voice of the website,
and also just shortens since it's-
We were going to look at- right, where was it?
Yeah. Here we go.
This guy.
That shirt, yeah.
He looks-
I think that personifies Chad.
I mean, just the character that I created.
I think that is something that he would say.
So, that's a really clear indication of what language do have in our website?
It wouldn't work for Alison's-
No.
-target audience necessarily.
Yeah, because I have a different voice and a different target audience.
More conservative.
Less hip. Less casual.
Yeah.
Exactly.
Then also, what struck me here was that one of your menu points was Poke.
What else could that be?
It could be order.
Or menu?
Menu, yeah.
But here, it's very straightforward that's what you sell,
so you made that into-
Yeah, that's what you want.
It's more direct.
Yeah,.
Then, you also have,
this is something that we'll see even more with Alison's Sitemap.
One is able to annotate,
you don't just have to stick to just the pages,
you can annotate it with,
okay on the About page,
you have these two items About us and About Poke and the questions you're listing here.
So, I guess you could get away without that but it's
a nice gesture to list
all the content items or many of the content items that are going to be on these pages.
Yeah, that will be there.
Yeah.
it's good to have it.
Alison? Let's jump over to yours.
Yeah.
What's your project about?
So, just a reminder,
my project is Upscale Italian Food Catering Service
for businesses and offices in Suburban, Santa Clarita.
Your sitemap is a bit more complicated.
It's a little longer.
Yeah, I mean, like Bradley,
I have a homepage and then I have main navigation.
So, on your homepage,
maybe we can zoom in here,
here you go. What's happening there?
I decided to go in a little bit more about specifically what I would
have on the homepage of the content requirements.
So, like catering photos and information explain what
this website is about and how to
order and a statement for saying that it's for businesses in Santa Clarita.
Then, your primary navigation?
My primary navigation, I have catering.
Our story which is my About page, Testimonials,
an FAQ, Contact page,
and then Account function.
Then, I guess going into the catering,
that's when you start going through the functionality of it,
and it starts with location.
You have a decision point here.
Yeah, and the decision point is,
is the location in Santa Clarita?
So, what you do is you then put your address,
and then if it fits the location requirement,
then you can continue on into the process,
but if it doesn't, then it'll go to error or-
A sorry.
a sorry page. Then from location,
it goes into number of people estimation.
Then, you get to do
the menu customization point and allocations for how much food you want.
Then, it goes into scheduling,
when the event is going to take place and then you get to
review your order one last time before you hit the Checkout.
Although, there's another decision point here too.
Yeah. After your review your order,
there's another decision point for if you have an account.
At this point, you can either make your account,
or you can login if you already have one.
Then after that you get to check out and then,
I have the Thank you page.
Yeah. Just to talk about the number of people,
you've made a decision that there's a minimum of 10,
and a maximum of 100.
Yeah. I created the page to have
a sliding scale function where I would
need a minimum and maximum capacity point that you can choose from.
Again, the UI, we don't know what that's going to be,
maybe you have a hunch that it could be a slider but it could be a drop down.
Yeah.
It could be a text field where you enter a number, right?
We can figure that out in the next step but right now,
it's just important that that's a constraint and you added it to that.
Yeah, I want to introduce that constraint.
Cool. Then, Talk about our story,
that could have been About, right?
Yeah.
So, you could've called it that.
I choose to use Our Story because I felt like that fit the
more mature and familial tone of my website,
rather than just saying About Us,
I felt Our Story, is like, has language that
carries more of an Italian family feeling rather than just a normal, typical About.
A little more inviting. We have talked about the testimonials being
important during the scope phase.
Then here, the Frequently Asked Questions, Contact Us and then,
the Account, there is a little bit of complexity here.
Yeah. So, for the Account page,
there's another decision point for if you're logged in or not.
If you are, then it'll just go straight to your order history in account settings,
but if you're not, then you have to go to another page that will allow you to login.
One thing to mention here is the login.
This login functionality would probably have to
be a little more complex because once you have a login,
you also have a lost password function most of the time,
a forgot password function.
So, if this was a real site,
you probably have to amend that,
but for our purposes,
it's probably okay to just say login.
Yeah. Then, the dotted line scrolls down all the of my sitemap.
It's just to represent the live chat feature that is
at the bottom of every page throughout my whole website.
Because that's going to be on every single page, right?
So, you're indicating like that.
There might be other ways to do it.
So, you could just say, in the footer,
live chat feature here but I like what you did with the dotted line,
because it does indicate the kind of relationship to everything else.
It sort of covers everything.
Yeah. So, I said that before
and during my lectures that you can be creative with the sitemaps.
There's some, if this works visually,
if it indicates that then, it's great.
Just like you added a lot of supplemental information here to actually say,
well, what are the frequently asked questions and what's on the Contact Us page,
et cetera. Great. All right.
Ознакомьтесь с нашим каталогом
Присоединяйтесь бесплатно и получайте персонализированные рекомендации, обновления и предложения.
Coursera делает лучшее в мире образование доступным каждому, предлагая онлайн-курсы от ведущих университетов и организаций.
© Coursera Inc., 2019 Все права защищены.
