Thurs, 2/27

Creating {B&W or Greyscale} Clickable Wireframes

• Next order of business for our group projects is to start converting our mockups to a more interactive product - starting to make the interface using web language and making each element "clickable" which makes the product more readily visualized and easier for the users to understand during usability testing.


• What Are Clickable Wireframes?
• A Beginner's Guide to Wireframing
• Example clickable wireframe page.
  Notice this page was created with "rapid wireframing/prototyping" software. Most projects use this method before they create mockups as there are more resources available nowadays, i.e. web sites where you can go to create them. It expedites the process, as well as allows non-technical members of web and software design teams to contribute and help visualize the final product. We will be completing this step the old fashioned way, because it will help you learn web design skills the more you practice. Also notice this clickable wireframe is starting to use color and other styling. Our designs for this stage will be black and white or greyscale ONLY!!!!!!!!!!!! Also, not every widget or page feature is actually clickable and functioning, but you can see how it is fully realized with placement, different size of text in headers, etc. In this sense, "clickable" means the main page-to-page navigation is hammered out and visuals are planned out without the full visual realization of a mockup/prototype.



Guidelines for "Clickable Prototypes:

---

• In your group, start with a simple HTML page - a header, a body, navigation, and a footer.

---

• Start creating div tags for all your page elements using a stylesheet. Use white for the background color and black or dark grey borders for the div boxes.

---

• Once you have realized one page with the overall outline (page wrapper or container with all your main divs placed carefully in place in accordance with your wireframe layout you have already realized with Photoshop/Illustrator/etc.) with div boxes, you can create the rest of your pages. If you have created the static wireframes to scale in Photoshop or Illustrator, you already may have an idea of the widths/heights for your boxes which will make the process faster.

---

• Once the pages are created, you may add content - headings & simple descriptions into the div boxes in the form of headings that have simple descriptions in their content areas, or lorem ipsum. Even if you have created logos and you are tempted to use them, DO NOT USE THEM yet. No images that contain any fully realized graphics should be used yet. Formulate a system for showing where the images go... maybe add a description or a pixel width spec in the div box where the images are supposed to go? Maybe shade out the box with a darker or lighter shade of grey?

---

• If you have search bars or dropdown menus, you may simulate the forms with a simple div box that has a border around it. For medium-difficulty features like dropdown menus, you may either code them or simulate them with images. For video players or audio players, you may also simulate these with images to save time. DO NOT simulate everything with images. Remember this thing is CLICKABLE!

---

• ... which leads us to making your wireframe clickable! Link all the pages to each other! If something links to an external source, or a page that you haven't created yet, you can use this to make the link a "dummy" link: < a href="#" >Dummy link< /a >, or you can link to a page you have yet to create and make SURE to create the file by the same name. For instance - you know your next page is going to be called "contact.html" but you have not created it yet - in the navigation, create a link to the nonexistent page, then afterwards be sure to create a page with the same name - contact.html.

---

• You may also start shading the boxes with grayscale to start establishing visual hierarchy as the Example clickable wireframe page has done as a final step for your b&w or greyscale clickable wireframe.

• This is Due one month from now on 3/27 along with a Usability Testing Plan and Script

  When we are done creating these clickable wireframes, we will be usability testing them in class again, and then finalizing a more evolved script and plan for testing ACTUAL users you may find from your user groups, or 3-5 people outside of class that you test IN PERSON and BEST REPRESENT YOUR TARGET AUDIENCE.

Girl Develop It Columbus

If you are a girl and are interested in learning coding /getting some coding help - just FYI if you're interested: http://www.meetup.com/girldevelopitcbus/events/162381512/

Tues, 2/25

"Usability Testing" of your Paper Wireframes, Introducing CSS Zen Garden

"It takes only five users to uncover 80 percent of high-level usability problems" - Jakob Nielsen

• We will start with a group activity involving "usability testing" with your printed wireframes
• First, fill out your wireframes with a description in your blank boxes - roughly describe the content that goes in each box.
• Then formulate a Usability Testing Script using the Quick Guide in the blog post below these instructions.
• Once you have created a script to test out your web site, you will delegate one person for each of these roles:
  
  
  1. One person in your group will be the "Conductor" meaning they will conduct the test and asking the questions without revealing too much. They will pretend the paper wireframes are actual web pages, and have the user point to the links/pages they will navigate to. They act as a computer browser, presenting each wireframe as if the user were navigating through a real web site.
  2. One person will be the "Recorder" and will either record the conversation using a microphone app from your smartphone (this is ideal), or typing rapidly lots of notes and transcribing them to full sentence observation later. This person CANNOT chime in when the conductor is performing the test - must stay quiet.
  3. One person will be switched over to the group next to them to be the "Target User". He or she should be conducting the test using "free association" which is just a fancy way of saying "brain vomit" - run through the tasks and questions you are given and narrate your thoughts the whole time. Do NOT ask the conductor or the recorder any questions about how to use the site or what things mean until the very end. Just try to run through the tasks as best you can and give your honest thoughts about the site and how it functions.
  4. The 2 [now] groups of 2 will become a group of four. You will have two dual conductors/recorders, one from each team - they can take turns performing the test - perhaps halfway, the second conductor can switch wireframes and test with the questions for their site.
  
  
• Record the script and the user's answers on your blog
• Then, write a short paragraph that summarizes your findings using "If, Then" statements. If the user was confused about _____ and ____ , then we should change_____ about our site because _____. I expect you'll have a lot to say here, but keep it to a maximum of 500 words.
• This blog post will help you later when we conduct more usability testing with functioning versions of your prototypes - your User Testing Script will be more in-depth later on, and you will have solved some usability issues even before the wireframe or prototype is made "clickable" - so it will have evolved by then.




---





Usability Testing Quick Guide:

Usability Testing Quick Guide - Conducting a Usability Test





PART I - DO NOT SHOW THEM THE SITE, YET



1. Make them feel comfortable:
   Thank them for taking time out of their day Ask about their trip, stay, weather etc.


2. Tell them who you are what you are doing, without telling them who you are and what you are doing. Meaning, you don’t want to tell them too much about the project or your intentions, but you want them to know you have good intentions.
   ”I work for _____, and today we will be looking at a web site to find out how well it performs."


3. Say the “HOLY TRINITY” of Pre-test Statements:
   • NOT BEING TESTED
     “Although this is called a Usability test, you are not being tested. We are testing how well a web site performs, so you can not be wrong today”
   • NOT THE DESIGNER
     “I am not the designer, so feel free to speak freely” – ok perhaps a little white lie, but this helps open people up as they are looking at your web site. (Would you rather tell the chef or the person sitting next to you if the food was not prepared very well?)
     
   • THINK OUT LOUD
     “I encourage you to think out loud. This helps me understand your thought process” – The beauty of usability tests is you can actually learn something if they didn’t talk at all (by watching them), however, expressing internal dialog is good at helping understand why a decision was made.




PART II - SHOW THE HOME PAGE



4. Have them look at the Home page site and…
   • Find out if they get the purpose of the site, the purpose of the business.
   • Ask if they know what the main sections of the site are
   • Ask where they would start




PART III - TASK-BASED TESTING



5. Ok, the real testing begins. At this point you should have specific questions ready, geared at what the site must do well to be successful. The questions should be in the form of a scenario, especially if the user falls outside your immediate audience.
   ”If you were a business owner and looking for new cheeses to sell, where might you go?”
   ”You want to start a new bank account, how might you do this?”


• TIPS:
  • Be patient, let them muddle their own way
  • Avoid leading questions, such as: “Looking at the buttons on the right, where would you go?” or “When you see this box here, what do you do now?”
  • Do not direct them in any way, remember they are right (no pointing, don’t grab the mouse)
  • Don’t feel confined to your initial questions. Feel free to make up questions based on their actions. “From here, how would you go home?”
  • You can comment on any action they did and that THEY completed first, such as “I saw that you went to About Us, when you were there, how would you contact the business?”




PART IV - THE FOLLOWUP



6. Ok, now that you have watched them perform, you can now loosen up a bit. You can ask them why they did certain things. You can tell them what the intentions of the site are and ask why they thought differently. It’s a good time to also ask about design or branding things. Think of this as the “Focus Group” part of a usability test.




---





CSS Zen Garden - 2nd Individual Assignment

• Go to CSSZenGarden.com.
• Download the example HTML file. You will need this. You may also download the CSS file for your use as an example from this page or from the featured designs on the right, or the archive.
• You may participate in this demonstration of CSS design by creating your OWN CSS design, using their HTML template and changing this HTML file as LITTLE as possible. Create a stylesheet for this page and build the page using a design of your choice.
• You may use your creative/artistic abilities or you can look at minimalist examples and see how their solutions use little illustration and rely instead on carefully placed and styled fonts and page elements created with CSS.
• Begin by looking at the name of all the divs in the html page that are referred to in your nonexistent stylesheet. These are what you will call your CSS rules, and the html content for your divs are already existing! Add background images, padding, placement, text styles, h1, h2, h3 tags, etc.
• My example can be seen here and you can look at its CSS as well but my design was created by ME. Do not use my design, meaning my layout choice, fonts, and illustrations. The changes I have made in my HTML file are minor - I added Javascript and a link to an external stylesheet to host Google fonts, changed the author, and that's about it. The "extra" div tags at the bottom are for div tags that you may add to the design that are extra and might include visual content or whatever else is needed for your design apart from the pre-existing divs that you MUST create rules for.
• For more guidelines look at the FAQ Page. You may use CSS3 if you want to.
• The cool thing about this is that if you are finished with your design you can submit it as well for them to use as an example... if yours is chosen, people all over the web can then see your design and learn from it!



• This is due March 20th - Approximately one month, at least 30 min before class on that day.

  
  I did the assignment last weekend, but it took me a while. I do not expect you to be able to complete a well-thought out and executed design the day before it is due. Learn from last time and begin your individual projects ahead of time, as we will complete our group projects MOSTLY in class. I think this assignment will help you understand better as you will have many many examples to look at and dissect and you already have the framework and set of rules for your own creation.
• And finally, test in browsers WHILE you are creating your CSS - NOT DREAMWEAVER. You may edit with Dreamweaver, but do NOT use the split view to go by how your site looks unless your html file is opened in a browser window. Have your browser windows open and constantly refresh to see how your code is rendered while you make it.
  
  • Minimum test in these 4 browsers:
  • Internet Explorer
  • Chrome
  • Firefox
  • Safari
  • Stretch the windows around to see how the site behaves with different screen sizes.

Thurs, 2/21

Rest of Midterm Presentations

• We are finishing up with the remaining 3 groups for presentations
• For Tuesday, I would like you to PRINT OUT all your wireframes for ALL of the pages of your site and bring them to class. If you do not print them out, you will lose participation points because you will not have the materials necessary to be prepared and participate.
• READ & REACT: Usability Testing
• READ & REACT: Watch this video as homework. It will help you understand the process of usability testing. A man is sitting down with a user, and asking her questions about herself to gain demographic information, and then asking her to perform specific tasks, and asking her to narrate the process unfiltered. He is using a script and going through it with her. We will be doing a simple activity and conducting "usability testing" of your sites in paper form:
  Steve Krug's Usability Demo - PLEASE WATCH!

Tues, 2/18

Remaining Web Site & Group Project Presentations

• We will begin class by finishing up the critique with student sites we have not seen yet:
  • Leandra's Site
  • Morgan's Site
  • Rhayssa's Site
• Then, midterm presentation order is as follows for Tuesday and Thursday (All groups should be prepared though for Tuesday just in case):
  
  
  1. Payton, Michelle, Yunqi
  2. Mohammed, Morgan, Mallorie
  3. Lee, Leandra, Dave
  4. Caitlin, Erica, Ryka
  5. Anthony Z, Christine
  6. Anthony M, Katie, Nicole
  7. Rhayssa, Anna, Gina


• 15 minutes will be allotted for each presentation. All group members must be involved in the presentation and participate.
• You may present your group project deliverables any way you see fit - whether that be in an organized way on your blog, a pdf or powerpoint that you've compiled - whichever way is easier for you.
  
  

  I am looking for:

  • Organization / Preparedness
  • Content
  • Demonstration of understanding of your project and the material and ability to analyze it critically
  • Clarity / Ease of legibility - Break your information down to clear, concise ideas that fit into the time frame
  • Participation (everyone participates)


• Make sure you know which parts you are presenting individually or as a group, make sure you can present your research in an interesting, creative, engaging and simple-to-understand way!


• You will cover BRIEFLY all aspects of your project so far:
  
  
  1. Research Plan/Charter & Re-Evaluation
  2. User Research
  3. Competitor Analyses (Your 3 As-Is Analyses and a VERY brief conclusive summary)
  4. Personas
  5. Affinity Diagram
  6. Site Map
  7. Black & White Wireframes


• I am also checking for the completion of all these items Tuesday - if you have kept up with the project deliverables, these should all be finished!

Thurs, 2/13

La Fogata Web Sites!

Let's Evaluate our Web Sites in Critique based on:

• Hierarchy - Hierarchy of visual and text information - Where does your eye immediately get directed? Does it point you to the main information right away?
• Typography - Are the fonts harmoniously occupying the space with one another? Does the font help communicate?
• Legibility - Is the text and the information/images legible i.e. an appropriate reading size, line spacing, sans serif, etc.?
• Page widths - Are all the page widths consistent? Would the page width function for a web site (not evaluating for mobile)?
• Consistency - Is the branding, colors, fonts, layout design etc. consistent throughout the site?
• Contrast - Does the site provide adequate visual contrast for the best legibility? Also, visual hierarchy of contrast?
• Templates - Does the template work and create consistency? Is there something not working well with the template?
• Page Structure - Does the web site structure make sense? Does it have a header, body, footer, etc.?
• Global Navigation - Can you easily navigate to every page from every page?
• Usability - How usable is the site? Are there broken links? etc.

• Allison's Site
• Anna's Site
• Anthony M's Site
• Anthony Z's Site
• Caitlin's Site
• Christine's Site
• Erica's Site
• Gina's Site
• Katie's Site
• Lee's Site
• Mallorie's Site
• Mohammed's Site
• Michelle's Site
• Nicole's Site
• Payton's Site
• Ryka's Site
• Yunqi's Site

You get the weekend to finish your assignments and re-upload your zip files - We can revisit the ones we missed on Tuesday for a mini-critique before presentations, but I will only grade your final file structure that you upload.

Some of your sites mysteriously look very similar and use the same images from my site. Remember you are using your own design! My design was made quickly and hastily in a day. I want you to think about how you can one-up me!

About half of you used uppercase letters or lowercase letters to name your files in the code or vice versa, while actually naming your files the other way - servers are extremely picky about this. Make sure all your files have lowercase letters and always use lowercase in naming conventions just so you never confuse this. Your main file should be called "index" and should always be located within the main directory of a site.

I went back and fixed all your naming issues so your sites work - ALSO MAKE SURE that when you link items, you are linking them like so: < a href="index.html >< /a > or < img src="file/image.jpg" > and NOT < a href="C://mycomputerfiles/filefolder/filefolder/lafogata/index.html" >. This is a specific file path that will ONLY WORK on your computer. Again I changed all of yours so the files work today, but for Tuesday go back and fix this - about half of you had this problem.

Thanks... looking good! I know it is a lot of work but now hopefully you understand the challenges of designing for the web!

Tues, 2/11

Bring your La Fogata Projects in Progress for Technical Help!

• Your individual HTML/CSS assignment is due Thursday 4/13. Bring the individual project in progress with question for me!!!!
• Groups who have had missing members can catch up on finishing the group activities such as the site map, wireframes, etc.
• Remember you are creating a black and white wireframe in the design software of your choice for EACH page of your site (Your site maps show which pages you need to make wireframes for - all of them!).
• The affinity diagrams, site maps, and black-and-white wireframes for EACH page of your site is due on the 18th, same day as your graded mid-project presentations. To make your blog more organized, you can keep these three items on one blog post.
• Find time with your group to finish these activities and prepare for your presentation outside of class if you need to.
• Presentations on the 18th and 20th will be 15 minutes for each group. Each group member must contribute to the presentation of your deliverables thus far.

Attendance is Mandatory

• I have noticed a lot of you have been arriving late and some have been leaving as you please without warning me ahead of time with a VALID excuse. A valid excuse means it is something such as a family emergency, or an illness that you have a note for. Interviews, vacations, etc. are NOT valid excuses. Otherwise you are marked absent. We are doing in-class activities with your group projects, and when you do not show up and/or do not participate, you lose points. When I was an undergraduate in Design, I missed class ONCE and I notified my professor in advance. Please respect and be aware of my time, as well as the time your group is dedicating.
• As it was outlined in your syllabus, attendance is mandatory and IS part of your grade.
• This is a reminder that 4 absences is automatic failure, and 3 tardies is equal to one absence.
• Please be on time and participate in the class activities. When you decide not to show up, your group also has to do more work.
• Thanks

Thurs, 2/6

Creating Wireframes with Paper Prototypes

• Draw site features (header, body with lists, navigation, columns, footer, widgets, features, etc) with the location and name and basic visual structure of your information on pieces of paper. This page should be designed for one of your main site pages (remember we don't create the home page first - create a structure for a page that repeats the most) - Think about your branding schemes and site features - you can refer to your site map and affinity diagrams for this. You can color code each layout element that repeats on different layouts using colored paper.
• Cut your site features out and arrange them into a layout as a group - the parts can be come moveable and interchangeable to help your group decide on the best interface arrangement
• Rearrange your site features for another page
• Use the paper arrangement to create Wireframes for all the pages of your site using whichever design software you please - I gave a demo with Illustrator but you might feel comfortable using PhotoShop
• Remember that your wireframes - the versions you will be creating with design software do NOT yet include color or final logos or anything complete - they are very simple black and white versions of what a more realized mockup or prototype might look like
• Refer back to this page about Wireframes to see examples
• A quick wireframing software that design teams use is called Balsamiq
  Mockups created with this software are extremely sketchy and simple (Look at what a wireframe page for YouTube looks like as an example):
  
  
• The idea is to create rapid, quick drawings with basic interface elements, and the colors and finalized design come later
• Wireframes for all pages of your site are due 2/18 for your midterm presentations
• Here are some paper prototype examples:
  
  
  
  
• Here are some wireframe examples - you will convert your paper version to the black-and-white digital format and create these for EACH page of your site: