Week 3 Activities - cpb-us-w2.wpmucdn.com...Week 3 Activities Responding to site goals/objectives...
Transcript of Week 3 Activities - cpb-us-w2.wpmucdn.com...Week 3 Activities Responding to site goals/objectives...
Week 3 Activities
Responding to site goals/objectives and persona feedback
You don't need to resubmit anything unless either you would like additional feedback or I ask you to resubmit
something. Please don't move foreward to the next step until I give your goals, objectives, and persona(s) the
green light.
Introduction to User Experience Design
In the next step of the design process you will take your goals,objectives, and persona(s) and begin to design the
site layout, navigation and structure. For you to accomplish this you need some knowledge of User experience
design and information architecture. The following readings and video will provide you with that background.
User Experience Design
User Experience Design (http://semanticstudios.com/user_experience_design/)
Elements of User Experience Design (http://uxdesign.com/assets/Elements-of-User-Experience.pdf)
Fundaments of User Experience design (http://webdesign.tutsplus.com/courses/fundamentals-of-ux-design)
(Watch 2 free videos)
The following videos provide you with ways to think about how a user might experience your website. Note the
use of post-it notes to think through different ideas.
UX Tutorial | How To Create User Journeys (https://www.youtube.com/watch?v=KdxZFUwliC0)
(https://www.youtube.com/watch?v=KdxZFUwliC0)
How to do User Story Mapping (https://www.youtube.com/watch?v=k_4SchJgAI4)
(https://www.youtube.com/watch?v=k_4SchJgAI4)
The following videos document the process of redesigning web pages with poor design. View them to
understand some of the thinking processes behind good user interface design.
Refactoring UI: Bad About (https://www.youtube.com/watch?time_continue=61&v=S6-q5BheEYU)
(https://www.youtube.com/watch?time_continue=61&v=S6-q5BheEYU)
Video on redesigning a bad "About" topic page.
Refactoring UI: WP Pusher Checkout Page (https://www.youtube.com/watch?v=5gdYHlYAKDY)
(https://www.youtube.com/watch?v=5gdYHlYAKDY)
Video on redesigning the WP Pusher checkout page.
Recreating Instagram's User Flow: An exercise in UX design - UXT#5 (https://www.youtube.com/watch?
v=JjjxDXbgfYY)
(https://www.youtube.com/watch?v=JjjxDXbgfYY)
Recreating Instagram's User Flow
Information Architecture
Complete Beginner’s Guide to Information Architecture (http://www.uxbooth.com/?p=2377)
Explaining information architecture (https://vimeo.com/8866160) from Dan Klyn (https://vimeo.com/user3007539) on Vimeo (https://vimeo.com) .
The following video I made bridges some of the material from this section to creating your wireframes and site
flow diagram.
https://www.youtube.com/watch?v=q6zgl01_yU0 (https://www.youtube.com/watch?v=q6zgl01_yU0)
(https://www.youtube.com/watch?v=q6zgl01_yU0)
Wireframe
Now that you have a complete set of goals, objectives, and personnas and have a general understanding of user
design and information architecture, it's time to develop your wireframe. A wireframe provides a visual
representation of your site page elements and navigation without the content which we'll be working on next
week. A wireframe can have various elements depending on the level of detail you hope to achieve.
Read this: A Beginner’s Guide to Wireframing (http://webdesign.tutsplus.com/articles/a-beginners-guide-to-
wireframing--webdesign-7399) & The Hands-On Guide to Wireframing(PDF)
(https://osu.instructure.com/courses/39389/files/8731059/download?wrap=1)
(https://osu.instructure.com/courses/39389/files/8731059/download?wrap=1) .
(http://webdesign.tutsplus.com/articles/a-beginners-guide-to-wireframing--webdesign-7399) View this 5 minute video:
What is a Wireframe? (https://www.youtube.com/watch?v=T0vt3nLZKks)
(https://www.youtube.com/watch?v=T0vt3nLZKks)
And this 4 minute video:
Wireframing for UX: What it is and how to get better at it (https://www.youtube.com/watch?v=8-vTd7GRk-w)
(https://www.youtube.com/watch?v=8-vTd7GRk-w)
Exercise: Pick two websites that you use regularly. Try to select at least one site that you think is easy to navigate
and one that is not easy to use. Use https://www.wirify.com (https://www.wirify.com) to turn them into wireframes.
Try looking at more one than one page on each site. What do you notice about the differences between the
wireframes of the two sites? Are their consistent elements in the wireframes for the same site? Where is your eye
drawn to? How does it scan the page? Here's an example of a wirfied site to give you a sense of the relationship
between a wireframe and the final site.
Next, create at least two wireframes for your site. One should be your home page and the other should be as
least one subpage. Here (http://www.userfocus.co.uk/resources/homepagechecklist.html) is a list of factors you
should consider in your homepage. If you will have multiple layouts on subpages then create a wireframe for
each layout. Each wireframe should include the common elements for each page of your site. Here are some
examples of screen wireframes: Example 1 (http://www.kimbieler.com/wp-content/uploads/2012/03/athayde-
homepage.jpg) , example 2 (http://www.comentum.com/images/wireframes-sample/ecommerce/home.png) , example 3,
(http://netdna.webdesignerdepot.com/uploads/wireframes/1.jpg) example 4 (http://jimatkinsonwebdesign.co.uk/wp-
content/uploads/2011/10/Wirefame-diagram.jpg) .
Make sure that you label all the navigation items and graphics (e.g., logo) in your wireframes.
There are different approaches to designing your wireframe. Here is one approach:
How to wireframe a website | CharliMarieTV (https://www.youtube.com/watch?v=PmmQjLqJQlY)
(https://www.youtube.com/watch?v=PmmQjLqJQlY)
If you are an advanced student and want to see how to use a program like Illustrator to develop a wireframe you
may find this 43 minute video useful:
https://www.youtube.com/watch?v=i4Zg6_yKOh8 (https://www.youtube.com/watch?v=i4Zg6_yKOh8%20)
(https://www.youtube.com/watch?v=i4Zg6_yKOh8%20)
You can either draw your wireframes by hand and photograph them or you can use a software tool. If you
photograph a drawing make sure that you fill the frame. One good process as shown in the video above is to start
with hand drawing different ideas and then use software for the final polished version. Here are some web-based
tools to create a basic screen wireframe.
https://mockflow.com/
https://gomockingbird.com
(https://gomockingbird.com/home) https://cacoo.com/ (https://cacoo.com/)
(https://cacoo.com/) In this 22 minute video I use Mockflow to develop a basic wireframe.
https://www.youtube.com/watch?v=UWjbeAVgUkM (https://www.youtube.com/watch?v=UWjbeAVgUkM)
(https://www.youtube.com/watch?v=UWjbeAVgUkM)
At the end of this part of the activity you should have at least 2 images to upload to the Website Wireframe /
Screenflow (https://osu.instructure.com/courses/39389/assignments/686756) dropbox.
Site Flow Diagram
A site flow diagram is a representation of all of the pages on a website and shows how they are connected to
each other through the navigation. Here are some examples of screen flow diagrams:example 1
(https://ryanquick.files.wordpress.com/2008/12/navigation-flow-diagram.jpg) example 2 (https://s-media-cache-
ak0.pinimg.com/736x/25/98/df/2598dfae84ab32ff426be347acc3e896.jpg) , example 3 (http://remembrance.hotglue.me/?
Browserbased.head.135516083190) , example 4 (https://interactivemediasum12.files.wordpress.com/2012/06/typical-
website-flow-chart.jpg) .
In this part of the assignment you will draw a site flow diagram for your site. You should be thinking about your
site goals, objectives, and persona as you build your site flow diagram. Are you meeting all the goals in your site.
Are there enough pages, too many? What is the attention span of your audience?
You can either draw your site flow diagram by hand and photograph it or you can use a software tool. If you
decide to draw it, remember how Post-it notes made that process pretty easy. Here are some web-based tools for
the screen flow wireframe:
https://www.mockflow.com (https://www.mockflow.com)
https://www.lucidchart.com (https://www.lucidchart.com)
http://creately.com (http://creately.com)
https://www.draw.io (https://www.draw.io)
Some versions of Word and Powerpoint have a chart tool (https://support.office.com/en-us/article/Create-an-
organization-chart-9b51f667-11b7-4971-a757-a08a36684ee6) that would work as an alternative to the specialized
tools.
In this 8 minute video I use Mockflow to develop a basic wireframe.
https://www.youtube.com/watch?v=ZnlrTlZq_QI (https://www.youtube.com/watch?v=ZnlrTlZq_QI)
(https://www.youtube.com/watch?v=ZnlrTlZq_QI)
Upload your wireframes (if you haven't already uploaded them) and site flow diagram to the Website Wireframe
/Screenflow (https://osu.instructure.com/courses/39389/assignments/686756) dropbox.
Complete this week's activities by reading all the material on the following page on Web Accessibility.
(https://osu.instructure.com/courses/39389/pages/accessibility) The information is important because your final project
will be assessed on whether or not it meets these accessibility guidelines.