http://tc.eserver.org/dir/Articles/Web-Design/Interaction-Design A listing of the most recently indexed works about Articles and Web Design and Interaction Design in the field of technical communication. en-us Copyright (c) 2005-08 by the EServer. All rights reserved. tclib-editorial@eserver.org (TC Library Editorial Board) webmaster@eserver.org (Geoffrey Sauer) http://tc.eserver.org/images/newlogo.gif http://tc.eserver.org/dir/Articles/Web-Design/Interaction-Design http://tc.eserver.org/35799.html http://tc.eserver.org/35799.html User experience matters in social media are more complicated than in non-social software. For example, the conventional user-centric view starts with user needs and goals. In social media these are not necessarily rational and objective. They can be much more psychological, and social, for example. Furthermore, the interactions that users have are not just with the software application -- they are with other users (through the software). The UI is not an interface to discrete actions and transactions (such as your online banking site); it is a social interface, and through it users feel like they are interacting with friends and audiences. http://tc.eserver.org/35762.html http://tc.eserver.org/35762.html The popular JavaScript library jQuery is an amazing way to extend the design possibilities of your site beyond what CSS can do. But luckily, if you are already comfortable with CSS, you have a huge head start in jQuery! This is a very basic introduction to including jQuery on your web page and getting started writing a few functions. http://tc.eserver.org/35763.html http://tc.eserver.org/35763.html Starting off where we left off last time, we continue exploring the possibilities of jQuery. We revisit some of the old functions and make them do some smarter things. We explore a simple variable and an IF/ELSE statement. Then we look at the AJAX-y .load() function, the CSS function, and then finish off by writing out own custom function and going over how that layer of abstraction can help us keep our code clean. Semantics counts in JavaScript too! http://tc.eserver.org/35764.html http://tc.eserver.org/35764.html This video focuses on taking an already existing idea and code and turning it into a jQuery plugin. In this case it helps keep our code as semantic as it can be, and with JavaScript off, degrades nicely. We cover the syntax of creating a plugin, show off the cool chain-ability of jQuery, and show how to make the plugin versatile and expandable. http://tc.eserver.org/34383.html http://tc.eserver.org/34383.html Ayer os presentaba dos excelentes galerías de proyectos desarrollados en jQuery. Hoy, para no ser menos, vamos a seguir hablando de jQuery. Lo que ahora os presento es una recopilación de 7 sistemas de navegación que nos os dejarán indiferentes. http://tc.eserver.org/33715.html http://tc.eserver.org/33715.html From its inception as a global hypertext system, the Web has evolved into a universal platform for deploying loosely coupled distributed applications. As we move toward the next-generation Web platform, the bulk of user data and applications will reside in the network cloud. Ubiquitous access results from interaction delivered as Web pages augmented by JavaScript to create highly reactive user interfaces. This point in the evolution of the Web is often called Web 2.0. In predicting what comes after Web 2.0--what I call 2^W, a Web that encompasses all Web-addressable information--I go back to the architectural foundations of the Web, analyze the move to Web 2.0, and look forward to what might follow. http://tc.eserver.org/33389.html http://tc.eserver.org/33389.html Think of Web 2.0 as more of a concept than a person, place or thing and you'll find firmer ground. Even better, spend some quality time with O'Reilly's lengthy essay. Finally, keep in mind that the lion's share of Web 2.0 discussion is from a technological perspective; it hasn't yet filtered down to the information architecture, interaction design and similar discussion lists. http://tc.eserver.org/32968.html http://tc.eserver.org/32968.html Every paper and digital document shares three basic dimensions: structure, information and presentation. Although these dimensions are always interwoven, some people in the digital world mostly focus on document structures (e.g. information architects), some on the information they contain (e.g. marketers and writers/editors) while others specialise in the (interactive) presentation aspects (e.g. visual designers and Flash developers). The mutual dependence and interaction of these dimensions is the next level of design and does not regularly get the proper attention. In order to better understand the relationship between these dimensions, we need to look at each of them seperately, and how they inter-relate. http://tc.eserver.org/32673.html http://tc.eserver.org/32673.html This episode is revisiting the image cross fade effect, in particular Dragon Interactive has a beautiful little transition for their navigation that some readers have been requesting. Greg Johnson takes it one step further to implement this method using jQuery and the methods shown here. http://tc.eserver.org/32648.html http://tc.eserver.org/32648.html Deep down below the layers of interface, CSS, HTML, and XML—down where only the geekiest among us roam—everything comes down to this: it’s all zeroes and ones. On or off. The digital switch Though interaction and conversion becomes a bit more complicated at the point the interface meets the visitor, though there are a few more shades of gray, in the end it comes down to the same thing: yes or no. http://tc.eserver.org/32630.html http://tc.eserver.org/32630.html A profound change is happening on the cutting-edge of web development: we are relinquishing control of information. No longer are sites working independently from each other; no longer is information sitting in isolation with no interaction between sites. Rather, the best web programmers are now creating sites that allow information to be reused anywhere. http://tc.eserver.org/32598.html http://tc.eserver.org/32598.html Discover a technique that lets you move sections of a Web page using drag-and-drop functions. Different aspects of the interactivity are implemented separately and then composed into a unified whole, allowing for flexible customization that can make your Web users very happy. http://tc.eserver.org/32467.html http://tc.eserver.org/32467.html Abuse has made me seriously consider – several times – disabling comments. I’m ambivalent about it. On the one hand it would make writing and publishing much easier. Write something, proofread it, publish. http://tc.eserver.org/32472.html http://tc.eserver.org/32472.html While exploring the options for traversing JSON, I discovered that there is no official W3C documentation, or even a draft. As a subset of the ECMAScript language specification, it will probably remain under the governance of ECMA International. So unlike XPath, which is a commonly accepted language for traversing XML, JSON must rely on JavaScript’s object notation. http://tc.eserver.org/32390.html http://tc.eserver.org/32390.html Today I’d like to start an article series of three parts, the result of which will be a popout-style, jQuery-based box like the one pictured above, which I think strikes a nice balance on the obtrusion-scale. http://tc.eserver.org/32391.html http://tc.eserver.org/32391.html We're going to take the ad we built last week and animate it, as well as provide the user with a means to open and close the ad. We’ll be using jQuery for most of what we do, so you’ll need to include the jQuery library script at the top of your document for this to work (see the source of the example page to see how this is done). http://tc.eserver.org/32392.html http://tc.eserver.org/32392.html Generating footnotes for HTML documents in the past was always a slow, painful task — and every time I did it, I wondered why there wasn’t a better, easier way. Today, I’m happy to announce that I’ve come up with a better solution to web footnotes using the jQuery JavaScript framework and a few tags and attributes that already exist in XHTML. http://tc.eserver.org/32415.html http://tc.eserver.org/32415.html Today’s tutorial will show you how to hide away extra bits of content using CSS and JavaScript, to be revealed at the click of a button. This is a great technique, because displaying the additional content doesn’t require a refresh or navigation to a new page and all your content is still visible to search engine bots that don’t pay any attention to CSS or JavaScript. http://tc.eserver.org/32286.html http://tc.eserver.org/32286.html This article considers a neglected but crucial aspect of the new business of mobile interactivity: the premium rate data services industry. It provides an international anatomy of this industry model and the ways in which it has been used to capitalize upon the surprising success of short message service (SMS) to provide a basis for the development of consumer markets for mobile data services. It situates this analysis within a wider consideration of the role of premium rate culture in the social shaping of interactivity in convergent media. Specifically, it looks at how premium rate services are being constructed in relation to telecommunications, television and the internet. The article concludes that although premium rate culture has rejuvenated innovation in broadcast television, potentially it may constrain the interactive potential of the mobile internet. http://tc.eserver.org/32238.html http://tc.eserver.org/32238.html 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. http://tc.eserver.org/32063.html http://tc.eserver.org/32063.html I am not going to insult your intellence and try to teach you how to use Adobe Flex because frankly, I am just learning. Over the past few months, every major project and intitiative I’ve heard about has components built using Adobe Flex. With the emergence of Flash as a usable technology and ActionScript as a top notch coding language, Adobe Flex has quickly become the hottest new tool in ubertrendy web development circles. http://tc.eserver.org/31957.html http://tc.eserver.org/31957.html Somewhere in between presenting static information graphics and complex, interactive data dashboards there’s a need for a way to visualize moderately dynamic data on the web. Oftentimes the solutions you see implemented are clunky, for example, manually creating multiple frames of various data points and uploading them by hand. http://tc.eserver.org/31917.html http://tc.eserver.org/31917.html User interface designers have more interactive options than ever for presenting content. So, we can make meaningful strides toward offering users the right content in the right place, at the right time, in the right amount. However, these rich options for interactively presenting content also come with a challenge. http://tc.eserver.org/31778.html http://tc.eserver.org/31778.html We humans are wired to seek interaction with other people. Complex language and reasoning powers support your interactive nature. Your brain can retrieve and store unlimited amounts of information from everyday interactions and use that information to think, analyze, and solve complex problems. http://tc.eserver.org/31641.html http://tc.eserver.org/31641.html To tackle the classic “how to prototype rich interactions” problem, Alexa Andrzejewski developed a process for translating static screen designs (from wireframes to visual comps) into interactive experiences using Flash. Requiring some fairly basic ActionScript knowledge, these prototypes proved to be a quick yet powerful way to bring interaction designs to life. http://tc.eserver.org/31488.html http://tc.eserver.org/31488.html In this podcast, Noz Urbina talks about how Web 2.0 is changing the role of the technical communicator into one who drives product R&D and interaction design. The interview covers how the role of the technical communicator has evolved into a diversity of roles; how awareness of user needs and requirements allows technical communicators to get involved in product R&D and user interaction design; and how implementing a backwards flow of data from hundreds of internal and external users changes the role of a technical writer to one who aggregates, synthesizes, and ensures quality rather than one who merely writes. http://tc.eserver.org/29982.html http://tc.eserver.org/29982.html One of the little known features of DHTML, at least within Internet Explorer 5.5 or above, is an attribute known as contentEditable. This attribute can be used to make areas of text within a Web page editable by the user. This is very different from a form element, such as a text box, as contentEditable can make a table cell, or a standard paragraph editable. http://tc.eserver.org/28920.html http://tc.eserver.org/28920.html Amid the current hype of Web 2.0, rich has become the de facto buzzword suggesting fresh, sexy digital products, often marked by glossy buttons with AJAX-driven behaviors. But what does rich mean to a UI (user interface) designer who wants to craft intelligent, compelling, and memorable interactions? Given current digital and technological trends, today's UI designers must deepen their understanding of richness. Such an effort will strengthen designers' vocabularies (adding legitimacy and weight to client discussions), and enable designers to temper judgment when it comes to applying rich capabilities. http://tc.eserver.org/28465.html http://tc.eserver.org/28465.html Ajax, which consists of HTML, JavaScript™ technology, DHTML, and DOM, is an outstanding approach that helps you transform clunky Web interfaces into interactive Ajax applications. The author, an Ajax expert, demonstrates how these technologies work together -- from an overview to a detailed look -- to make extremely efficient Web development an easy reality. He also unveils the central concepts of Ajax, including the XMLHttpRequest object. http://tc.eserver.org/27900.html http://tc.eserver.org/27900.html The main focus of this article is related to the forms of mediated content that are offered in online space. Two specific aspects of new cyber-textuality are discussed--the notion of hypertextuality and the potential of interactivity. Both characteristics are understood as new challenges that reflect specific communication potentials of the internet. In an empirical sense, the article tries to show the extent these significant forms of mediation are used in online media news. For this reason a comparison between media content in print and online media has been made. The findings reveal the lack of interactivity in practice and explore its diversity as a communication form between media producers and reader. Regarding the hypertextuality, the analysis shows the complexity of this concept, which in the realm of news media online is still maturing. http://tc.eserver.org/27052.html http://tc.eserver.org/27052.html The page-reload cycle presents one of the biggest usability obstacles in Web application development and is a serious challenge for Java™ developers. In this series, author Philip McCarthy introduces a groundbreaking approach to creating dynamic Web application experiences. Ajax (Asynchronous JavaScript and XML) is a programming technique that lets you combine Java technologies, XML, and JavaScript for Java-based Web applications that break the page-reload paradigm. http://tc.eserver.org/27051.html http://tc.eserver.org/27051.html Ajax, which consists of HTML, JavaScript™ technology, DHTML, and DOM, is an outstanding approach that helps you transform clunky Web interfaces into interactive Ajax applications. The author, an Ajax expert, demonstrates how these technologies work together -- from an overview to a detailed look -- to make extremely efficient Web development an easy reality. He also unveils the central concepts of Ajax, including the XMLHttpRequest object. http://tc.eserver.org/27050.html http://tc.eserver.org/27050.html Most Web applications use a request/response model that gets an entire HTML page from the server. The result is a back-and-forth that usually involves clicking a button, waiting for the server, clicking another button, and then waiting some more. With Ajax and the XMLHttpRequest object, you can use a request/response model that never leaves users waiting for a server to respond. In this article, Brett McLaughlin shows you how to create XMLHttpRequest instances in a cross-browser way, construct and send requests, and respond to the server. http://tc.eserver.org/26778.html http://tc.eserver.org/26778.html Interaction modeling is a good way to identify and locate usability issues with the use of a tool. Several methods exist. Modeling techniques are prescriptive in that they aim to capture what users will likely do, and not descriptive of what users actually did. http://tc.eserver.org/26641.html http://tc.eserver.org/26641.html Despite posing well-known risks, websites continue to feature poorly designed scrollbars. Among the ongoing problems that result are frustrated users, accessibility challenges, and missed content. http://tc.eserver.org/24549.html http://tc.eserver.org/24549.html When users visit your web site, their immediate impression of its credibility is based on appearance, colors, text fonts. Then, as they explore your site, other factors contribute to its credibility impact. Lose users here, and they probably will never return. http://tc.eserver.org/24522.html http://tc.eserver.org/24522.html 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? http://tc.eserver.org/24342.html http://tc.eserver.org/24342.html Interactive information units (IIUs) are online, interactive HTML documents that modify their content based on user input. You can use IIUs to document tasks that are not performed frequently enough to merit a wizard and are too complex for traditional documentation. Content is essential in IIUs and appearance varies. You can provide interactive function with a variety of languages. HTML makes production faster and cost efficient. The Internet makes updating transparent. IIUs are just another example of a great idea brought about by new technology. http://tc.eserver.org/21727.html http://tc.eserver.org/21727.html First came the primordial soup. Thousands of relatively simple single-celled web sites appeared on the scene, and each one was quickly claimed by a multi-functional organism called a "webmaster." A symbiotic relationship quickly became apparent. Webmaster fed web site. Web site got bigger and more important. So did the role of the webmaster. Life was good. Then, bad things started to happen. The size and complexity and importance of the web sites began to spiral out of control. Mutations started cropping up. Strange new organisms with names like interaction designer, usability engineer, customer experience analyst, and information architect began competing with the webmaster and each other for responsibilities and rewards. Equilibrium had been punctuated and we entered the current era of rapid speciation and specialization. http://tc.eserver.org/10168.html http://tc.eserver.org/10168.html Websites must tone down their individual appearance and distinct design in all ways: visual design; terminology and labeling; interaction design and workflow; and information architecture. These changes are driven by four different trends that all lead to the same conclusion.