Sitemap

Week 4: Sitemap

This is the constructed sitemap for Coffee Delight website. I will have the home page that can navigate to other pages. A total of 6 main navigation. 1 sub-navigation on the about page.

Here is a list of the pages:

1. Home
2. Coffee (Menu)
3. About Us
• History & Goals
• What is organic coffee? What is Fair Trade Coffee?
4. Location/Directions
5. Reviews (users review the coffee shop; maybe live comments)
6. Contact Us

Sitemap

Competitor Analysis

Week 3: Competitor Analysis

This week we research two competitors and analyze their websites. Also, think about 2 things that we can use to make it better than the competitors.

--

Competitor #1: Honey Honey Café and Crepery

http://www.honeyhoneycafeandcrepery.com/index.html

Honey Honey Café and Crepery is a small restaurant that offers café and crepery. So not only does it has coffee, they also offer other food such as sandwiches, crepes, salad, soup, burgers, and more. The website has good design layout.

Advantages:

• There is a review section where customers would rate the restaurant.
• Rounded corners for images. Used a good amount of images for some pages.
• Nice design layout overall for the website.
• Great menu page, organized neatly in columns and in headers.
• Some images are small, but enlarged when hover over.
• Great resources on directions page.
• Good navigation

Concept Map

Week 2: Concept Model

This week we create a concept model that represent the website. I made the map differently; instead of going into what pages are going to be in the website, I made a mind map. I thought of any words that would go with the coffee shop. I wanted a "warm and relaxing" feeling for the website. It's just like making the website like how people will feel after drinking the coffee. I wanted to add in "elegant" in the map, but the word didn't work out with the rest of the concept map. The handwriting font style will be used only for headers. It should add a elegant feel of soothing from drinking the coffee.

Coffee Delight concept map

Persona & Usability Test

SENIOR PROJECT STUDIO; FALL 2011

Week 1:  Persona & Usability Test

This week we do research on what type of website to work on. Construct a persona that fits the website. Find a competitor's website and do user testing.

Website: Coffee Delight

Concept: A made up coffee shop that advertizes their shop and coffee.

Target Audience:  young adults, adults, ages 16+

Pages: menu/coffee, about, location/directions, contact, reviews? events?

Elements: images, animate images? slider, social networks, lightbox? 

-----

Persona

Name: Kimmy Parker

Age: 20

Tech Ability: Normal, computer-savvy

Online: 10 years

Personal background: A student that goes to a state college.  She studies biology. She took a few basic computer classes. She is currently in working part-time in an internship as a research recorder on experiments. She has a family of a father, mother, baby sister, and a younger brother. Her hobbies are using the computer, doing sports, reading, and spend time with her friends and family. Her special skills are that she’s good at researching. She loves to eat and drinks coffee often. She loves to sleep. She has a pet dog named Muffin that she plays with a lot. She studies and works hard, so she sometimes doesn’t have enough sleep. Therefore, she drinks a lot of coffee from time to time. She has classes in the morning and work in the evening. She needs coffee to stay awake.

How to Create Animated GIF in Photoshop

Tutorial: How to Create Animated GIF in Photoshop

& Posting the GIF to Tumblr blog

By: Susan Lei

The tutorial is completed! All the information in how to create the animated GIF is on the website. This tutorial is based on using Photoshop in creating an animation and animating graphics. The tutorial only contains screencaps of the program and other window screens. 

Features on the tutorial:

• Demo buttons available to view the animated GIF on a small window popup
• Quick links for number of steps on the side column on every individual documentation page (fixed position)
• A scroll-to-top link to go back to the top of the page (not interactive)
• A scroll-down link to the number of parts of the steps (not interactive)
• All sections are numbered in parts and steps in headers
• All parts are in bullet points
• Important text are highlighted in red color and bolded

Rubric & Learning Plan

Week 8:

Rubric: 

Lesson Plan for today's testing: [Step 1: How to download and convert the video file]

Scores: 1 - poor; 5 - excellent

Content (Amount of information, clarity of the content)
3 out of 5 - Lack of information and too short. Some information are missing. Content clarity is just right. Need to explain more such as how to copy & paste and where to type link.

Multimedia (Relevant images)
5 out of 5 - Good and relevant images of screencaps for the content discussed. The images are even marked with red borders to highlight important parts.

Mechanic (Errors, spelling)
5 out of 5 - No errors whatsoever. All links work.

Interactivity/Engagement (hands-on)
5 out of 5 - Based on a hands-on activity on working by themselves and looking at the tutorial at the same time.

Progress on Tutorial

Week 7:

Website for tutorial:
I have been working on the HTML webpage for my tutorial. I put everything in one page using a jQuery tabs. The tutorial content is so long that users might not want to keep scrolling to go to the content. So, I'm trying to add a ScrollTo code for sliding down to a part of the tutorial by clicking on a link list. This way, it's easier and faster to get to the point. So far, I can't seem to find one that works. I'm still researching for the code. I will also find a code for Back to the top of the page.

Tutorial:
I'm already 3/4 of the way done explaining on the tutorial. I finished up to the part on saving the animation. I'm going to continue adding extras and advanced animation part. I have hierarchy for organizing which parts are important. I have now put big headers for topics and bullet points to keep each part in order. I took a lot of screencaps for the tutorial and marked them in red borders to highlight important areas. I even have demos of the outcome of the animated GIF. I might need to review over the tutorial in the end to check if I need to fix or add anything.

Here's a sneak peek of how the html webpage looks like. I'm still doing some modifications to it, so it's only a rough look:

E-Commerce Affiliate

E-Commerce Site Design [Week 6 blog]

For this week's assignment, we will blog about a product we like and is selling it online. We will talk about our interest in the product and affiliate with a link. I have decided to talk about a movie in DVD.

[Movie] Transformers 2: Revenge of the Fallen

I love the whole series of Transformer. It has a lot of action throughout the whole movie. I watched the movie in a theatre. It was amazing watching in the big screen. I would rate this movie a 5/5. Michael Bay, the director and producer of Transformers had made a magnificent movie with 3 series. All the special effects and robotic characters looked real and well done. Transformers 2: Revenge of the Fallen is number 2 of the series, there is also number 3 that came out not long ago (Transformers 3: Dark of the Moon).

If you have seen the movie or haven't yet, I suggest you to purchase a DVD for yourself! You'll get to watch it right at home in your big screen television with your family, friends, or relatives!

Research

Week 6: Research your final project online and develop a case study to present to class. Include your target audience, main form of instructional strategies, and a sample "similar" site, if possible.

I use Tumblr and make animated graphics for myself during spare time. On what I researched on Tumblr, animated gifs are popular and users like to post them.  Sometimes it's only for fun entertainment and interest. I am going to based on users who make animated graphics for Tumblr.

Why We Love Animated GIFs?
Here's a great article about why we love animated gifs. I agree about when some people are not interest in such animation, it is unavoidable. It's hard not to get attracted to the animation. (Source) These animated graphics are made of frames and animate repeatedly. Sometimes, animated graphics are made for advertising, so it's not only for entertainment. However, some animation can be annoying and marked as spam. The article says, "and yet animated GIFs that show just a few seconds of someone making a funny face repeatedly become exponentially more appealing to someone than a picture of the same person that did not move." I agree because an animation of a picture would be more interesting than a still image with no movement. A still image is boring, but an animation has more movement, meaning, and significance that make sense and attract the audience.

Target Audience:
It depends on the user making the animated graphic. What is the intended use and purpose? Is there a message the user is trying to say? When making these animated graphics, we should know who we are trying to target. (Source) Since making animated graphics are for fun, there might not have any message to communicate through. However, if the audience is interested in what the graphic is related to. The targetted audience are teenagers, young adults, and anyone who would like to learn how to create animated graphics/gifs. I assume this tutorial is for users who already know how to use the basic Photoshop. If not, I might teach a simple basic introduction to Photoshop.

Final Project Proposal

Tutorial: How to create animated gifs/graphics with Photoshop 
Week 5
I'm deciding on to just take screencaps of the program and discuss about it step by step on a page. If that does not work, I will use Captivate and make a video with audio instead.  I am just going to make a tutorial using screencaps and text. No Captivate. 

Content:
Making animated pictures through frames with Photoshop and turn them into gifs. Instead of creating animation with single images like a slideshow, we can make animated pictures with video files. When the animated graphic is made, it looks just like scenes from a video. We can turn the animated gif into looking just like straight from a video.

Media needed:
Photoshop, video file, browser, screen captures. audio? Adobe Captivate? 

Target Audience:
teenagers, young adults, ages 14+, anyone who wants to make animated gifs 

Flowchart pages: 
introduction, instruction step by step, conclusion of summary 

Optional add-ins (still in deciding):
How to create animated gif to post on Tumblr

---

[EDIT UPDATE 8/19/11]: added more for the tutorial

Tutorial with Captivate

Week 4:

Just finished the midterm in class. I have uploaded my demo online. My tutorial is about teaching users how to download a syllabus document file on Casabasa.com! (How to Download a Syllabus on Casabasa.com) The tutorial is made on Adobe Captivate with screen captures. I actually recorded my own voice and used it for the tutorial. I hope it will all tie up together when presenting. I hope I fulfilled all the requirements for this midterm project. I'm sure I added 3 interactions in the tutorial for users to make 3 clicks. I also hope that the tutorial is actually teaching users something. Check out the tutorial!


How to Download a Syllabus on Casabasa.com 

Edit: There are a few errors in the tutorial. I'm going to fix it and add some changes and then re-upload the tutorial again. I have uploaded the final version of the tutorial. I have fixed and made changed to the errors and mistakes. Everything should tie up neatly now with a beginning, middle, and end. Also, there are 3 interactions, the next button, the typing text area, the help widget, and the quiz.

9 Levels of Events Instruction

Week 3:

Today we learned about the 9 levels of events for instructional design concepts. They are really helpful.
 
Gagne's The Nine Events of Instruction

Level	Event
I	Gaining Attention (reception)
II	Informing learnings of the objective (expectancy)
III	Stimulating recall of prior knowledge (retrieval)
IV	Presenting stimulus (selective perception)
V	Providing learning guidance (semantic encoding)
VI	Eliciting performance (responding)
VII	Providing feedback (reinforcement)
VIII	Assessing performance (retrieval)
IX	Enhancing retention and transfer (generalization)

So for my short demo tutorial. I am going to teach students or users how to download the course syllabus from Casabasa website. It needs at least 3 interactions with clicking. Users are able to click on those for help and to continue. At the end, we are supposed to create a quiz. So I only made 3 questions with 2 multiple choices and 1 true or false questions. I made questions about the demo. I will be making a supporting web page soon for the demo.

e-Learning Principles

Week 2:

What I learned today was about the general e-Learning principles. They are really helpful. The principles are mostly about how to get users to click or let them notice. I understood the principles telling us to use images/graphics as well as text close to each other, and must be relevant so it won't confuse the users. It is best not to add a lot of interesting materials or flashy things because it distracts the users out of focusing on the main content. I agree because it's true!

• Signaling
• Dual mode
• Multimedia principle
• Contiguity principle
• Modality principle
• Redundancy principle 
• Coherence principle
• Personalization principle

Later, we learned about using the Adobe Captivate program. Right now, I'm still new at using this program. I want to learn how to make a teaching video/swf just like this tutorial example: Uploading Your Photos. It's a really good tutorial. I don't know how to create buttons to go next page or textboxes yet. Soon, I hope.

Multimedia in Learning

[MM3312 Computer-based Training] Summer Quarter 2011
Week 1: Research Multimedia in Learning

This week we are supposed to research how is the best ways to teach the benefits of using multimedia in learning applications. We pick 1 out of the 3 types of transfer of learning.

Transfer of Learning - the application of skills and knowledge learned in one context being applied in another context (Cormier & Hagman, 1987)
 

There are 3 types of multimedia Transfer of Learning:

1. Inform - teach them some information
2. Near transfer perform - like teaching a software and is step by step
3. Far transfer perform - there is no exact answers, but several possible solutions or performances that could be elicted, to help narrow your focus.

Final Project: WizQuiz [DONE]

WizQuiz homepage

WizQuiz Quizzes page

WizQuiz  individual quiz page

WizQuiz category page

Observational User Testing for WizQuiz

Week 8:
The website is not yet completed, but there must be some user testings for feedbacks.

WizQuiz homepage

Here are a few questions I asked for user testing: (6 users)

1. What do you do when you're bored on the computer? Would you use this website to take fun quizzes?
2. What catches your eye right when you enter the website?
3. Does the website look fun for you to come back again?
4. Did you know how to navigate and search for what you're looking for? Easy to use?
5. Would you recommend the website to others?
6. Any other suggestions you can give me for the website?

MLA Research

MLA Research: [Done in WordDoc]
 
http://booroo.com/blog/polls-quizzes-surveys-whats-the-difference/
This website talks about the difference between quizzes and surveys. Very useful information, so users don't get mixed up. knowledge, skills, and abilities, quizzes can be fun too! That's why I want to make a fun quiz website. People can take quizzes for fun or when they're bored. I agree with what the website said, "Social quizzes are used to keep visitors interacting on a website." It is true, users take quizzes and they stay on the website. They browse through the website as well, so therefore, they are interacting with the website. Instead of making educational quizzes that requires brain thinking, fun interesting quizzes would attract users.

Sketches for Final Project, WizQuiz

Week 6:

I have sketched some drawings of the layout my website will look like. My website is a quiz wesbite. I've done many sketches and variations of how the homepage might look like. I'm still deciding which one layout to go with, and the layout might change throughout the week while I'm working on it.

Here are the logo sketches I drew. There's a robot's head with question marks around it. I have question marks there because the website has fun questionnaires, tests, quizzes, and more. Also for the the logo name, I came up with WizQuiz. I like how it rhymes and it's like a wizardry website that has a lot of quizzes. The tagline is "Feed your boredom."

Final Project Proposal

Week 5: Final Project Proposal

Concept:

WizQuiz / QuizWiz: Feed your boredom.
A website full of fun and entertaining quizzes? Fun quotes? Random or funny images?
I thought a lot of people would like to take some fun quizzes to find the results. The website will be fun, simple, easy to navigate, and find things. More visuals and images to make it better than other quiz websites.

Target Audience:

13+, teenagers, young adults 

Scope:

There will be a list of types of categories for the quizzes. For example, personality quizzes, “What color are you?”  User gets results after taking the quiz with images (?). Register, login/logout page to take quizzes? 

Sound Media Element

[Week 4]:

Another hard assignment this week. It is hard to find elements of sound a website. Rollover and onclick were the only solutions. I chose onclick sounds over rollover sounds because rollover can be annoying sometimes.

I thought about doing something like rollover sounds. For example, I looked at http://www.flashfunpages.com/ and it has a good example of rollover sounds. Later, I thought rolling over the images might be too annoying. So I came to a conclusion of clicking an image for sound effects instead.

Captivating Preloader/Transition

[Week 3]:

This week's assignment is either creating a captivating preloader or transition. I have no idea what to do yet, but maybe I will include both. I've done a lot research again and looked at examples and demos to help me think what to do. I mostly found Flash websites with interesting preloaders and transitions. Most of them have sounds too!

Example Flash websites of transitions:
Nice change bg themes/dragdrop nav - http://www.infinitcolours.com/

change bg image

drag/drop navigation

 

Sequential Navigation

[Week 2]:

This week's assignment is kind of hard. I need to do a lot of research for sequential navigation. Here are a few websites that have a list of creative navigation and menus. Inspiring and  helpful. Navigation is not necessary with words, it can be just images or icons to just explore and click.

Helpful and inspiring list of blogs about navigation/menus: 
1st Web Design | Unusual Navigation Menu
Smashing Magazine | 50 Beautiful and User-Friendly Navigatioon Menus
Freelance Folder | 30 Examples of Big Bold and Beautiful Website Navigation Menus 

Examples of nice sequential navigation:

1. Fun brochure/ pamphlet-like navigation: http://www.thibaud.be/

Identifying Modes of Online Entertainment

[WEEK 1]:

For this assignment, we are supposed to research the different types of website. So for the final, we need to choose a type of website that can entertain and attract viewers. We discussed about what entertainment is in class. 
----------

BAND WEBSITE:

Jay Park | http://www.jaypark.com/ 

Jay Park is a Korean American singer and dancer. The website is very entertaining, especially the background, which changes images every second. Navigation is fun, it slides. I like the transparency on the content area. there is just a lot of information about the artist, so it attracts fans and viewers.

Interaction Design for Entertainment

Hello everyone! I am back! Spring break is over. New quarter started for school. 
Spring 2011.

I will post weekly assignments for this class: MM3301 Interaction Design for Entertainment.

Meanwhile, check out my personal portfolio website! >> http://susanlei.com  

Sharon's class websites
http://www.casabasa.com
http://sk374.aisites.com

-- Susan