« September 2006 | Main | February 2007 »

January 25, 2007

playing with my boyfriend's Wii

...and then we turned on the Nintendo. *cough*

Blog Assignment
This week play an interactive game and then discuss in your blog about the usability of the interface. Could the game's experience be improved if the interface was easier to use? How?

For those of you not in the know, the Wii is Nintendo's new "action-based" (my term) console system. You play by clutching what fans have dubbed the "Wii-mote", so dubbed for its resemblence to a remote, and madly thrashing around in a fashion similar to your character. If you're golfing, you grip the control like a club and swing. If you bowl, you lift the Wii-mote backwards and swing your arm forward and release. There's also a controller attachment called the nunchuck which takes the interaction into both hands, allowing you to realistically float like a butterfly and sting like a bee for boxing, etc. One of the most interesting and initially confusing aspects of the system is the abandonment of using a directional control pad to select items. You instead aim the Wii-mote at the option and click. Literally point and click. It's a mind trip, but you quickly get accustomed to the motion.

In the game Wario Ware, you must complete ridiculous tasks/mini games in 3–5 seconds using various gestures/grips. For example the dumbell motion requires you to hold the Wii-mote like a dumbell and lift. There's a janitor pose for sweeping games, a tug of war motion that's used to vacuum and plane wood, and much much more. There's a thumb wrestler motion that requires you to hold the Wii-mote upright with your thumb on top. One of the thumb wrestler games requires you to slowly pick up a glass and drink. You see the character on screen in profile, and my initial reaction was to move the controller to the left, mimicing the screen animation. After losing a few times, I realized I had to lift the Wii-mote to my mouth as if I was drinking. Overcoming the disconnect between self and game is one of the most amazing things on the Wii. You become way more involved in the games because you're acting out the actions on screen. It's cool.

On the downside, the motion control of the Wii-mote can take getting used to. It's easy to go off screen at first, causing misfires and foiled attempts at playing. I don't know if it's necessarily a technology thing (there's a motion sensor placed above the tv, a motion sensor in the Wii-mote, and the controller also acts as a light gun. Gyroscopes are probably involved somewhere.). A lot of the games for the system so far are focused on the controller, and in Wario Ware it figures in as a plot device. The Wii-mote makes the system far more interactive than any other controller before it. I think the system needs some time to mature to make the actions less contrived.

Analysis of three web sites

A. Content/Subject
CNN.com NYTimes.com DuluthSuperior.com
News, International News, Local News, Entertainment, Sports


Source of the communication (purpose)
News organization. Media represents "the fifth estate" and has an obligation to keep the public informed. All organizations create their own news, but Duluth News Tribune relies more heavily on Associated Press than a larger organization like the New York Times.


User (needs, interests)
The user needs to know the news, and they need to know now. Users of CNN.com are more likely to be international, as the World/International edition of CNN is more prominent. CNN markets itself as a general news network, whereas the New York Times and Duluth News Tribune are tied to regions. Because of the reputation of the New York Times, it attracts a much larger audience and its content represents a broader perspective. It offers cultural and travel reviews of cities worldwide. Readers of the Duluth News Tribune, as the alternate URL duluthsuperior.com suggests, are local. CNN.com and the New York Times place articles about Iraq and world conflict at top, whereas the Tribune is more likely to place issues of local political importance above all else.

Context (similar web sites, situation – time for exploration, circumstance)
All news websites place either important or the most recent headlines first. One of the main critiques of news websites is that readers are more likely to go to only the articles they are interested in, thus isolating their knowledge. It is claimed that the presence of multiple articles on a page in print encourage readers to consider every article instead of the most appealing.


B1. Organization of content (parts of the web site/navigation scheme)
The New York Times and Duluth News Tribune both concentrate their linkage on the lefthand column in oppositions to CNN's top and bottom heavy navigation. Second level pages are significantly different for the Times and CNN. The Tribune keeps its layout consistent throughout, which works, but is less visually appealing. CNN's navigation is somewhat confusing, because when you click on a section header (top link), you're taken to a page where the sections move to the left, which doesn't happen anywhere else.

B2. Graphic user interface:

• Grid design (communication, functionality)
Duluth New Tribune maintains a consistent grid throughout its site. The only variation is the extra column of information on the front page listing polls, photos, and most read stories. The wider margins and greater use of whitespace on CNN and the NYTimes makes text more legible than the jampacked (with nothing) News Tribune. The text on the NYTimes defaults to a much larger size.

• Usability (communication, navigation, and accessibility elements)
CNN is the only website not requiring registration to read general articles. While it's free to register at NYTimes and Duluth Tribune, it is an annoyance for a first time user who has followed a link to read an article. CNN abbreviates its articles at the top by listing 3-5 "highlights" which requires readers to read even less in order to pretend to know what they are talking about.

• Style (appearance and location of graphic, multimedia, and navigation elements)
CNN and the New York Times can afford a more sophisticated interface, which reflects their offline personas. CNN is the busier of the two, using color bars and shading buttons, echoing the network's attention span depriving television counterpart. The site also focuses on video clips because it is primarily a television news network. The Times is primarily black and white with blue for headline links and one prominent front page photograph.

January 23, 2007

Web Style Guide Ch 2 & 3 Highlights

Content / Themes of Web Sites
-Design with your audience in mind

*Offer services and products, not just insider corporate information
*Realize users have slower connections and outdated technology

-"Chunk" content into easily readable and digestible sections

-Five basic steps in organizing Information

1. Divide your content into logical units
2. Establish a hierarchy of importance among the units
3. Use the hierarchy to structure relations among units
4. Build a site that closely follows your information structure
5. Analyze the functional and aesthetic success of your system

-The web is bi-directional. Users expect to be able to provide feedback
-Custom server error pages should be well-designed and informative, offering users ways back to content or how to find what they were looking for

Basic information structures
-Pages must be freestanding
-Header/footer needed universally since people can access a webpage from any point
-Make clear the "who, what, where, when"
-Keep navigation metaphors simple, consistent
-Use consistent modular designs
-Consistency and predictability are key
-Webpages are not books

* with freestanding pages, ordered documents need a more intuitive alternative to the non-linear "back" and "forward" buttons (static links to "next page" and "previous page" are helpful)

Elements / Parts of a Web site
-Every webpage needs:
* An informative title (which also becomes the text of any bookmark to the page)
* The creator's identity (author or institution)
* A creation or revision date
* At least one link to a local home page or menu page
* The "home page" URL on the major menu pages in your site

Basic components of the GUI
-"In interactive documents graphic design cannot be separated from issues of interface design."
-Menus need to be logical and concise, but avoid nesting too many unnecessary steps

January 18, 2007

Regurgitation of Information 101

Internet
an electronic communications network that connects computer networks and organizational computer facilities around the world

World Wide Web
a part of the Internet accessed through a graphical user interface and containing documents often connected by hyperlinks -- called also Web

Web server
1. A computer that is responsible for accepting HTTP requests from clients, which are known as Web browsers, and serving them HTTP responses along with optional data contents, which usually are Web pages such as HTML documents and linked objects (images, etc.).
2. A computer program that provides the functionality described in the first sense of the term.

Host
A web hosting service is a type of Internet hosting service that allows individuals and organizations to provide their own websites accessible via the World Wide Web. Web hosts are companies that provide space on a server they own for use by their clients as well as providing Internet connectivity, typically in a data center. Webhosts can also provide data center space and connectivity to the Internet for servers they do not own to be located in their data center, called colocation.

Web site
a group of World Wide Web pages usually containing hyperlinks to each other and made available online by an individual, company, educational institution, government, or organization

Web page
A web page or webpage is a resource of information that is suitable for the World Wide Web and can be accessed through a web browser. This information is usually in HTML or XHTML format, and may provide navigation to other web pages via hypertext links.

Web browser
A web browser is a software application that enables a user to display and interact with text, images, and other information typically located on a web page at a website on the World Wide Web or a local area network. Text and images on a web page can contain hyperlinks to other web pages at the same or different website. Web browsers allow a user to quickly and easily access information provided on many web pages at many websites by traversing these links. Web browsers format HTML information for display, so the appearance of a web page may differ between browsers.

Podcast
A podcast is a media file that is distributed by subscription (paid or unpaid) over the Internet using syndication feeds, for playback on mobile devices and personal computers[1]. Like 'radio', it can mean both the content and the method of syndication. The latter may also be termed podcasting. The host or author of a podcast is often called a podcaster.

Cache
a computer memory with very short access time used for storage of frequently or recently used instructions or data -- called also cache memory

HTML
a markup language that is used to create documents on the World Wide Web incorporating text, graphics, sound, video, and hyperlinks

XHTML
The Extensible HyperText Markup Language, or XHTML, is a markup language that has the same depth of expression as HTML, but a stricter syntax. Whereas HTML is an application of SGML, a very flexible markup language, XHTML is an application of XML, a more restrictive subset of SGML. Because they need to be well-formed (syntactically correct), XHTML documents allow for automated processing to be performed using a standard XML library—unlike HTML, which requires a relatively complex, lenient, and generally custom parser (though an SGML parser library could possibly be used). XHTML can be thought of as the intersection of HTML and XML in many respects, since it is a reformulation of HTML in XML. XHTML 1.0 became a World Wide Web Consortium (W3C) Recommendation on January 26, 2000. XHTML 1.1 became a W3C recommendation May 31, 2001.

XML
(extensible markup language) a markup language with use and design similar to HTML but employing tags that indicate the logical structure in addition to the display specifications of the coded data

JavaScript
JavaScript is the name of Netscape Communications Corporation's implementation of the ECMAScript standard, a scripting language based on the concept of prototype-based programming. The language is best known for its use in websites (as client-side JavaScript), but is also used to enable scripting access to objects embedded in other applications.

IP Address
(internet protocol) the numeric address of a computer on the Internet

URLs
the address of a resource (as a document or Web site) on the Internet that consists of a communications protocol followed by the name or address of a computer on the network and that often includes additional locating information (as directory and file names) -- called also uniform resource locator, universal resource locator

Domain name
a sequence of usually alphanumeric characters (as Merriam-Webster.com) that specifies a group of online resources (as of a particular company or person) and that forms part of the corresponding Internet addresses

HTTP
hypertext transfer protocol; hypertext transport protocol

FTP
(file transfer protocol) a system for transferring computer files especially via the Internet

ISP
Internet service provider

IPP
# Internet Printing Protocol - print files on Internet/Intranet printers
# Internet Presence Provider - another name for a web host

Modem
a device that converts signals produced by one type of device (as a computer) to a form compatible with another (as a telephone)

Cable modem
a modem for connecting a computer to a network over a cable television line

Ethernet
a computer network architecture consisting of various specified local-area network protocols, devices, and connection methods

Wireless
The term wireless is normally used to refer to any type of electrical or electronic operation which is accomplished without the use of a "hard wired" connection. Some of these operations may also be accomplished with the use of wires if desired, while others, such as long range communications, are impossible or impractical to implement with the use of wires.

CSS
In computing, Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML, but the language can be applied to any kind of XML document, including SVG and XUL. The CSS specifications are maintained by the World Wide Web Consortium (W3C).

CSS has various levels and profiles. Each level of CSS builds upon the last, typically adding new features and are typically denoted as CSS1, CSS2, and CSS3. Profiles are typically a subset of one or more levels of CSS built for a particular device or user interface. Currently there are profiles for mobile devices, printers, and television sets. Profiles should not be confused with media types which were added in CSS2.

Blog
a Web site that contains an online personal journal with reflections, comments, and often hyperlinks provided by the writer

MP3
from the file extension .mp3 used for such files, short for MPEG Audio Layer 3
1 : a computer file format for the compression and storage of digital audio data
2 : a computer file (as of a song) in the MP3 format

JPEG
Joint Photographic Experts Group
: a computer file format for the compression and storage of usually high-quality photographic digital images

GIF
graphic interchange format
: a computer file format for the compression and storage of digital video images; also : such an image itself

GUI
graphical user interface

PHP
PHP (PHP: Hypertext Preprocessor) is a reflective programming language originally designed for producing dynamic Web pages.[1] PHP is used mainly in server-side application software, but can be used from a command line interface or in standalone graphical applications.

January 16, 2007

Interactive Design II First Journal

What is Interactive Design?
Interactive design is design that is interactive (ha). Interactive design is any design for a digital medium that allows the user to respond and therefore becomes user-centered. In this form of design, the user can shape the content, depriving the designer of his or her traditional authority. In interactive design, programs can break and users can override your design with fuschia and Comic Sans.

What do you want to learn in the course?
I'd like to know php and javascript. I'm starting to feel comfortable with the design aspects of html, but the more heavy duty programming stuff, databases especially, would be useful in creating sites that are truly interactive. I can use and install other people's scripts, but creating my own dynamic content and figuring out coookies are some goals.

What applications / programming languages do you know or want to learn?
I know HTML, XHTML, and CSS. I learned flash last semester, and I have been using Dreamweaver for very basic stuff. I've started creating my own site templates, but the more complex aspects of Dreamweaver (site objects, testing servers, ColdFusion, etc.) elude me.

two thousand and seven

THE FUTURE IS NOW!