-
Notifications
You must be signed in to change notification settings - Fork 0
/
r5.html
72 lines (66 loc) · 16.5 KB
/
r5.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Katie Soldau - Reading 5</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body class="page_readings">
<div class="container">
<div class="content">
<div id="top"></div>
<div class="name">
<p>K<span class="smaller">ATIE</span> <span class= "taller">S</span><span class="smaller">OLDAU - IS4300</span> </p>
<p class="email"> [email protected] </p>
</div>
<div class="navigation_bar_container">
<div class="navigation_bar">
<ul class="nav_options">
<li><a href="index.html">about</a></li>
<li><a href="readings.html" class="current">readings</a></li>
<li><a href="homework.html">homework</a></li>
<li><a href="team_project.html">team project</a>
<li>
</ul>
</div>
</div>
<!-- for navigation -->
<div class="readings">
<!-- R2 -->
<div>
<h1 >
<div class="h1_text">Reading 5 -- Interactions and Design guidelines</div>
</h1>
<h2>Styleguides</h2>
<p>The <a href="http://www.webstyleguide.com/wsg3/" class="citation">Yale Style Guide</a> is all about web design. It begins by explaining the process for web design, which involves finding a development team and then creating a project charter document. A project charter is a concise statement of goals, values, and intent that give a project a direction. Chapter 2 discusses universal usability, a concept involving accessibility, usability, and universal design. The more usable a tool is, the more likely all users are to achieve their goals. Chapter 3 goes into information architecture. This entails conceptual models and general designs that are used to plan, structure, and assemble a site. To make sure a site functions well it needs a solid and logical organizational foundation. Chapter 4 considers interface design, design that involves the GUI of a system. Navigation and wayfinding are crucial aspects to this type of design and help readers know where they are within an organization of information. Chapter 5 discusses site structure. This is something that decides how well a site works within the entire web, whether it can be read by software, and if it can be indexed by search engines. Chapter 6 goes off of this and examines site structure. Standards, rules, and conventions can be extremely helpful for developing the structure of a site. Chapter 7 talks about page design. It says web site organization, graphic design, and typography are crucial in creating a successful site. Chapter 8 then concerns itself with typography. Typography aids with both verbal and visual communication. Chapter 9 discusses editorial style and how it’s important that web sites don’t end up as isolated fragments of information. Documents meant to be read online should be precise and allow for easy scanning. However, links shouldn’t be used to substitute for actual content. Chapter 10 is all about forms and applications. When dealing with interaction like this, sites should favor well-supported technology and use advanced scripting only to enhance. Chapter 11 discusses graphics and how successful websites need consistent interface and identity graphics. It also talks about how the medium in which a graphic is being viewed can limit what said graphic can be. Lastly, Chapter 12 discusses multimedia technology. Sites should use stable technology to display this type of media so as to reach a majority of their clients. Also, it’s important for designers to not get too carried away when dealing with multimedia. They should use images, animations, video, and sound only when it’s relevant to their message.</p><p>
The <a href="https://www.cs.cf.ac.uk/Dave/X_lecture/node19.html" class="citation">Motif Style Guide</a> attempts to enforce a standard style through the look and feel of its applications, window manager, and default widget actions. It provides guidelines that are a framework for application development, widget designers, user interface designers, and window manager designers. It says that to allow the user great ease of use, no applications should deviate far from this norm. When following this menu bars must be placed horizontally at the top of an application just below the title area. It must contain only cascade buttons with pulldown menus and each menu in the menu bar should have a single letter mnemonic attached for easy keyboard selection that must be indicated by underlining. The guide lists mnemonics that should be used for general functionality. Menus should be simple, similar elements should be grouped together, and destructive actions should be separate from frequently chosen actions. Menu items should be listed by frequency and order of use.
</p><p>
Other areas are also touched upon by the Motif Style Guide. It says applications should only display dialog boxes when they’re required and that specific dialog widgets should by used for specific occasions. The guidelines for drag and drop say that the middle mouse button should be used for drag and drop, the user should be able to select the operation that is used (typically by using a key selection in combination with mouse button), and that drag icons should have source, operation, and state indicators. The guide says interactions should be uniform across the application. To do this, interactions should be as simple as possible, feedback should be provided, and users should be allowed flexibility.</p><p>
Lastly, the Motif Style Guide talks about international markets. To accomplish internationalization of an application text input should be from a keyboard that can provide all characters of a local language, data formats should be country specific, graphic symbols should be made as cross-cultural as possible, scanning direction should be taken into consideration, code for software should be modularized, and screen text should be simple and brief. </p><p>
In class I would like to talk more about universal usability. I want to know how designers can adequately create a site that can be used by people who, for example, have poor eyesight, limited hand-eye coordination or motor skills, colorblindness, or blindness. Are there certain rules that almost everyone follows to make sure their sites are usable by these people? Is there a standard for how to make sure people who are colorblind can still easily use your site? Since I have none of these characteristics myself I’d like to know how I can design and implement a site that could cater to these types of users as well. I found the Yale Style Guide to be helpful and liked how it talked about how to use techniques that all users can access and to try to stay away from new technologies that not all browsers or other things have not yet adopted. However, I wish it spoke more about how to utilize new technologies or techniques for users who would be able to experience them. I don’t think it’s necessary for designers to completely shut themselves off from new stuff just because not all of their users can utilize it. I certainly see the importance in designing for universal usability, but I wish the reading spoke more about how to also cater to users who have capabilities to view things differently because of new or advanced technology. One thing in the Motif Style Guide I didn’t completely agree with was how much it stuck to the notion that standard conventions should be followed. I understand that this makes things easier across applications, but don’t see how this could allow for great growth or innovation in the field. I’m not implying that these guides shouldn’t be followed at all, but I think it’s okay for some boundaries to be broken down once in a while when trying to create something new. </p>
<p>
The interface I’ve built for my course website follows some of these guidelines, but does not adhere to all of them. I think that the way I currently have divs set up makes it so that the site wouldn’t behave that greatly if the size of the text were increased. Although I do think my team project site might fair better in this regard. I also haven’t perfectly used HTML elements for my personal course site to help aid people who are blind or have very poor vision. I also haven’t implemented the ability to control everything in the site from the keyboard, so that will be something I’ll look into (I’ve never done it before). However, I think I do have a consistent interface and navigation/wayfinding that’s decent. I also happened to followed the Motif Style Guide’s want to have menu bars that go horizontally across the topic. I haven’t talked about any websites in my homework, but the applications I’ve talked about have followed some of these guidelines as well. For example, iCal has a solid and logical organizational foundation, page design, consistent interface, and reasonable forms and applications. There’s a menu bar at the top and mnemonics are used. I can’t quite speak to the internationalization of these interfaces or how well they might perform for users who are physically handicapped in anyway because I’ve never used the web in such a way before and would not know how to adequately test such a thing out -- perhaps that’d be something useful and important to learn. I don’t think a lot of sites follow the accessibility guidelines though. Sites that I generally visit seem to only provide content and expression in one form or another and aren’t able to bend to different users. </p>
<h2>Accessibility</h2>
<p>
The <a href="http://www.udlcenter.org/aboutudl/udlguidelines" class="citation">Universal Design for Learning (UDL) guidelines</a> are designed to help create curricula that meets the needs of all learners. UDL gives all people equal opportunities to learn. There are three main principles of UDL: representation, action and expression, and engagement.
</p><p>
Providing multiple means of representation, the first principle, is there because people perceive and comprehend information in different ways. To circumvent this problem, options for perception can be provided. Important information should be provided through vision, hearing, or touch, and in a format that allows for adjustability by the user. Options for language, mathematical expressions, and symbols should also be provided to ensure clarity and comprehensibility for all learners. Options for comprehension play a role as well since not all people come in with the same background information or information processing skills.
</p><p>
Providing multiple means of action and expression, the second principle, is important because different individuals approach learning tasks very differently. Allowing for multiple physical action options is necessary because it makes sure learners with physical disabilities, blindness, or any other disability are not discounted from the learning process. Different options for expression and communication should exist because people with different expressive abilities are able to showcase their knowledge, ideas, and concepts in different ways as well. Options for executive functions should be provided because not all people have the same executive capacity. To make sure this isn’t an issue, lower level and higher level skills should be scaffolded to become more effective.
</p><p>
Providing multiple means of engagement, the third principle, is necessary because learners vary widely in the ways that they’re motivated to learn. Creating different options for recruiting interest can help with this because different people are not all attracted to the same material. Options for sustaining effort and persistence are important as well because they can equalize accessibility of learners who have different self-regulation skills and motivation. Lastly, having multiple options for self-regulation is useful because it can help learners develop their intrinsic abilities to regulate their own emotion and motivation. This helps equalize everyone’s ability to self-regulate.
</p><p>
<a href="http://www.w3.org/TR/WCAG/" class="citation">WC3's Web Content Accessibility Guidelines</a> are another set of guidelines looking to make the web more accessible. The four main principles described are perceivable, operable, understandable, and robust. To make sure sites are perceivable to a maximum number of users, alternatives for text, time-based media, and presentation should be provided. To make systems operable, user interface components and navigation has to be operable. To do this, a site keyboard should be made accessible, users should be provided enough time to read and use content, and content that causes seizures must not be created. To make an interface understandable, text and content should be made readable, web pages should operate in predictable ways, and users should be helped in avoiding and correcting mistakes. Lastly, the content should be robust enough so it can be interpreted by a wide variety of users and assistive technologies.
</p><p>
In class I’d like to talk about how to cater to all user’s needs. I want to know how to make sure a site is accessible to a maximum numbers of users while not bogging down the site with tons of options or controls. I see how, for example, providing different means for expression and communication should exist if a site is meant to teach, but don’t quite understand how that would actually translate into a design or functionality. I’d never thought about how to cater to every user’s needs while building an educational website or something of the sort, so I found that part of the Yale Style Guide interesting. I’d thought about that in terms of general classroom techniques or learning in the classroom, but hadn’t thought about how it applied to the web. I’d like to see how all of those guidelines would come to fruition in an actual website. </p>
<h2>Leap Motion</h2>
<p>The Leap Motion and Kinect are fairly similar in that they both observe movements of the body and translate that onto a screen. However, a Leap motion has affordances more geared towards precise and smaller movements. Leap Motion co-founders Michael Buckwald and David Holz say their device is 200 times more precise than Kinect (<a href="http://www.wired.com/gadgetlab/2012/05/why-the-leap-is-the-best-gesture-control-system-weve-ever-tested/" class="citation">Baldwin</a>). For the time being it seems as though a Kinect will be more useful for games involving a person’s whole body and/or big gestures. The Kinect is not extremely precise and has a large space it can track movements in so that lends it to this. A Leap has a a small space (one article said 8 cubic feet and the other said less than that) that it can track movements in. A Kinect has a much greater range than that, but is not as precise and cannot deal with small movements as well as the Leap does. </p><p>
Since the Leap is so small, is not too expensive at $70, doesn’t need large gestures to use it, and has precision up to .001mm, this device could be geared more towards something that could act as a means of navigating through a computer system or act as a supplement to a track pad. It might also be able to aid in controlling some sort of device that aids in communication for those with physical or mental disabilities. The Leap also seems as though it would be better equipped to provide a way to play games on the computer through hand gestures. This was nicely showcased in a <<a href="http://www.theverge.com/2012/6/26/3118592/leap-motion-gesture-controls" class="citation">video in one of the articles</a> of the CTO of the Leap playing Fruit Ninja. The Leap would be great for games like this because it utilizes a small space and small/precise gestures. Also, the response time is extremely speedy and essentially not noticeable, which makes it a good candidate to use for games where hand gestures provides the means of play. </p><p>
I think the Leap would also be suited more towards designers or artists and allow them to virtually use their hands to create. Hand gestures, individual finger gestures, the angles of fingers relative to the display, and tools are all registered by the Leap. If you’re holding a pencil, for example, the system can tell the difference between that pencil and your fingers (<a href="http://www.theverge.com/2012/6/26/3118592/leap-motion-gesture-controls" class="citation">Pierce</a>). These characteristics lead me to believe it might one day be easy to create a virtual sculpture, painting, etc. by using the Leap.</p>
</div>
<!-- end of R2 -->
<!-- for content -->
</div>
<!-- for container -->
</body>
</html>