Devices on the Web (2.0)
Download as PPT, PDF
0 likes470 views
The presentation explains all the cool devices that AJAX and Advanced Javascript have made available. Site designers can use this to better organize information.
Devices on the Web (2.0)
- 1. Devices for Web Pages Information Presentation and Interaction Techniques
- 2. Principles
- 3. 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 Browsers 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
- 4. 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
- 5. 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
- 6. User Input Help the User while asking him for inputs (usually text)
- 7. 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/
- 8. Spellcheck AJAX can be used to provide spell-check functionality
- 9. Form Fields Guide a person through filling forms instead of throwing him error messages at the end
- 10. Content Sectioning Different ways to show lots of content in less space, with 1 level of categorisation
- 11. Vertical Tabs (called Accordion) http://www.zdnet.com/
- 12. Accordion For Navigation: www.Apple.com Horizontal Accordion http://dev.portalzine.de/index?/Horizontal_Accordion--print
- 13. Simple Tabs
- 14. Yet Another Simple Tab http://Windows.com http://gulnar.in
- 15. Horizontal Tabs, with Transition Effect http://www.zdnet.com/
- 16. Simple Tabs, with differing content sizes
- 17. Promo Unit, that expands on mouseover The design needs to allow for elements to be pushed http://www.zdnet.com/
- 18. Content Switcher (different tab presentation) Moving mouse over different links changes the content in the box http://www.cnet.com/
- 19. Yet Another Content-Switcher http://www.cnet.com/
- 21. Yahoo style hidden tabs www.yahoo.com
- 22. Switching 際際滷s in Hero Spot www.AOL.com
- 23. Expanding Content Space http://www.playboy.com/articles.html
- 24. Navigation
- 26. Mac Like Menu http://www.ajaxdaddy.com/demo-css-dock-menu.html
- 27. MS Quick Links
- 28. Top 際際滷 Down Sitemap http://codeigniter.com/user_guide/
- 29. 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/
- 30. Personalisation Give users the choice to customise their views
- 31. 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
- 32. Movable Boxes Boxes can be dragged around, closed or even personalised http://www.live.com/
- 33. Page, Toolbar Options http://www.yahoo.com
- 34. 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 sites theme colour (masthead, link colours) have changed based on the tab selected http://www.live.com/
- 35. Windows Can be moved around, minimised or maximised http://ajaxwidgets.com/AllControlsSamples/
- 36. 際際滷shows Pictures, Products, Videos
- 37. Cute thing with Pictures http://www.ajaxdaddy.com/demo-dhoni-show.html
- 39. Other Presentation Trends Common features being used these days
- 41. 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. Theres a link to go back home http://in.webmessenger.yahoo.com/
- 42. 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/
- 43. New Item Fade-in
- 45. Many More Widgets: http://interface.eyecon.ro/demos Forms: http://www.zapatec.com/website/main/products/forms/demo.jsp http://www.ajaxdaddy.com/
- 46. Whats Coming Tomorrow? Take a peek into the future
- 47. 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
- 48. 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/