Web Directions News
Eric Rodenbeck of Stamen Design has a long history in the field of interactive design, and he was able to distill some of his insights to attendees of Web Directions North on Thursday. Rodenbeck pointed to the New York Times and their interactive maps ranging from the red and blue state breakdown of the 2004 US election to oil supply across the world.
Data visualization is a medium, Rodenbeck said, and can be live, vast, and deep. He pointed to a project he worked on called cabspotting, which used GPS data from San Francisco taxi cabs. Users were able to watch swarms of cabs in real time, and real-time analysis could also be applied to the data, with the end result that it was possible to chart out the most intensely used cab routes, as well as examine cab routes over periods of time.
Rodenbeck also showcased Oakland Crimespotting, which applies crime statistics to maps and allows users to chart out what crimes happen in which neighbourhoods, as well as charting out crime rates over time.
Other apps that use innovative visualization tools are Digg Swarm and Digg Stack, which chart out how Digg users pick top stories and which topics are more likely to be dugg.
Posted by Warren on January 31st, 2008 | No Comments »
Author and designer Cameron Adams explained to a packed house at Web Directions North today how web interfaces are moving forward from its current static state to a “dynamic interface” model. Flexibility, in terms of font size and availability, use of Javascript and other features are already available to customize the user experience, but as of yet custom layouts for end users have not been widely implemented. Designing these interface isn’t easy, Adams said. Creating a customizable interface means making smart decisions at every step to make sure the user gets exactly what what they want.
Adams highlighted several trends that are driving interface design. The first is the rise of user-driven content, such as people putting their lives online and participating in social networks. People are also becoming information omnivores, going straight to data sources and bypassing anything that gets in their way. Customization can go out of control, and Adams cited Myspace as an example of bad customization. Twitter, which allows for modifying wallpaper on a page, and Flickr, which allows custom layouts of photos, were cited as good design choices.
Adams also cited iGoogle as an example of a site that allows users to create a customized home page. Widgets also allow for customization, though current offerings are more “expand-o collapse-o” than truly functional, he said.
XML allows for much in the way of customization, as does CSS, so the technology is already in place, Adams said. Javascript also serves to fill the gaps on different browsers.
On the server side, more granularity is needed, as well as noting user behaviours and adapting accordingly. Adams also noted that the usefulness of dynamic interfaces changes depending on how you use a site. If a user uses a site regularly and decides upon multiple visits how they need to use the site, a dynamic interface becomes increasingly important.
Game design is a good example of how to approach the web, Adams said. Current games have destructive environments, which totally changes the way games are played from earlier “point-and-shoot” environments. In the same way, bandwidth prices fall and browsers improve, so technology isn’t a barrier for long. It’s more important for designers to mentally challenge themselves and adapt interfaces to the needs of users.
Posted by Warren on January 31st, 2008 | No Comments »
- The browser is not a safe programming environment.
- An attacker can load additional, external scripts and make requests of your server.
- An attacker can see everything your users see.
- They can send that information to any server in the world.
- These are not new problems.
- How you encode data can prevent a lot of common/simple issues i.e. convert
< to <.
- JavaScript’s global object is the root of all XSS (cross site scripting) attacks.
- The DOM is another source. All nodes are linked to all other nodes on the page and to the network.
- If code is clean and readable, it is less likely to contain insecurities.
- JSLint.com is a tool to define a professional subset of JavaScript that will help identify insecurities.
- Web 2.0:
- Mashups are a great innovation, but are insecure.
- Advertising is a mashup.
- Competition to displace the traditional web:
- Silverlight
- Adobe AIR
- JavaFX
- 3-prong strategy to fix the web:
- Safe JavaScript subsets: by using JSLint and ADsafe.
- Small browser improvements: event simple improvements can take a long time to distribute.
- Massive browser improvements.
- We need to replace JavaScript and the DOM with something more secure e.g. a secure subset of JavaScript.
- Be rigorous in your coding practices to help your security measures.
Posted by Jeff on January 31st, 2008 | No Comments »
- The debate about resolutions in regards to web interfaces:
- Not much of a debate anymore because of all the available devices and smaller resolutions related to those devices.
- We need to be able to deal with all of them.
- Dynamic interfaces is not the same as dynamic content.
- “You can’t make a design that’s perfect for everyone.”
- Flexibility:
- Font size.
- Font availability.
- Page width.
- JavaScript.
- Dynamic interfaces increase the range of the interface and hopefully provide a better experience for more users.
- We have the technology to easily provide these interfaces to users.
- Approaches:
- User-driven
- Developer-driven
- User-driven:
- Users are constantly looking for more/better ways to consume information.
- How can we make dynamic interfaces easier to use?
- Allow users to customize right on the page rather than customize, save, refresh, repeat.
- Can we transfer the idea of palette-based (desktop) interfaces to the web? e.g. iGoogle
- The new BBC home page is a great example of customizing content and layout i.e. changing the layout to suit your needs.
- Beyond HTML:
- Canvas – available in Safari, Firefox, Opera and Internet Explorer (with a plugin).
- HTML document with added interactivity such as graphing and interface elements.
- Yahoo! Pipes is a great example of Canvas use.
- These interfaces can be created easily using JavaScript and even plain old forms to choose options.
- The most important thing to remember: separate data, style, and behavior.
- Developer-driven:
- Change the interface/feedback based on user-interaction.
- Serving different layouts depending on browser window size.
- These two are client-side analysis.
- Server-side analysis – different layout depending on user’s logged-in status, etc.
- make sure you don’t shock the user, provide options.
- Providing these ideas/options is a lot of work, but will provide a better quality experience for your users.
- Technology is never a barrier for long because it changes so quickly.
Posted by Jeff on January 31st, 2008 | No Comments »
Indi Young, one of the founders of Adaptive Path and a interaction design pioneer since the early days of the web, delivered Thursday’s keynote at the Web Directions North conference. Her talk, “Innovation is Overrated,” explained how many companies talk about innovation as a concept and the term has emerged as a buzzword…but some detractors are pointing out that for all the talk of innovating, sometimes the quest for a bold new idea can get in the way of actually thinking about solutions to problems. Focusing on people and what they need, rather than adding widgets and pointless changes, will do more to drive real change, she said. It’s also important to focus on the long term rather than a quick change or changes, she said.
Modeling customers is another important component of innovation, Young noted. By thinking about how your customers actually behave and aligning your design strategy with that behaviour, you’ll end up with a more useful product. Creating a mental model diagram allows you to point to areas where you can better act on your customer’s needs and then act on them. For instance, Young pointed to a fictional movie distribution company and how various sets of customers will react in different ways to a film, ranging from alpha film geeks lining up days early to get tickets to busy families making time for a night out.
Young advocated for finding a gap to fill, looking for scarce or weak support, and redefining and augmenting existing features. She added that looking for surprises and emotional reactions, as well as rethinking behaviour that doesn’t match features are all solid ways to create innovation without losing focus on the people you want to serve, or forcing change for the sake of change.
Posted by Warren on January 31st, 2008 | No Comments »
- Key points:
- Understand innovation
- Model your customers
- Spend time with details
- Experts are saying we’ve hit the wall when it comes to innovation and efficiency.
- Extraordinary results can’t be forced.
- Innovation comes about while crafting the details of a solution.
- ”…focus on people and their problems…”
- Any behavior change needs to be understandable.
- The product/solution needs to survive the long term.
- Look for insights:
- Find a gap to fill.
- Look for scarce/weak support.
- Redefine and augment existing features.
- Look for surprises.
- Combine related behaviors.
- Look for user emotions.
- Examine spaces formally crossed out.
- Rethink features that don’t match behavior.
Indi highlighted a number of examples and analytical methods that are discussed in more detail in her upcoming book: “Mental Models: Aligning Design Strategy With Human Behavior”.
Posted by Jeff on January 31st, 2008 | No Comments »
- Gina is the leader of the Better GMail software project.
- The “Stone Soup” story is a great paradigm for open source software development.
- The idea for Better GMail started out with using Greasemonkey script to tweak the functionality/design of GMail.
- Stylish – Greasemonkey for CSS styles.
- Great resources:
- http://userscripts.org
- http://userstyles.org
- Gina showed us a number of excellent Greasemonkey scripts for GMail.
- Greasemonkey is great, but is too much work for most users.
- It would be great to install these scripts as Firefox extensions.
- User script compiler – takes Greasemonkey scripts and turns them into Firefox extensions. Good first step, but not simple enough.
- So she created Better GMail. A compilation of a lot of Greasemonkey scripts for GMail into a Firefox extension. Very easy for users to install.
- Gina became the liaison between Greasemonkey script developers and users.
- Babelzilla – online community of volunteer translators for Firefox extensions. Gina received 20 extensions when she asked the community for help translating Better GMail.
- Better GMail blog post was in the top ten most popular blog posts on the Gawker Media network for 2007.
- Also spun off Better GCal, Better Flickr, etc.
- One hitch in the road: major code changes at GMail were going to break all the existing GMail Greasemonkey scripts, as well as Better GMail.
- GMail decided to provide an API to developers to allow them to create Greasemonkey scripts that didn’t rely on markup (more future-proof) and allowed the developers time to rework their scripts before releasing the GMail changes to the wild.
- First company to really jump on the API was Remember the Milk (online to-do/task lists).
- http://diveintogreasemonkey.org to learn more about Greasemonkey.
- http://ginatrapani.org/workshop/firefox
Posted by Jeff on January 30th, 2008 | No Comments »
Andre Charland, the CEO of Vancouver-based Nitobi, was on hand at Web Directions 08 to give attendees a crash course in Adobe AIR development. AIR, put simply, lets web developers build desktop apps. Essentially AIR allows web development to be taken offline, and removes the restrictions that a browser interface imposes on developers. It features file I/O, native windowing and menuing, and can also tell if a user is online or offline. AIR also allows HTML content in Flash, can make calls to Actionscript right from Javascrpt, as well as closely integrating with PDF documents.
Air is a run-time, not a plugin, and is available now for Windows and the Macintosh, with Linux support coming soon. The program is free, as is the SDK.
Walter Smith of Jackson Fish Market gave an overview of Silverlight, Microsoft’s Flash challenger.
Silverlight’s origins are in the Windows Presentation Framework, but unlike WPF, Silverlight is small, works on Windows and the Mac, and is a browser plugin. WPF is part of the .NET framework and doesn’t integrate well with web technologies.
But what Silverlight does take from the WPF is an object model, markup in XAML and a runtime model. Version 2. will have controls, layout managers, data binding, support for dynamic languages, and the option of using the .NET framework. Silverlight also allows media streaming and naturally has Windows media support right out of the box.
Posted by Warren on January 30th, 2008 | No Comments »
Brian Oberkirch, the social media, web development and marketing consultant, delivered a talk at Web Directions North today about making sure social applications “play well with others.”
Oberkirch stressed that the “small pieces, loosely joined” model is the best way to approach social applications. Open, modular design (both hallmarks of UNIX development) and doing one task extraordinarily well is what it takes to create a great web app. Many apps try to o everything and fail to do anything well.
Oberkirch also pointed to social networking fatigue as a looming problem, and that while alpha geeks are the first to adopt digital identities online, they need to look at the design of social networking tools and make them much more portable, hackable, and distributed. Instead of endlessly filling in the same data in numerous sites, users should be able to manage their online identity, their friend lists and their preferences in a more streamlined manner.
He said the technology, in applications like OpenID, oAuth already widely available now, while the Creative Commons movement helps to propogate ideas of openness and sharing.
But in order for everyday users to adopt these technologies, they shouldn’t even have to know what technologies are underpinning a more social experience, he said. He pointed to foamee, a “who do I owe a beer” app that assumes you already use Twitter and adapts your account to that site. Open sites that allow exchange of these APIs allow for simplifying logins and pooling of data. Another app he pointed to was Dopplr, which uses your Gmail or Flickr info in order to populate a friends list that informs you when they’re in your home town. Plaxo is also designed to consolidate a user’s identity over numerous site sin order to make their online identity easier to manage.
But Oberkirch said no-one knows what the killer app is for portable social networking, at least not yet. He charged developers to work on reusing identity, making profiles portable, creating ways to import contact lists, but also to keep privacy concerns in mind.
Posted by Warren on January 30th, 2008 | No Comments »
- Synopsis:
- How people think about/use design.
- What does “intuitive” mean?
- Avis Rental website:
- Uses asterisks to indicate optional fields.
- Their explanation was that the majority of the form fields on their website were required, so they inverted the common convention of using asterisks to indicate required fields.
- When did the asterisk inherit the meaning of required?
- “Designs can’t be intuitive” – grammatically incorrect. People intuit what to do with the design. However, he uses designs are “intuitive” as a shortcut.
- When is a design not intuitive?
- When the user can’t figure out what to do.
- If it takes too long for the user to accomplish a task, or to figure out what to do to accomplish the task.
- Intuitive is personal – it depends on the user’s previous experiences and what they already know.
- Design is evolutionary:
- Designers build the technology.
- Then add features.
- Then reduce complexity to increase usability and lower the current knowledge requirement of users.
- Instant messenger setup wizard comparison:
- External help (taking users to another website, etc.) vs. inline/contextual help.
- Mr. Spool goes into detail about levels of user knowledge – current knowledge and target knowledge.
- When is a design intuitive? When current knowledge = target knowledge or when the knowledge gap is so small it is negligible.
- Real life testing examples are the only way to find out if a design is intuitive.
- Techniques for creating intuitive designs:
- Field studies.
- Usability studies.
- Personas.
- Patterns.
Posted by Jeff on January 30th, 2008 | No Comments »
