A directory of resources inthe field of technical communication.

Articles>Web Design>User Interface

40 found. Page 1 of 2.

About this Site | Advanced Search | Localization | Site Maps

1 2  NEXT PAGE »



Advancing Advanced Search

Advanced search is the ugly child of interface design--always included, but never loved. Websites have come to depend on their search engines as the volume of content has increased. Yet advanced search functionality has not significantly developed in years. Poor matches and overwhelming search results remain a problem for users. Perhaps the standard search pattern deserves a new look. A progressive disclosure approach can enable users to use precision advanced search techniques to refine their searches and pinpoint the desired results.

Turbek, Stephen. Boxes and Arrows (2008). Articles>Web Design>Search>User Interface


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.

evolt (2002). Articles>Web Design>User Interface>Web Browsers


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.

Wroblewski, Luke. LukeW Interface Designs (2006). Articles>Web Design>User Interface>Ajax



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.

Hornsby, Peter. UXmatters (2009). Articles>Web Design>User Interface


Apps vs. the Web

Pull the iPhone out of your pocket and look at the home screen. Likely, you’re seeing some well known brands on the web: Facebook, Flickr, and Google to name just a few. You’ll also see companies like Amazon, Target, and Walmart which sell a lot of products via the web. Like you, these sites and companies know how to build an effective website using the latest and greatest web technologies. The iPhone’s Safari browser also supports HTML5 markup with CSS3 styling and is powered by a fast JavaScript engine. So why is there a proliferation of apps instead of web pages that can do the same thing?

Hockenberry, Craig. List Apart, A (2010). Articles>Web Design>Mobile>User Interface


Browser and GUI Chrome

"Chrome" is the user interface overhead that surrounds user data and web page content. Although chrome obesity can eat half of the available pixels, a reasonable amount enhances usability.

Nielsen, Jakob. Alertbox (2012). Articles>Usability>User Interface>Web Design


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.

McLaughlin, Brett D. IBM (2007). Articles>Web Design>User Interface>Ajax


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.

Beier, Betsy and Misha W. Vaughan. uiGarden (2006). Articles>Web Design>User Interface


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.

Hadley, Bruce. SoftwareCEO (2004). Articles>Web Design>User Interface


Closeness of Actions and Objects in GUI Design

Users overlook features if the GUI elements — such as buttons and checkboxes — are too far away from the objects they act on.

Nielsen, Jakob. Alertbox (2010). Articles>Web Design>User Interface>Usability


Dark Patterns: Deception vs. Honesty in UI Design

Deception is entwined with life on this planet. Insects deceive, animals deceive, and of course, we human beings use deception to manipulate, control, and profit from each other. It’s no surprise, then, that deception appears in web user interfaces; what is surprising is how little we talk about it. All the guidelines, principles, and methods ethical designers employ to design usable websites can be subverted to benefit business owners at the expense of users. Study the dark side so you can take a stand against unethical web design practices and banish them from your work.

Brignull, Harry. List Apart, A (2011). Articles>Web Design>User Interface>Ethics


Designing Better HTML Authoring Tools

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

Hoffman, Michael. Hypertext Navigation. Articles>Web Design>User Interface>Software


Designing User Interfaces For Business Web Applications

Business Web application design is too often neglected. I see a lot of applications that don’t meet the needs of either businesses or users and thus contribute to a loss of profit and poor user experience. It even happens that designers are not involved in the process of creating applications at all, putting all of the responsibility on the shoulders of developers.

Jovanovic, Janko. Smashing (2010). Articles>Web Design>Business Communication>User Interface


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.

Yang, Xiabo and Robert Allan. IBM (2007). Articles>Web Design>User Interface>Ajax


Easy Timelines with Timeline JS

Using Timeline JS to set up a timeline is incredibly easy. Data for the timeline are stored in a Google spreadsheet (it’s possible to use other data sources—see their FAQ—but a Google spreadsheet is probably easiest for most users), and there’s even a handy template provided. Once the data’s been entered, all that’s necessary is to publish the spreadsheet, copy its URL into the Embed Generator linked on the tool’s home page, and set any desired options. An embed code gets generated, and users need only copy and paste that code wherever they want to put the timeline.

Cavender, Amy. Prof Hacker (2013). Articles>Web Design>User Interface>JavaScript


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.)

Tognazzini, Bruce. Nielsen Norman Group (2000). Articles>Web Design>User Interface>Collaboration


Expanding Text Areas Made Elegant

An expanding text area is a multi-line text input field that expands in height to fit its contents. Commonly found in both desktop and mobile applications, such as the SMS composition field on the iPhone, it’s a good choice when you don’t know how much text the user will write and you want to keep the layout compact; as such, it’s especially useful on interfaces targeted at smartphones. Yet despite the ubiquity of this control, there’s no way to create it using only HTML and CSS, and most JavaScript solutions have suffered from guesswork, inaccuracy, or a lack of elegance … until now.

Jenkins, Neil. List Apart, A (2011). Articles>Web Design>User Interface>Forms


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.

Sharp, Remy. jQuery for Designers (2008). Articles>Web Design>User Interface>Ajax


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.

Rhodes, John S. WebWord (2003). Articles>Web Design>User Interface>Audio


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.

Spool, Jared M. User Interface Engineering (2009). Articles>Web Design>User Experience>User Interface


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.

Berkun, Scott. ScottBerkun.com (2006). Articles>Web Design>User Interface>Web Browsers


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.

Spool, Jared M. User Interface Engineering (2006). Articles>Web Design>User Interface>Hypertext


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.

Link-Rodrigue, Margit. List Apart, A (2009). Articles>Web Design>User Interface>Usability


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.

Hanington, Bruce. uiGarden (2006). Articles>Web Design>User Interface


Map-Based Horizontal Navigation in Educational Hypertext   (peer-reviewed)

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.

Brusilovsky, Peter and Riccardo Rizzo. Journal of Digital Information (2002). Articles>Web Design>User Interface



Follow us on: TwitterFacebookRSSPost about us on: TwitterFacebookDeliciousRSSStumbleUpon