Design>Web Design>User Interface

Treating User Myopia

Fortunately, you don't see dialogs in web apps much, but this sort of modal dialog lunacy is, sadly, becoming more popular in today's AJAX-y world of web 2.5. Those who can't learn from history are doomed to repeat it, I guess.

The Inclusion Principle

Affordance allows us to look at something and intuitively understand how to interact with it. For example, when we see a small button next to a door, we know we should push it with a finger. Convention tells us it will make a sound, notifying the homeowner that someone is at the door. This concept transfers to the virtual environment: when we see a 3D-shaped button on a web page, we understand that we are supposed to “push” it with a mouse-click.

The Yahoo! User Interface Library

The YUI Library is a set of utilities and controls, written in JavaScript, for building richly interactive web applications using techniques such as DOM scripting, DHTML and AJAX. YUI is available under a BSD license and is free for all uses.

Search Goal Redefinition Through User-System Interaction

The purpose of this research is to examine search goal redefinition during users' interaction with information retrieval systems.

情報アーキテクチャの間違いトップ10

ウェブサイトは、その構造とナビゲーションシステムとが互いに支え合っていなければならない。検索システムとも結びついていなければならない。サブサイトに至るまで一体化していなければならない。複雑で、一貫性が無く、選択肢が隠れていて、UIが扱いにくければ、ユーザーは必要なものを見つけられない。

Great Designs Should Be Experienced and Not Seen

When things are going well in a design, we don't pay attention to them. We only pay attention to things that bother us. The same is true with online designs. We attend to things that aren't working far more than we attend to things that are. When the online experience frustrates us, we pay attention to its details, often because we're trying to figure out some way to outsmart it.

Top-Ten Information Architecture (IA) Mistakes

Structure and navigation must support each other and integrate with search and across subsites. Complexity, inconsistency, hidden options, and clumsy UI mechanics prevent users from finding what they need.

Seven Interface Design Techniques to Simplify and De-Clutter Your Interfaces

What is simplicity? Simplicity is the quality of being natural, plain and easy to understand. It is not surprising then that simplicity is often thrived for in user interface design. Most people naturally dislike complexity in devices and software. Yes, some people find joy in figuring out how something works, but for most of us, being unable to operate a device leads to wasted time and frustration, and that’s not a good thing. If you can take a complex device or a piece of software and somehow rearrange, reorganize and redesign the interface to make it easy to use and understand, then you’re well on the way to delivering a better user experience. In this article I’m going to talk about 7 practical techniques that you can utilize in web design to make your websites or web applications simpler and less cluttered.

Antipatterns

Using patterns has become a well-known design practice and is also considered best practice in the software development community. While UX teams can and should constantly promote best practice, we can also approach tackling poor design practice from the other side: antipatterns. Antipatterns are approaches to common problems that might appear obvious, but are less than optimal in practice.

AJAX Interface Design

AJAX enables faster, more responsive Web applications through a combination of asynchronous Javascript, the Document Object Model (DOM), and XMLhttpRequest. What this means for Web interface designers is that a DHTML-based Web application can make quick, incremental updates to a user interface without reloading the entire screen.

Image Links vs. Text Links

Years back, we compared successful clickstreams (clickstreams that resulted in users accomplishing their goals, as observed in tons of usability tests) with unsuccessful clickstreams (clickstreams where users abandoned their goals before completing), looking for any clues that would help us predict behaviors in one that we didn’t see in the other. One factor we looked for was whether the clickstreams contained image links versus text links — does one type of link show up more often in successful clickstreams than the other. Our finding was when users clicked in image links they were just as likely to succeed or fail as when the clicked on text links. There was no statistically-meaningful difference.

Clean, Cutting-Edge UI Design Cuts McAfee's Support Calls by 90%

When McAfee Inc. recently introduced its ProtectionPilot software--a dashboard-type management console for its Active VirusScan SMB Edition and Active Virus Defense SMB Edition suites--the trial downloads were fast and furious: In the first 10 weeks after release, more than 20,000 users went online to get a copy.

Creative User Interfaces in Modern Web Design

The whole may be more than the sum of its parts, but without the parts, there is no whole. Lest that sound like some weird philosophical meandering to you, take comfort in observing the finer aspects of creative and appealing user interface design.

Fun with Overflows

Making use of the overflow and scrollLeft DOM property to scroll elements is a much more effective use of the CPU, over animating using CSS top/left. So this episode of J4D demonstrates the same effect used in two completely different ways.

Zebra Striping: More Data for the Case

I recently conducted a study into the helpfulness (or lack thereof) of zebra striping—the shading of alternate rows in a table or form. The study measured performance as users completed a series of tasks and found no statistically significant improvement in accuracy—and very little statistically significant improvement in speed when zebra stripes were implemented.

People Finder: Searching Without Logic? Improving the People Finder Application

One of the most frequent tasks on many intranets is finding people within the company. Providing an effective way to search people is thus a key goal in designing intranets. This goal becomes even more important for an organization like Emirates, a leading international airline, which has over 35,000 employees with over 140 nationalities and where more people are likely to use this feature more frequently.

Web 2.0 Can Be Dangerous

AJAX, rich Internet UIs, mashups, communities, and user-generated content often add more complexity than they're worth. They also divert design resources and prove (once again) that what's hyped is rarely what's most profitable.

Building the Front End: Craft Intelligent and Intuitive Front Ends for Ajax Applications

With Ajax still one of the industry's hottest buzzwords, more and more applications are being built with Ajax technologies. However, it's not always easy to build a good application. This article focuses on how to build intuitive, easy-to-use Ajax-driven applications.

Ajax for Lightboxes

In a world where everything is designed to amaze and distract, it's awfully difficult to get a user's attention. Learn how to use new techniques such as lightboxes, pop-ups, windows, and fading messages with your Ajax tools to get your users' eyes on your content.

Develop an Ajax-Based File Upload Portlet Using DWR

File upload is a basic function of today's Web portals. In this article, authors Xiaobo Yang and Rob Allan describe how to develop an Ajax-based file upload JSR 168-compliant portlet using DWR (Direct Web Remoting). DWR is an ideal Ajax framework for Java developers that dynamically generates JavaScript based on server-side deployed Java classes. You will learn how you can use DWR to retrieve file upload progress from the portal server.

A Usability Evaluation of Web Map Zoom and Pan Functions

Due to limitations on screen size and resolution, the usability of web maps relies heavily on their interface design. The main goal of this research is to find better interface designs for web maps and to facilitate their usage by the public. The research consists of two stages of investigation: (a) a survey on the operation interfaces of popular web maps; and (b) a usability evaluation of simulated interfaces by measuring task performance and conducting subjective evaluations.

Designing Search Pages

Many web sites and applications include a search feature. Often they provide an extremely simple search interface consisting of a single text box and a "Go" button. Sometimes, however, the users' tasks call for more sophistication, and guidelines for complex search interfaces are difficult to find. This paper details four levels of search interface, and it provides heuristics (guidelines) to use when designing complex search interfaces. Different solutions are appropriate, depending on the users' motivation and knowledge of their subject, experience using search interfaces, and search goals. Finally, PubMed serves as a useful example to illustrate how these guidelines can be used to analyze existing search interfaces.

Spatial Interactive Visualization on Small Screen

The amount of data stored in personal digital devices increases rapidly as their memory capacities increase. These devices are usually equipped with relatively small displays, which makes presenting the information a challenge. We set out to explore the spatial design space for small screen user interfaces by incorporating additional dimensions into the visual representation, and investigate techniques that may be used to display more information at once. We focus on interactive visualization, with a document manager as a target application. We present the design factors and a simulated application running on a desktop computer. We also report a formative usability study with promising results.

Interfaces That Flow: Transitions as Design Elements

Many UX designers--myself included--approach projects from a combination of information architecture, information design, interaction design, and visual design perspectives. These disciplines and their methods are fundamentally different from those people use to construct the continuous linear narratives we see and hear in film, video, and music. However, as the technologies for creating interactive user experiences become more robust--especially in the realm of Rich Internet Applications (RIAs)--we have an opportunity to draw upon a much wider visual vocabulary. This will also make narrative elements such as timing, pacing, and rhythm increasingly important. Using such design elements may enable us to move users from mere understanding to engagement and, ultimately, to immersion in our digital products and services.

Selection-Dependent Inputs

Successful Web applications tend to grow--both in terms of capability and complexity. And this increasing complexity is often passed on to and absorbed by a Web application's forms. In addition to needing more input fields, labels, and Help text, forms with a growing number of options may also require selection-dependent inputs.

Where Am I?

It seems strange to be talking about something as basic as 'navigation' 11 years into the web era. And yet, if you’re a web designer, chances are you’ve made some mistakes in this fundamental area. I know I have. So let’s go back to basics.

Navigation

Navigation refers to the method used to find information within a Web site. A navigation page is used primarily to help users locate and link to destination pages. A Web site's navigation scheme and features should allow users to find and access information effectively and efficiently. When possible, this means designers should keep navigation-only pages short. Designers should include site maps, and provide effective feedback on the user's location within the site. To facilitate navigation, designers should differentiate and group navigation elements and use appropriate menu types. It is also important to use descriptive tab labels, provide a clickable list of page contents on long pages, and add ‘glosses' where they will help users select the correct link. In well-designed sites, users do not get trapped in dead-end pages.

Innovative User Interface Design

Increasing numbers of websites are developing new types of user interface design, taking advantage of users' increasing levels of Internet-sophistication and faster connections. This article will have a look at some of them.

Minimal-Feedback Hints for Remembering Passwords

Passwords are a widely used mechanism for user authentication and are thus critical to the security of many systems. Strong passwords (e.g., b5j#Kv!8N) are less vulnerable to attack but at the same time more difficult to remember. Minimal-feedback hints are introduced to support users in remembering their passwords and thereby enabling them to choose stronger passwords.

The Bull's-Eye: A Framework for Web Application User Interface Design Guidelines

A multi-leveled framework for user interface design guidelines of Web applications is presented. User interface design guidelines tend to provide information that is either too general, so that it is difficult to apply to a specific case, or too specific, so that a wide range of products is not supported. The framework presented is unique in that it provides a bridge between the two extremes. It has been dubbed the "Bull's-Eye' due to its five layers, represented as concentric circles. The center of the Bull's-Eye is the Component layer, followed by Page Templates, Page Flows, Interface Models and Patterns, and Overarching Features and Principles. To support this approach,requirements were gathered from user interface designers,product managers, UI developers, and product developers. Also, usability testing of the guidelines occurred on several levels, from broad guideline tests to more specific product tests. The guidelines and lessons learned are intended to serve as examples for others seeking to design families of Web applications or Web sites.

MAX-WIDTH and Flexible Layout with Short Lines

It is now possible to make flexible layout with user-friendly short lines that adapt to screen resolution, to width of browser window, and to font-size chosen by the user. This could be a new beginning for more accessible and usable web pages.

Calling All Designers: Learn to Write!

You know all that copy that goes around your forms and in your confirmation e-mails? Who’s writing it? Derek Powazek explains why it’s important for user-interface designers to sharpen up their writing skills.

How to Build a Better Web Browser

Web browsers are funny things. On the one hand, they’re supposed to be lightweight little programs that just let you view websites, and on the other, they carry the same burdens as operating systems and application suites, trying to provide everything to everyone. Here in this little essay I explain what I know about designing browsers. I’m in the lucky minority of people that have actually designed successful browsers, or parts of them, for any length of time, and with Firefox and Opera in the headlines, and the art of browser design becomes important again, I thought I’d write down some of what I know. Its been years since I was a program manager on the Internet Explorer project, but I’ve maintained interests in the design of navigation and searching systems of all kinds: what follows is a rough summary of what I’ve learned.

界面的形式：纸原型和产品原型相结合

草图和原型是产品的整个设计过程中不可缺少的一个环节，这对设计概念的产生，以及和他人进行讨论和评价时都十分重要，尤其是在以用户为中心设计的情况下。原型的方法是设计教育的必修部分、是专家的工具包，但如果能够将这一过程展示给产品和界面开发过程中其他学科的人士，也具备巨大的价值。

Interface in Form: Paper and Product Prototyping for Feedback and Fun

Sketching and modeling are integral features of the design process, critical for both the generation of ideas, and the communication of concepts to others for discussion and evaluation, particularly in the context of human-centered design. While these methods are a natural component of the designerâ€™s education and professional tool kit, there is immense value in exposing other professions involved in the development of products and interfaces to at least a limited set of these same basic tools.

The Explorer Bar: Unifying and Improving Web Navigation

The Explorer bar is a component of the Internet Explorer web browser that provides a unified model for web navigation activities. The user tasks of searching for new sites, visiting favorite sites, and accessing previously viewed sites are simplified and enhanced by using a single user interface element.

Developing Voice Interfaces for Legacy Web Applications

Traditionally, web applications are accessed via a single mode interface; information is presented and captured with text. However, one can additionally use a voice browser to navigate the Internet. One can navigate or access 'hands free' Internet applications from anywhere; you are not restricted to the desktop or a portable computer. VoiceXML is a language for Internet telephony applications and is based on the XML language. VoiceXML can 'speech-enable' an existing web application to be used through a conversational interface, providing a more natural way of interaction between users and Internet applications.

Agent vs. Agent

The phrase User agent or user-agent or UA or browser or client or client application or client software program...all pretty much refer to the same thing. Or maybe not.

Complex Dynamic Lists: Your Order Please

Help your site’s visitors reach their goals quickly with a dynamic menu that takes its cue from the Mac OS X Finder.

Fragments (of Time)

The best web interfaces take time – the one asset that seems to be in perpetually short supply. Leading Scandinavian web developer Pär Almqvist presents a time-based perspective on web interfaces and the network economy.

Speech-Enable Web Applications Using RDC with Voice Toolkit

Speech applications have come to be in demand with many applications, which can sound daunting to developers who have never before made provisions for speech. Don't put it off, though, believing that it means a massive rewriting of your current offerings. It is now possible to enhance current Web applications, or develop new ones, with the Voice Toolkit and Reusable Dialog Components. Learn to construct successful voice apps, and without a big learning curve.

Reconciling Information-Seeking Behavior with Search User Interfaces for the Web

Current search interfaces reflect the inner workings of search technology rather than what we know about how people look for information.

What's Wrong with (Almost) All Web Sites

The vast majority of web sites commit usability and design violations that make it hard for users to find relevant content and functions. These problems are not difficult to diagnose or remedy. How many of these "user crimes" is your web site guilty of committing?

The Need for Web Design Standards

Unfortunately, much of the Web is like an anthill built by ants on LSD: many sites don't fit into the big picture, and are too difficult to use because they deviate from expected norms. Users expect 77% of the simpler Web design elements to behave in a certain way. Unfortunately, confusion reigns for many higher-level design issues.

GUI Versus the Web

Focuses first on the differences between GUI and Web environments, and reveals effective approaches for each that can enable the best possible user experience.

Reality Check

Many would-be e-businesses, seduced by the lure of the emerging 'virtual-world' on the web, have ignored 40 years of accumulated wisdom in how to design usable information systems, and have seemingly forgotten that a satisfying 'user experience' is key to the successful implementation of any information system.

Using Machine Learning to Populate Dynamic Interfaces

How can we bring machine learning techniques to bear on the problem of enabling dynamic search interfaces for complex document collections?

Dynamically Conjuring Drop-Down Navigation

Got content? Got pages and pages of content? Wouldn’t it be nice if you could offer your readers a drop-down menu providing instant access to any page, without having to sit down and program the darned thing? By marrying a seemingly forgotten XHTML element to simple, drop-in JavaScript, Christian Heilmann shows how to do just that. There’s even a PHP backup for those whose browsers lack access to JavaScript. Turn on, tune in, drop-down.

InfoRomanticism on the Internet

The internet is becoming more data-intensive. This is both an inevitable and perpetual reality.

Designing Better HTML Authoring Tools

A collection of proposed new tools and features for adding structure to the Web.

Software Features and Changes Needed for Better Viewing

With Netscape, when you first load this page, none of the following links are marked as 'already seen'. IE is very bad on this point: when you load this page, all the links below (internal page A NAME links) are marked as 'already seen'. That is, Netscape tracks internal page jumps; IE doesn't recognize them; in its history tracking, it lumps together all the links for a page as being identical with the overall page as a destination. This is a great example of a basic feature that is very much needed.

GUIs and XML Configuration Data

Discusses how XML is used in the configuration of GUI interfaces. He looks at Mozilla's XML-based User Interface Language (XUL) which allows you to write applications that run without any particular dependency on the choice of underlying operating system. This may seem strange at first, but you'll soon see that this Mozilla project offers powerful tools for GUI building that allow you to develop for an extensive base of installed users.

Best Practices and Future Visions for Search User Interfaces: Position Paper

The author argues that progress in search requires vigorous inquiry into how search can be embedded into application environments such as those for decision-making, personal information collecting, and designing.

The Big Dig: Mining Nuggets of Value

It is difficult to apply the lessons learned from e-commerce search interfaces to more complex ones, such as those for libraries or technical material. This article provides a guide to tailoring search interfaces to users with a persona-based approach.

Lo Que Dice la Red

Elaborar información procedente de la red y presentarla en forma gráfica es lo que se propone 'dicelared', una interesante iniciativa en español.

Menús Pastel

Los menús-pastel (pie-menus) muestran cierta superioridad sobre los ubicuos menús lineales a los que estamos tan acostumbrados. ¿Por qué no han proliferado más y sólo se muestran en algunas aplicaciones?

¿Por Qué los Menús Pastel no son Ubicuos?

En el ultimo artículo de InfoVis.net preguntamos a Don Hopkins por qué los menús pastel, que son más eficientes que los menús lineales, no se han hecho ubicuos, siendo usados sólo en algunas aplicaciones como video juegos y algún software experimenta avanzado. Aquí está su respuesta.

Elephants in the Living Room: The Destructive Role of Denial in Web Design

Four of your fellow development team members, all trying to do their specific jobs to the best of their abilities, have the power to sink your best effort at interaction design. As an interaction designer, it is your job to see they don't do so. (If you are not an interaction designer, read on anyway; you may be surprised to learn that you may be part of the problem.)

Is the Internet Really Collapsing?

The sky is falling. It has been falling for about a year now, and it feels like it won’t stop falling until every business associated with the Internet is dead, dead, dead. What is happening now happens with every new explosion of technology. When the sky has finished falling, it will leave behind an industry with far fewer, but much healthier players. And then things will get better than they ever were.

Yahoo! Mail: Simplicity Holds Up Over Time

In many respects, email is the ideal web application: it's an application that people often need access to when they’re away from their 'home' environment, and the core user tasks (reading and writing) are easily accommodated with standard HTML interface elements.

Windowing the World of Online Information

Designing online information requires an understanding of user interface design, screen design and hypertext technologies. Multi-window environments have quickly become the standard within user interfaces and so this paper explores the application of multi-window systems to online information by reviewing the research and some of the current applications of multi-window online information.

Hierarchical Menus with the Underrated style.display Object

One of the most common DHTML requests I get is for a Windows Explorer-style hierarchical menu, where there's a list of topics or 'folders' that a user can click on to reveal subtopics, or 'files,' within that folder. It's a common desktop metaphor that seems ever more necessary on the Web, especially as we see navigation bars incorporating larger and more complex content while still trying to fit on the screen. Hierarchical menus are a solution to the common problem of having too many links in too small a space.

Google Voice Search

Google Voice Search allows you to make a telephone call to Google with a search query and get the results on a web page. The purpose of this article is to briefly describe the user experience and investigate the usability implications of this tool.

Art and Culture

This site offers a unique approach to contextual navigation, and one that has gotten the attention of many reviewers. From the site: 'ArtandCulture.com is a dynamic destination that delivers unique access to the best arts and cultural content and related products available on the web today....focused on creating the context that makes information truly meaningful.' In this review, I'll focus on some of the interesting navigation strategies the site presents.

Take Advantage of Technology

Use technology to simplify existing processes, and take advantage of what users already understand.

Text on Websites

Website text should be clear, links should stand out, and all text should scale according to user preferences.

Interface Design

Users of Web documents don't just look at information, they interact with it in novel ways that have no precedents in paper document design. The graphic user interface (GUI) of a computer system comprises the interaction metaphors, images, and concepts used to convey function and meaning on the computer screen. It also includes the detailed visual characteristics of every component of the graphic interface and the functional sequence of interactions over time that produce the characteristic look and feel of Web pages and hypertext linked relations. Graphic design and visual 'signature' graphics are not used simply to enliven Web pages--graphics are integral to the user's experience with your site. In interactive documents graphic design cannot be separated from issues of interface design.

Usability First

This website provides information and resources for key issues related to usability in website and software design. We believe that helping people do their work in an effective and enjoyable way should be the top priority in design because if a product is not usable, people will not use it.

The Sanctity of Elements, or Why You Shouldn't Be Double-Clicking in a TEXTAREA

All-too-frequently an external client or an internal manager or co-worker demands interface changes. They usurp the design process -- taking the decision-making away from the experts -- and deign the interface by dictum rather than traditional development processes, to the detriment of the product.

Structuring Content for Web Interface Usability

It's a well known fact that many users - both novice and expert - have difficulty finding information on websites even when they know it's there somewhere. What is less clearly understood is why - beyond the obvious fact that there is always a challenge involved in enabling access to a huge variety of information from a single entry point. When addressing this challenge, the initial focus often tends to be on the 'navigational' structures, and how the site is mapped and organised. But in reality, users tend to rely less on these navigational aids than some web designers might imagine. Most users are more concerned with achieving their goal than understanding the logical structure of the application they are using, and tend to gravitate towards the content they are looking for by following 'scent', which can best be thought of as a clear signpost to content 'below' through links and content 'above'.

Some Tips On Navigation

Creating navigation systems, and the information structures that underlie them, is obviously a central aspect of the development of any product or web interface. Although some users may prefer not to use navigation systems, or even ignore them entirely, for many they will be an invaluable means of discovering content or functionality. Getting these structures right is an important element in designing a successful interface. Unfortunately, getting them right isn't particularly easy. In some instances it can be, but usually there is no simple way to short-circuit the process of categorisation and presentation that constitutes a navigational system. However, in this short article we do attempt to provide some brief pointers. Although we focus on web navigation, many of these suggestions are equally relevant in software interface design and indeed other technologies.

Designing Scalable Interfaces

Scalable interface design ensures that interface development takes account of the need to change over time, providing solutions that are flexible and thus 'future-proof' to some extent. Too often complex interface designs require a complete overhaul when even the smallest change is required in the functionality of the application or site in question. Building 'scalable' interfaces in the first place will save time and cost in the long term - and make coping with upgrades easier for your customers.

TreeDec: an Annotation Tool to Support Website Navigation

Websites are often organized into logical hierarchies, or tree structures, in order to help users navigate. Ideally, users could view the entire tree, or jump to nearby pages. TreeDec (= Tree Decorator) is a system to support website authors and maintainers by providing automatic annotation of webpages under the control of a central file that represents the tree structure.

The Interface in the Environment: "One Size Fits Nobody"

At the outset of an interface design project we would normally conduct a detailed phase of user requirements gathering. We have discussed the various methods of conducting these in previous articles, but typically this includes stakeholder interviews and task analysis exercises. As many of you will be aware the results of this stage will lead to the development of user personas, task scenarios and ultimately lead to the development of wireframe screens of the interface. We tailor this approach to suit the job, so that specialised interfaces such as stock trading software will focus more on complex task analysis while mass-market interfaces such as Interactive TV will focus more on different user profiles. If the research and analysis is carried out well, then the resulting interaction design should be effective, allowing users to complete the required tasks easily. However, apart from the user and task there is one other key factor influencing the usability of the interface – the user environment.

Princippet om Helhed

Inden for Internet genren hersker der, ligesom i enhver anden medie genre, trends og mode. I denne artikel vil de nuværende strømninger bliver udredet i forbindelse med en fokusering på de generiske elementer, der ligger til grund for webdesign. I relation til enhver løsning vil der kunne tales om et interface. Interface metodologi kendetegnes på nuværende tidspunkt ved en række design zoner, som sætter en linje for ”tidens trend”. Denne trend opfølges af designere, og ender slutteligt i de kommercielle kredse. Beviset for denne teori findes i www.k10k.dk (som nu er taget off-line), som gennem de sidste 2 år har defineret kommende trends. Først var det det minimalistiske, widescreendesign i år 2000, og i år 2001 er det retro i c64 stil (bit æstetik). Denne trend vil kunne spores i designkredse, som www.coolstop.com , www.coolhomepages.com (i mindre grad, på grund af deres meget store lister) og naturligvis www.k10k.dk. Trenden dækker imidlertid over et dybere æstetisk paradigme. Et teknologiparadigme som fokuserer på grænserne i mediet, og overskridelsen af disse.

Web Interface Design: Learning from our Past

The advent of World Wide Web authoring has led to a plethora of graphics rich web pages. But where's the beef? In addition to placing marketing information on a company's home page the strength of the web lies in its flexibility to link to corporate databases and processes running on a variety of machines, both web and non-web servers. Tasks such as, creating transaction systems for commerce, creating graphical user interfaces (GUIs) for legacy systems, and doing queries against corporate databases require the web designer to take into account more than HTML code and imagemaps. The heritage of interactive design for network-based solutions has helped interface designers understand how to apply their craft to create effective World Wide Web solutions.

Designing Web Interfaces

Developing an effective framework for a large collection of linked documents involves: creating an efficient hierarchy of information; mapping task flows through the information hierarchy; determining the best depth for the information space; and creating nodes of appropriate length. These four tasks should be undertaken in order. Each one depends on the outcomes of preceding tasks. Because these elements are interdependent, however, several good solutions to the first two should be developed so that problems with site depth and node length can be addressed.

Map-Based Horizontal Navigation in Educational Hypertext

The paper discusses the problem of horizontal (non-hierarchical) navigation in modern educational courseware. It considers why horizontal links disappear, how to support horizontal navigation in modern hyper-courseware, and looks at our earlier attempts to provide horizontal navigation in Web-based electronic textbooks. Map-based navigation -- a new approach to support horizontal navigation in open corpus educational courseware -- which we are currently investigating, is presented. We describe the mechanism behind this approach, present a system, KnowledgeSea, that implements this approach, and provide some results from a classroom study of this system.

Faucet Facets: Few Best Practices for Designing Multifaceted Navigation Systems

So often we assume that Web sites should be hierarchically organized. We talk about a 'home page' that offers 'top-level navigation' so that users can 'drill down' to the content. It's as if we're programmed to think top down. But what about information that isn't as easily structured this way? Sometimes, content has many attributes that have different importance to different users. A hierarchy assumes everyone approaches these attributes the same way, but that's often not the case.

Fitts's User Interface Law Applied to the Web

Interface design is difficult in part because everything requires interpretation. A design that works for one task or one user might not be appropriate for another. In other types of engineering, like architecture or bridge building, designers can always rely on laws of physics and gravity to make designs work. There is at least one immutable rule for interface design that we know about, and it's called Fitts's Law. It can be applied to software interfaces as well as Web site design because it involves the way people interact with mouse or other pointing devices. Most GUI platforms have built-in common controls designed with Fitts's Law in mind. Many Web designers, however, have yet to recognize the powerful little facts that make this concept so useful.

User Interface That Kills: Swords, Craft, and User Interfaces

The greatest challenge in web or software design is creating a work of deep craft. That is, the presence of the designers and programmers coming through to make the user feel as though you were really trying to make them happy. For many products, I can point to specific parts that in isolation made me feel that way, but it's rarely carried through consistently. Web sites always have rough edges: search results pages that are ugly and hard to read, error pages that are incomprehensible, JavaScript pop-up menus that appear and disappear awkwardly, with visible repainting and redrawing, home pages to well-known Web sites that are garish, cluttered, and cold.

Why Are Good User Interfaces So Hard to Make? Three Insights into Good Design

Last year at Internet World a woman asked me why software and Web sites were so hard to use. Let's call her Pandora. I told Pandora that either we aren't smart enough yet, or the industry has not matured to the point at which well-designed products are required for companies to be profitable. She didn't buy it. She swore that sometimes we just did it on purpose. She laughed when she said it, but I think she meant it. It's my job to make simple-to-use products, and I took what she said to heart. I said that we really are trying, and that we're getting better at it all the time. She walked away unimpressed. I went back to the hotel bar that night and thought about why things are the way they are with the Internet and computers.

Critical Thinking in Web/Interface Design Part 1

At the heart of design and engineering is critical thinking. The ability to separate what is worthwhile from what isn't is the hallmark of the best in many fields, from film directors to project managers, programmers to designers.

Critical Thinking in Web/Interface Design Part 2: Idea Generation

How do you cultivate good ideas? What process do you use? This issue discusses how critical thinking relates to generating and managing good ideas in design.

The Myth of Optimal Web Design

Perfection in design is not possible. No matter how much is known about a given business, user group or technology, you can not simultaneously satisfy all possible objectives. For any website or user interface, there are no mathematics, and no algorithms, for deciding which objectives to satisfy in a single design, or even for accurately defining an optimal solution within any of those objectives. There are usability, design and business methods that effectively evaluate and illuminate promising directions , but they are sensitive tools, that work more as guides, rather than maps. In general, any form of design involves too many simultaneous possible objectives and forms of solutions to enable any overall mathematical or algorithmic based confidence. An optimal design, in the broadest sense, is a mythical idea.

Beating the Rap on User Interface Standards

When your manager asked (told) you to write a user interface (UI) design standard, was it a no-win proposition? Apparently many developers feel that way.

Pull-Down Menus: Out of Sight, Out of Mind

This article focuses on a particularly wily cryptodesign foe: pull-down menus. Recall our definition of the developer’s eternal foe: cryptodesign. These are decisions that worked for certain situations, but are often misapplied in different, inappropriate situations. Pulldowns are the “guerilla” combatants of GUI design – so named because at one glance they look like good-guy civilians, but in another moment, they’ve wreaked havoc on ease-of-use. Let’s explore how to neutralize these design sapper bombers.

Why Amazon Succeeds -- And Why It Won't Help You

Amazon is one of the best on-site search capabilities we've ever seen. But surprisingly, the reason why it works so well is likely to be the same reason why Search won't work well on your site.

Information Design for the Small-Screen Interface: An Overview of Web Design Issues for Personal Digital Assistants

If the experts are on the mark, very soon handheld computer technology—--also known as the personal digital assistants (PDA)—--will supplant the desktop computer as ubiquitous technology on campuses and in the workplace (Weiser 1998; Chen 1999). In 1998, Gaston Bastien, vice president and general manager for the Personal Interactive Electronics Division of Apple Computer, noted that the handheld computer market 'could potentially grow larger than today's computer industry,' partly because of the capability of dynamic, modular design, and partly because its utility spills over to diverse communities of users. In 2001, Gartner Research (Bloomberg News 2001) predicted a 260% increase in unit sales, from 9.39 million units in 2000, to 33.7 million units in 2004.

How to Design a Web Table of Contents

There's something in our human nature that makes us want to dive into things, to browse, to dabble. We first try to program our VCRs without looking at the manual. We drive for awhile; if we get lost, we look at a map or ask directions (or not, depending on our gender).

Modeling Information in Electronic Space: An Introduction to This Special Issue

Organizing content for delivery on the computer screen challenges us to design our information in an imagined three dimensions. As mobile devices respond to the surrounding world, our content also needs to adjust to the real physical environment around our user. Our rhetorical space has changed, and in this special issue, authors wrestle with the ways in which we think, move, and design differently as we explore these virtual and real worlds. One team suggests showing the user the structure of the information gradually in search forms. Another author suggests that merging object-oriented thinking with visual language may offer us a way to consider structure and format together, while granting each its own distinct qualities. Focusing on mobile devices, one author sketches out the challenges we face in this new rhetorical space, and another highlights the idea of embeddedness, the fact that our devices are enmeshed within a content-rich world that we move through. Our final contributor takes us to museums, to