The Yale Style Guide is a very extensive guide on designing for the web. It features chapters on the process, usability, information architecture, interface design, site structure, page structure, page design, typography, editorial style, forms and applications, graphics, and multimedia. The Motif Style Guide is aimed for “application development, widget designers, user interface designers and window manager designers” (Marshall). It features a section on how to design menu style, dialog widgets, drag and drop facilities, interaction and interaction markets.
One thing that I found interesting to discuss in class is the idea of flexible page widths, mentioned in the “Page Design” section of the Yale Style Guide. Flexible page width is something that is increasingly more relevant now that more users are viewing sites on a mobile device, ranging from an iPhone to a Kindle to an iPad. I am interested to know how web designers account for all of the different resolution sizes they may come across. Last semester in my Interactive Foundation class, we learned how to write responsive CSS code of our websites, where we would specify in the style sheet that once the site window is smaller than a certain number of pixels, the page should resize itself. To do this for multiple different resolutions and to change other elements on the page seems like a tedious thing to do, but definitely something that is worth doing considering the amount of mobile users today.
One other thing that I found really interesting from the Yale Style Guide and would like to learn more about is typography. I’m really intrigued by Graphic Design, and I am curious to learn how one knows that one type fits harmoniously with another type. Typography on a web page is definitely a small detail that can be easily overlooked, but simple things such as the line length and justification can really make a difference for the overall reading experience of the user.
The first reading provides guidelines from the National Center on Universal Design for Learning. It extensively details how to design a curriculum for the purpose of learning, broken down into three principles: providing multiple means of representation, providing multiple means of action and expression, and providing multiple means of engagement. The second reading is called Web Content Accessibility Guidelines and features instructions on making content accessible by making it perceivable, operable, understandable, and robust.
One interesting thing I found from Web Content Accessibility Guidelines is the idea that one should make all functionality of content accessible by a keyboard interface. I certainly use a number of keyboard shortcuts that are second nature at this point, but I generally do not consider keyboard shortcuts a necessity. I am curious to learn how you can determine which functions you make accessible by keyboard and which you do not…at what point do you draw the line?
Just a somewhat humorous thing I found in Web Content Accessibility Guidelines is the fact that they explicitly state not to design content that induces seizures. First of all, who thought it would be a good idea to have flashing, blinking images in the first place? Secondly, I wonder at what point they decided that was a necessary thing to include in these accessibility guidelines.
Think about the interfaces you have explored in your homework and the interfaces you have built for your course web site and team project page. In what ways are those interfaces following the style and accessibility guidelines and in what way aren't they? Now that you know a little more about style and accessibility, what would you change about these designs?
The interface I built for my course website has very consistent navigation and though there is not too deep a structure to the site as a whole, it is always clear how to get from one page to another as well as an indicator of which page that you are currently on, which is something that was mentioned a lot in the style guides. One flaw of the Snapchat interface that I was investigating is that sometimes I find myself “lost” within the app—this violates the principle mentioned in the Web Content Accessibility Guidelines: “Provide ways to help users navigate, find content, and determine where they are.” Snapchat does this, but not in the most effective way. It could benefit from more descriptive titles and more descriptive icons that indicate the use of the app more clearly.
What are the affordances of Leap Motion versus Kinect? What do those affordances imply in terms of the types of applications they would be best for? What novel applications would you use Leap Motion for?
Leap Motion is apparently 200 times more precise than a Kinect. It relies on small gesture of the fingers rather than entire body movements. It also has no perceptible lag between a user’s motion and the perceived motion on the screen that he/she is interacting with. This clearly demonstrates how much more advanced Leap Motion is than Kinect and would allow for the types of applications that Kinect just does not have the accuracy/precision to allow for. For example, in the case of remote surgery, I would not really trust the technology from a Kinect alone, just because I know that it is not as responsive and relies on much larger gestures than the Leap Motion. Leap Motion, on the other hand, exhibits an incredible reaction speed and precision that I would much rather trust for that scenario. I would be really interested in using Leap Motion for the drawing feature and creating three-dimensional artwork on a computer. I have worked with programs such as Google Sketchup before in order to make 3D models and I do often find myself annoyed with the limited features of the mouse. If I want to move an object, I cannot move it and orbit around the space that I am using at the same time—but it appears that Leap Motion would allow for that. It would also be really cool to play around with the drawing features where you simply make gestures with your hand and it records not only the 2D line-drawing you’ve produced but also the 3D representation of it as well.
