User Interface Design for Wordnet Website

1. User Interface Design for Wordnet Website Indowordnet Workshop(1-2nd Jan 2011 IITB, Mumbai)

2. Success of any software depends on the acceptability of the Users

3. Outline • Design Concerns • Web Application • Users • Functionality and Purpose • Type of Users • Device Type and Environment • General Guidelines • Do’s and Don'ts of GUI Design • Proposed Solution • User, User type and Device dependent Designs • Steps to design GUI

4. DESIGN CONCERNS: Web Application • What are the websites /web applications required? • Individual Language WordNet Website • One for each Consortium member language • One IndoWordNet Website User Interface Design For Wordnet Website

5. DESIGN CONCERNS: Understanding the Users • Who will use the website/web application? • Category 1 : Academicians • Language Teachers • Language Students • Category 2 : Researchers • NLP Researchers • Developer of NLP tools • Linguists • Category 3: General Users User Interface Design For Wordnet Website

6. DESIGN CONCERNS: Functionalities • What are the functionalities that the users will expect ? • Online dictionary • Act as a thesaurus • To study basic linguistics concepts • To study the structure of WordNet • Use WordNet to build NLP applications

7. DESIGN CONCERNS: Purpose • What will be the use of this website/web application? • Main Usages will be for - • Searching a particular word • Knowing Relations between words • Research • Teaching linguistic concepts • Downloading synset data and API’s to build new NLP Application • For WordNet Developers • Make the WordNet data available to general public • Obtain Feedback from Users to improve the overall WordNet quality and utility

8. DESIGN CONCERNS: Type of User • How comfortable are our users with Computers / The Web? (COMFORT LEVEL) • Medium • Advanced  

9. DESIGN CONCERNS: Device Type and Environment • What are the devices that the users will be using this website / web application? Ex. Computer, Hand Held devices, Tabs, Cell phones etc. • Do we want to extend the functionalities to other devices? – To be discussed

10. DESIGN CONCERNS: Device Type and Environment • What screen resolution will the user see the website/web application? (SCREEN RESOLUTION) • Web is not WYSIWYG • 1024 X 786 (present standard)computer screen • Depends on the device

11. DESIGN CONCERNS: Device Type and Environment • In what form / format will the user be expecting the information from the website/web application?(FORMAT) • Depending on the Users. • To be decided

12. GENERAL GUIDELINES: Do’s and Don’ts of GUI Design (1/7)… • Have multiple GUI design for a website • Depending on the users - Ajax based for advanced users and simple html for general users • Depending on the devices - Separate GUI’s could be created for other devices (?) • Design using DIV and CSS (avoid tables unless necessary). • Demonstration (Konkani WordNet html template) • Do not use frames. • HTML 5 will not support frames

14. GENERAL GUIDELINES: Do’s and Don’ts of GUI Design(2/7)… • Keep the interface simple and structured • Demonstration • Do not clutter the page with lot of information confusing the user. • Demonstration • Show only relevant information. • Group relevant information • Demonstration

15. GENERAL GUIDELINES: Do’s and Don’ts of GUI Design (3/7)… • Do not have too many things scrolling, flashing and in bold. • Demonstration • Avoid drop down menu • Demonstration • It becomes difficult for certain section of users to use the same. • Keep menu on the left so as to allow ample space for additions later. • Demonstration

16. GENERAL GUIDELINES: Do’s and Don’ts of GUI Design (4/7)… • Keep the menu element size large enough for easy clicking. • Demonstration • Give rollover (hover) for menu items • To know the mouse positioning • Use simple fonts like Arial, Verdana for English and Unicode for other languages. • Supported by all the browsers • Are legible even at small font size

17. GENERAL GUIDELINES: Do’s and Don’ts of GUI Design (5/7)… • Keep the language simple and clear of technical jargons. • To be discussed • Error messages should be prominent but not overpowering. • Demonstration with Example (Konkani WordNet) • Add help text / video to help users use certain sections of the website Ex. word search. • To be discussed

18. GENERAL GUIDELINES: Do’s and Don’ts of GUI Design (6/7)… • Users should get resting space on the webpage (white space). • Give enough contrast between the background color and the color of the foreground elements. • Demonstration • Do not give unnecessary watermark images that will distract the user or force the user to follow a pattern. • Demonstration with an example.

20. GENERAL GUIDELINES: Do’s and Don’ts of GUI Design (7/7)… • Keep the colors easy on the eye • Demonstration • Keep standard design across pages • Demonstration with example of Indowordnet • Optimize all images for fast download • Photoshop Demonstration

22. PROPOSED SOLUTIONS: User , User Type and Device Dependent Design… • User Dependent Design • Have one general Interface with basic functionality for general User • Keep the User of the website in mind • Category of User • example • Type of user • example • General user to be able to view advanced features but these features not to be seen by default

23. PROPOSED SOLUTIONS: User , User Type and Device Dependent Design… • User Dependent Design • Have separate GUI based on User Category and User Type • Functionalities based on User Category need to be decided • Include help text / Video

24. PROPOSED SOLUTIONS: User , User Type and Device Dependent Design… • Device Dependent Design • Have separate GUI based on Device and functionalities that can be made available on the device • Functionalities based on device need to be decided

25. Steps to design GUI • Get User Requirement • Create Wire Frame Design • Transfering design to Design Tool • Converting from Design to HTML • Creating a template from HTML

26. Thank You देव बरें करुं