Devices for Web Pages
Information Presentation and Interaction Techniques
Principles
Good
• ‘Smooth’, not jerky• Immediate, not page-
load• In-place, not page load• Multiple choices/ steps/
actions all performed in the same place
• Some devices allow better use of real estate, others allow users to consciously make the page more complex
Bad
• Cannot use the Browser’s back button, so widgets have to be used intelligently – do not perform ‘too many’ actions or those kind of actions that a person would click the Back button to ‘undo’
Basic Principle: Display• Something of x size, can become
something of Y size, based on user interaction. At either size, that something can have totally different content
• What the first x is (as tiny as a full stop, or as large as an ad banner) is totally within our control
• What the final Y is, is also totally within our control and can be designed completely differently, independent of the first x
• The ‘Y’ can act as a pop-up (over other existing elements), or as a larger space on the same page (pushing away other elements)
• The design of the page needs to account for this flexibility
Basic Principle: Function
• As a next step, something can happen in between the x and Y states: some data can be sent to the server, processed and new data can be displayed
• E.g., the user can change an icon on a toolbar. This change can be permanently recorded for that user on the server when the change is happening
User Input
Help the User while asking him for inputs (usually text)
Auto Complete Text box (Get Quote)
• Shows a list of auto-complete options while typing in text boxes, a-la Google Toolbar
http://ajaxwidgets.com/AllControlsSamples/, http://www.ajaxed.com/
Spellcheck
• AJAX can be used to provide spell-check functionality
Form Fields
• Guide a person through filling forms instead of throwing him error messages at the end
Content Sectioning
Different ways to show ‘lots’ of content in less space, with
1 level of categorisation
Vertical Tabs (called ‘Accordion’)
http://www.zdnet.com/
Accordion
For Navigation: www.Apple.com
Horizontal Accordionhttp://dev.portalzine.de/index?/Horizontal_Accordion--print
Simple Tabs
Yet Another Simple Tab
http://Windows.com
http://gulnar.in
Horizontal Tabs, with Transition Effect
http://www.zdnet.com/
Simple Tabs, with differing content sizes
Promo Unit, that expands on mouseover
http://www.zdnet.com/
• The design needs to allow for elements to be ‘pushed’
Content Switcher (different ‘tab’ presentation)
• Moving mouse over different links changes the content in the box
http://www.cnet.com/
Yet Another Content-Switcher
http://www.cnet.com/
Inline Pop-up
http://Windows.com
Yahoo style hidden tabs
www.yahoo.com
Switching Slides in Hero Spot
www.AOL.com
Expanding Content Space
http://www.playboy.com/articles.html
Navigation
Product Slider
http://www.ajaxdaddy.com/demo-jquery-carousel.html
Mac Like Menu
http://www.ajaxdaddy.com/demo-css-dock-menu.html
MS Quick Links
Top Slide Down Sitemap
http://codeigniter.com/user_guide/
Vertical Menus
• Old-school, but with better transitions
• Menus fold out vertically• This is similar to menus
opening up next to the top-level element, except that this requires a click, the other one happens on mouseover
http://www.cnet.com/
Personalisation
Give users the choice to customise their views
Personalisation
• First time a person comes to the site (customer), ask him to ‘personalise’ his site. Simple checkboxes let him set his ‘default’ view and a preview on the right shows a layout
• Layout needs to be designed with flexibility in mind, so that units can be ‘pushed around’
http://www.live.com/getstarted.aspx
Movable Boxes
• Boxes can be dragged around, closed or even personalised
http://www.live.com/
Page, Toolbar Options
http://www.yahoo.com
Remove, Rename Tabs, Add Tabs
• Each tab can be deleted, renamed or ‘set to default’• New tabs can be added, with a selection of what you want to
see in that tab• PS: Note that the site’s theme colour (masthead, link colours)
have changed based on the tab selected
http://www.live.com/
Windows
• Can be moved around, minimised or maximised
http://ajaxwidgets.com/AllControlsSamples/
Slideshows
Pictures, Products, Videos
Cute thing with Pictures
http://www.ajaxdaddy.com/demo-dhoni-show.html
Sexy Slideshow
http://www.ajaxdaddy.com/demo-smooth-gallery.html
Other Presentation Trends
Common features being used these days
Sitemap in Footer
Tour/Demo Pages
• Take a Tour pages are kept COMPLETELY clutter-free
• This is NOT a popup
• So what if the standard navigation links are also not there. There’s a link to go back home
http://in.webmessenger.yahoo.com/
Click n Drag
• You can drag across the timeline to view different events (or different prices of 5 stocks, for example)
• On clicking each ‘event’, details open up
http://simile.mit.edu/timeline/
New Item Fade-in
Sortable Tables
http://www.ajaxdaddy.com/demo-sorted-table.html
Many More
• Widgets: http://interface.eyecon.ro/demos
• Forms: http://www.zapatec.com/website/main/products/forms/demo.jsp
• http://www.ajaxdaddy.com/
What’s Coming Tomorrow?
Take a peek into the future
• Completely fluid, possibly 3-D, NOT very expensive websites
• Interfaces will gain a new axis of complexity
• The right design will differentiate between complex and simple
• Each site will be an experience, not just what you read or do
Get the Experience(no point showing 2D screenshots for these)
First install \\Library\Software\System_Tools\Silverlight.1.0.exe
• http://www.windowsvista.si/default.htm
• http://www.tafiti.com/• http://www.mediapreview.tv/
Top Related