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.