Thursday, November 18, 2010

Practicing with Forms

Here's a rough draft for a form that takes payroll information for subcontractors on a large construction site. The look is pretty formal, but I'm not exactly happy with it. The form uses some CSS3 Features such as rgba() and border radius. The color scheme is pretty bland, but matches the logo of the company it was designed for. Maybe when I show this first draft to the team they will find it useful. See the form here.

Detail, Detail, Detail

If you are selling a product or service the details of that product or service is probably what make or break your business. For example one of my favorite fast food restaurants is Chipotle and if the burritos didn't taste exactly the same every time I wouldn't be such a loyal customer. Specific qualities about Chipotle's burritos are that 1) they have a distinctive delicious taste, 2) they are huge, and 3) they are sold at fast food prices. Any detail page about Chipotle's burritos would have to capture those points. In my opinion a detail page should paint a picture about experiencing or using that product or service. After writing this paragraph I visited Chipotle's website, went to the detail pages about the menu and found that their detail page on the burrito illustrate my previously mentioned views! A huge delicious burrito was pictured with an animated banner wrapped around it stating something about how delicious the food is along with a caption that gave a more detailed description of all the ingredients. They didn't mention price in terms of a monetary value, but elsewhere on the site they emphasize how it is not your "typical fast food."

Web Design for ROI by Loveday and Neihaus gives lots of tips on how to make detail pages sticky so that customers do not navigate away from the page. It is important to let customers make a connection while on the page, so descriptive images or text can really make the detail page more memorable. I really like to see multiple angles of shoe or clothing items because without being able to try something more detail about how it looks can make a reluctant online shopper like me more confident about his or her choice. This day and age we are accustomed to seeing customer rating and feedback. I know people who only stay at hotels and book vacation packages if there is good customer feedback. If a details page about a hotel does not have built in tools that allow for customer satisfaction then some of my friends won't stay there at all. Having an icon that someone can glance at to reflect that data is a huge plus in today's market where sales are driven by customer input.

For my midterm I created a website for a home-based catering business. I see now that images of food are great, but cannot overshadow the importance of rich media that can show the service in action. Video and images of the catering service being performed can be just as important if not more important that close-up shots of food on a pretty plate. This would be showing the image in context, another point emphasized in the book. For example when a prospective customer gets to the form and decides they want to be contacted in order find out more information, they should want the service just as much as the mouth-watering food. That indeed might be the point that makes a customer buy-in. The concepts taught in the book appear to be quite logical when you really think about them. I am sure that I will be more aware them as I continue in my studies of internet technology.

Sunday, November 14, 2010

HTML5 Form for Student Info

I created a form to obtain student information.  In a typical high school classroom teachers are known gather student information on the first day of school on a 3X5 notecard.  Although schools have student databases information tends to be outdated or difficult to access.  I was thinking it would be ideal if teachers could obtain this information from all their students through an HTML form that would automatically add the data to an excel spreadsheet where teachers could access it.  It would be as simple as taking the class to the computer lab on the first day of school.  Of course it would really be ideal if all the information was collected only once from each student in the school and retrieved in groups by class.   My school system recently got a new student data management system to which I have limited access and stores limited information.  The types of things a teacher may find interesting, such as a student's challenges in their subject would not be stored in that database.  My form requests similar course-specific information, not just the demographic information.  That information could then be appended into text file, then imported to a spreadsheet as opposed to a full-on database.  This would make it easily accessible to a teacher in their classroom.  Though google-docs has tools that can allow anyone to easily create a form for this type of thing, student information may be confidential, and it may be risky, for legal reasons, to have it on the world wide web.  Here's the link to the Student Information Form.  

I did have a few issues with the HTML5.  The placeholder attribute did not show in any of the browsers.  I also found that the built in validation for telephone did not work at all, although listed the type as tel.  I guess as it becomes more mainstream all of the functionality will begin to work.

Special thanks to Inayaili de Leon's blog/ tutorial called "Have a Field Day with HTML5 Forms", I was able to successfully complete and style my form.  

Thursday, November 11, 2010

Who's Who on the Web

Last week, J Cornelius, of Coffe Cup software and president of Atlanta Web Design Group spoke to my Master of Internet Technology class. What struck me the most about the presentation, apart from his enthusiasm for web design, was how often he encouraged us to learn about other pioneers in the field. Some of the names he mentioned I was familiar with, but most I was not. Here are the people I remember him mentioning.

Patrick Haney

is a member of the Web Standards Group and co-founder of Hanerino a a design studio outside Boston. He enjoys speaking about design and web for browsers. You can find his webpage here.

Paul Irish

is a front-end web developer. He is known for his work with fonts and works on Devloper Relations for jQuery and Google Chrome. See his bio here.

HÃ¥kon Wium Li

is the creator of CSS and Cheif Technical Officer of Opera browser. Find his bio through Opera's website.

Eric Meyer

is a CSS and Web standards expert. He is the principal consultant for Complex Spiral Consulting. See his bio here.

Johnathan Snook

is a writer of web standards. He is known for his design and "impeccable mark-up and code." See his bio here.

Jeff Zeldman

is one of the first designers, bloggers, and independent publishers on the web, and one of the first web design teachers. He currently hosts the online show, "The Big Web Blog," which I have posted about in the past. He is a member of several organizations related to web development and design. See his bio here.

I am currently not a web design professional but hope to make some shifts in that direction by the time I graduate. I’m sure that knowing more about these people's contributions to the web and joining the Atlanta Web Design Group will be a step in the right direction.

Thursday, November 4, 2010

Podcast Review: Innovations in Web Input

Luke Wroblewski, formerly of Yahoo is an expert on rich web interactions. As websites become more and more interactive, it's in every web-designers best interest to stay up to date on trends and tips. The three points Luke makes with regard to innovations in input are:
  1. Rich Interaction
  2. Multiple Sources for User Input
  3. Taking Advantage of what has already been done.
The one that struck me most were 2 and 3.

With more technologies like Google Instant, users are expecting real-time feedback when they put input into a form. This type of rich interaction is essential on a modern website, but now that users are inundated with forms simply entering the same information over and over can be really frustrating. I personally can't stand filling out the same information repeatedly and almost never upload pictures to websites. Wroblewski emphasizes the importance of using other sources for input such as Twitter, Facebook, e-mail etc. Not only does the user have a less typing to do on his or her end, but the website now has access to all the additional information that comes along with that account. I tend to avoid social networking sites because I don't like to share too much personal information and don't like to feel tracked, but most people welcome the convenience of features that will help them bypass a form.

Another interesting conclusion is that most of the time people spend on the internet is NOT spent on the same site and and a web designer can gather information from interactions on those sites to use on his or her site. This is where browser extensions, Twitter, Facebook, calendars, etc. can be really useful. Mostly through the use of cookies, a user's interactions with other sites can be measured and analyzed to create more functional forms or to gather information to fill in the fields of forms. The more people interact with the web in general, the more rich the data extracted about them.

The web is an amazing tool for interaction, which has its roots in forms. Static web pages are rare these days and analysis and understanding of modern uses of forms will be a huge part of designing for savvy web users.

Search & Usability

When I am searching for information on websites with lots of content, the first thing I usually do is search for what I'm looking for! I tend not to waste any time at all with the navigation bar or reading of text on the page. On the other hand, when I'm just browsing, headings, photos, and aesthetics really draw my attention. A combination of findability on a website and great graphic and visual design is essential to a highly usable website.

Search has truly revolutionized usability. Searching a content filled website by only navigating through the main page can be really frustrating. Even a poorly organized website doesn't seem as annoying because search engines make the information accessible. I am not sure what the process is for powering the search on a website through Google or Yahoo, but I imagine that it is quite easy. In short- we've all been spoiled by search engines and cannot ignore the impact they've had on web usability.

Cool websites really improve user experience. I love visiting websites that are creative! Web Designer Wall is my favorite website for design. Before I even knew that I would pursue a studies in web design or computer science, I was inspired by that site. Everything just looks so creative and for a website on design the layout, color scheme, and graphics made it far more credible. For me the trendiness of a website has a direct correlation with how long I stay on a website.

Thursday, October 21, 2010

Accessibility for All!

I love the idea that making the web accessible for people with disabilities is really making the web accessible for everyone. It is true in education that the more the senses someone uses and engagement they have with what they are learning, the more likely they are to retain the information. For example, when learning a language it is best to read it, write it, hear it spoken, and speak it. Although using smell, taste, and touch may not seem applicable to learning a language, eating or preparing a meal of a new culture creates a meaningful experience that is associated with the language. This makes things like vocabulary more accessible in a student's memory because other vivid memories are triggered. In web design interactivity and accessibility translate to a stickier website that is more likely to be used by all types of people.

I also like the idea that accessibility is about people first. It is easy design for yourself and not the users, especially those with disabilities you do not have. In the beginning, it takes more time and patience to remember to always include "alt" attributes for photos,