April 7, 2007

readymade CSS layouts

The internet these days is just so easy. Check out some cross-browser supported, CSS columnar layouts ready to use.

March 17, 2007

blog catch-up

Week 5: Blog about a Kiosk you have found... What do you think about it? Pros and Cons?
Near TCF Bank on campus, there is an "automated teller machine" which I recently explored. Clear on-screen instructions combined with animated graphics made it apparent I was to insert and remove a magnetic striped card. I entered my personal identification number (2) and a screen with more options appeared. I opted for a withdrawal and selected an amount. The machine asked if I would like a receipt, to which I replied no. I was then issues cash. Of all the kiosks I have interacted with, I like this one by far the most. Bribery may be a factor. I also appreciate that most of the sounds have been disabled, because if anyone used it last fall or before, every key punch made a beep. Annoying. The only con for the machine is that when I take money out, a matching amount is removed from my bank account. I'd prefer free money.

Week 8: Why is accessibility using css important or not important for your current web design project?
Annie and I are redesigning the Arrowhead Regional Art Council website, which provides numerous grants to artists and art organizations in the area. Accessibility is essential, because access to the grant applications and information must be universal to provide equal access. If the site is not accessible, disabled artists would be unable to use the provided services.

March 2, 2007

purple monkey dishwasher

Do you find the above image distracting? If it were on a billboard and you were driving, would you get into an accident? Duluth is seeking to restrict electronic billboards, which at this point is a little silly I think. The signs are not yet animated. They are static images, that maybe have one to three frames per advertisement. The motion is limited. LED signs have been in use for at least two decades I think. I don't know how many people crash their car looking what time it is on the bank sign. Who knows, the temperatures are surprising in Duluth, so perhaps someone has gotten distracted by a Walgreen's display.

If billboards become televisions, then yes, they need to be regulated. Otherwise, it's just a way to display information that doesn't require paper and paste, which seems like a positive change from decaying billboards.

oh my blog

I forget that professor make syllabi (or blog assignment listings as the case may be) for a reason. Also, blogging is the least like responsibility at this moment, so it wins out.

What is a good font for web / interactive design?
For the past four-six years I would have said Verdana and nothing else. Before that I had an unfortunate courier phase. Now that I am trying to design websites instead of just making them, I am at a loss. There are very few useful articles on web typography because its a difficult field. There was a period where it looked like font on demand downloading would become a standard feature, but conflicting systems and licensing issues have more or less killed that technoloy. Research a few months ago revealed these as "universal" display fonts: times new roman, georgia, andale mono, arial, arial black, impact, trebuchet ms, verdana, comic sans ms, courier new

Naturally I don't recall my source. Of those, courier is awful for almost all circumstances, times new roman is overused, impact and arial black look terrible for body text, and don't get me started on comic sans.

That leaves Georgia (a handy serif), Andale Mono (not much better than Courier New), Arial (which I've been using more lately), Trebuchet MS (a refugee camp of recovering Verdanites), and our good friend Verdana.


February 27, 2007

possible non-profit website makeovers

Duluth Rotary Club
Greater Downtown Duluth Council
Kitchi Gammi Ya Ya Ya
Arrowhead Regional Arts Council
Armory Center

Group members: Annie Haubenhofer, Laurie Lawrence, Topher McCulloch

February 8, 2007

"9. Remember your granny won't ever use Second Life"

The BBC posted fifteen web principles [link from Design Observer], which I think are quite pertinent to our class discussions. Also of note is #12: "Accessibility is not an optional extra."

February 6, 2007

Second Life

That is almost all that remains of my early days of 3d modeling and virtual reality chat worlds. A google search on "Myrth" (my old username) and "ActiveWorlds" will reveal several pages of where my hands dipped into the cyberpot. I won a world design contest or two, was features on some hip ActiveWorlds pages, created a world for a Bot Expo (that never happened), and generally was a huge nerd. I was pretty active for a 13-16 year old.

Imagine my surprise when this "SecondLife" thing started showing up in the news. I was taken aback. A new 3d chat world with build options? Whatever happened to ActiveWorlds? Research revealed ActiveWorlds was still kicking, and for $69.95/year. Citizenship in my day was $20. Then I started to realize Second Life's draw. Avatars are customizable. You have to pay to build, which being an involved creative act, is not really for the masses. However, vainly adding doodads and gewgaws onto a virtual representation of you. Now that’s commerce. How else would you convince someone to shell out for a virtual American Apparel t-shirt? This is the MySpace generation. Time magazine voted "you" as the person of the year. "You" as in YouTube as in you fucking narcissist. I can't judge, as my senior show is going to be entirely self-portraits, but that's another matter. Building was why I loved ActiveWorlds. I'm obsessed with the miniature and recreating worlds. I love Legos, and I even love Christmas villages. I miss my train sets. These days I'm channeling my model making needs into painting and drawing, but the idea stays the same.

I still haven't tried Second Life for myself, but I don't think I want to. I want to build. Not look pretty. And buying land just doesn't sound appealing in a virtual setting, but even ActiveWorlds, which once allowed tourists to build free, has been turning the option off to promote citizenship. I guess vanity was hinted at in ActiveWorld's avatar structure too. Tourists can only be a faceless man or woman dressed in gray, labeled simply "tourist." Paid citizens can choose from a much larger list, including exciting things like an alien and a bald German guy named Helmut. No customization. I left ActiveWorlds after 3.0. It's now on 4.0. Maybe SecondLife's success will cause the implementation of a customizable avatar.

Either way, both places are great for a cyber-lay.

Usability Testing of for Interactive II

Care USA

a) ask three users about the purpose of the interface, the way the information is organized, and the way the interface works
(b) ask three users to do something while watching how well they do.

Questions concerning the user's understanding of the interface:

What is this site?
What is the information that is portrays?
What can you do with this site?
What are your thoughts on color usage?
Where is the navigation?
Where is the search box?
How do you e-mail a page?
What type of an organization is CARE?

Questions concerning the performance of simple tasks:
Elaborate 3 tasks of varying difficulty

1. Job or internship
2. Find annual 1998 report
3. Find key partners
4. Find Care International Offices

1. Purchase a carewear infant creeper
2. Find and watch Keynote Address by Sen. Barack Obama
3. Find Humanitarian Consequences of War: Sudan

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
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 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 suggests, are local. 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

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.

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.

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.

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

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

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.

(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 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

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 that specifies a group of online resources (as of a particular company or person) and that forms part of the corresponding Internet addresses

hypertext transfer protocol; hypertext transport protocol

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

Internet service provider

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

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

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

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.

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.

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

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

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

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

graphical user interface

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.