We’re over the hump! Six more weeks and if we’re lucky they’ll cut the last one down to three days.
Our Meeting
We had one teammate absent (he’s moving) and my audio and video never finished connecting to our Google+ HOA, so our other teammate was the only presenter. Not to be put off by this, I did my presentation on my own. I covered good user interface. Hopefully it will work for me next time I need it. I have several nephews and a niece who constantly paw at my headphones. I was afraid they were broken! Thankfully, they still work fine.
Good User Interfaces
I covered ten topics that are important for good user interface based on information I found in this article. There are 12 items in their list, but only 10 applied to our team:
1) Highlight important info as it appears. Use CSS Animation or Transitions to highlight newly AJAX’d info to an area of the screen. IE: Draw the eye to it.
2) Have keyboard Shortcuts. It’s important to have as many ways for your user to navigate your app as possible. Use tabbed menus, site menus and intuitive keyboard shortcuts. IE: Make them meaningful.
3) Use color coding. Help people identify the various aspects of a webpage with a central color coding scheme.
4) Personalization. Allow people to personalize their user experience. Avatars, user names, colors, text, etc.
5) Tooltips/user messages. Have small popup windows with helpful messages to guide your users along. Make sure they can be turned off and are closable.
6) Color code/use icon for each tooltip/user message. This helps users a lot. Match an icon/color with each message type and users will be able to see what’s going on by site. This works for things that are used over and over. For unique messages, create a standard popup window so the user knows that they should read it. Always make the window closable!
7) Tabbed navigation. It looks nice and is trending right now. Very convenient for smaller screens.
8) Darkened window behind popup window. Make the main screen a bit darker while another screen pops up. This shows a change of focus.
9) Use Slideshows (or light boxes). Even pages of text can be presented in a slide show. Light boxes for a series of photos. It looks really slick.
10) Make forms short. Your app may be used on really small screens. Make sure to keep them short. Use multiple ones for different things. Have a way at the beginning to choose the type of form you need, or some such thing. Make it easy!
CSS Animation
I made a green circle bounce based on a tutorial I found. I had to come up with the -webkit- part of the code myself. That was fun. Pretty simple. Now I know.
JavaScript Objects
I played around with JavaScript Objects again. This time I wanted to use a function to construct my objects. You basically set something up like this:
JavaScript
function functionName (arg1, arg2, arg3) {
this.attribute1 = arg1;
this.attribute2 = arg2;
this.attribute3 = arg3;
}
Next we add the objects were setting up:
JavaScript
var myObjectA = new functionName(argA, argB, argC);
var myObjectB = new functionName(argA, argB, argC);
var myObjectC = new functionName(argA, argB, argC);
var myObjectD = new functionName(argA, argB, argC);
var myObjectE = new functionName(argA, argB, argC);
What happens here is that each object (myObjectA, etc.) calls the construction function and passes the three arguments enclosed in the parentheses. Each call to the function assigns the appropriate argument to the appropriate attribute. Now the object and its parts can be pulled up with the objectName (myObjectA).attribute name. As in myObjectA.attribute3. Very useful code indeed.
Conclusions
Well, no surprises here. It was a good week. We have one more week of teaching ourselves the nine topics and then we move on to the coding!
My School Blog 