Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
User Interface Design for Wordnet Website Indowordnet Workshop(1-2nd Jan 2011 IITB, Mumbai) Success of any software depends on the acceptability of the Users 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 3 DESIGN CONCERNS: Web Application What are the websites /web applications required? Individual Language WordNet Website 4 One for each Consortium member language One IndoWordNet Website User Interface Design For Wordnet Website DESIGN CONCERNS: Understanding the Users Who will use the website/web application? Category 1 : Academicians Category 2 : Researchers 5 Language Teachers Language Students NLP Researchers Developer of NLP tools Linguists Category 3: General Users User Interface Design For Wordnet Website DESIGN CONCERNS: Functionalities What are the functionalities that the users will expect ? 6 Online dictionary Act as a thesaurus To study basic linguistics concepts To study the structure of WordNet Use WordNet to build NLP applications DESIGN CONCERNS: Purpose What will be the use of this website/web application? Main Usages will be for For WordNet Developers 7 Searching a particular word Knowing Relations between words Research Teaching linguistic concepts Downloading synset data and API’s to build new NLP Application Make the WordNet data available to general public Obtain Feedback from Users to improve the overall WordNet quality and utility DESIGN CONCERNS: Type of User How comfortable are our users with Computers / The Web? (COMFORT LEVEL) 8 Medium Advanced 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. 9 Do we want to extend the functionalities to other devices? – To be discussed DESIGN CONCERNS: Device Type and Environment What screen resolution will the user see the website/web application? (SCREEN RESOLUTION) 10 Web is not WYSIWYG 1024 X 786 (present standard)computer screen Depends on the device DESIGN CONCERNS: Device Type and Environment In what form / format will the user be expecting the information from the website/web application?(FORMAT) 11 Depending on the Users. To be decided GENERAL GUIDELINES: Do’s and Don’ts of GUI Design (1/7)… Have multiple GUI design for a website Design using DIV and CSS (avoid tables unless necessary). 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 (?) Demonstration (Konkani WordNet html template) Do not use frames. 12 HTML 5 will not support frames Tags Being Discontinued in HTML 5 <acronym> Defines an acronym for example ‘WWW’ <applet> Defines an applet <basefont> Tag for defining the base font. CSS replaces this tag. Defines bigger text, however <small> is remaining in <big> HTML 5. New Tags to appear in HTML 5 <article> Defines an article <aside> Defines content aside from the page content <audio> Defines sound content <canvas> Define graphics <center> Defines centered text, images and other elements. <command> Defines a command button <dir> <font> Defines a directory list The traditional pre-CSS tag for text font, size, and color <datagrid> <datalist> Defines data in a tree-list Defines a dropdown list <frame> Defines a sub window (a frame) <datatemplate> Defines a data template <frameset> <isindex> <noframes> Defines a set of frames Defines a single-line input field Defines a noframe section <details> <dialog> <embed> Defines details of an element Defines a dialog (conversation) Defines external interactive content or plugin <s> Defines strikethrough text (Short Version) <event-source> Defines a target for events sent by a server <strike> <tt> Defines strikethrough text (Long Version) Defines teletype text Defines underlined text, this again would now be done in CSS Defines preformatted text <figure> <footer> Defines a group of media content, and their caption Defines a footer for a section or page <header> Defines a header for a section or page <mark> <meter> <nav> <nest> <output> <progress> <rule> <section> <source> <time> <video> Defines marked text Defines measurement within a predefined range Defines navigation links Defines a nestingpoint in a datatemplate Defines some types of output Defines progress of a task of any kind Defines the rules for updating a template Defines a section Defines media resources Defines a date/time Defines a video <u> <xmp> 13 GENERAL GUIDELINES: Do’s and Don’ts of GUI Design(2/7)… Keep the interface simple and structured Do not clutter the page with lot of information confusing the user. Demonstration Demonstration Show only relevant information. Group relevant information 14 Demonstration GENERAL GUIDELINES: Do’s and Don’ts of GUI Design (3/7)… Do not have too many things scrolling, flashing and in bold. Avoid drop down menu Demonstration 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. 15 Demonstration GENERAL GUIDELINES: Do’s and Don’ts of GUI Design (4/7)… Keep the menu element size large enough for easy clicking. Give rollover (hover) for menu items Demonstration To know the mouse positioning Use simple fonts like Arial,Verdana for English and Unicode for other languages. 16 Supported by all the browsers Are legible even at small font size GENERAL GUIDELINES: Do’s and Don’ts of GUI Design (5/7)… Keep the language simple and clear of technical jargons. Error messages should be prominent but not overpowering. To be discussed Demonstration with Example (Konkani WordNet) Add help text / video to help users use certain sections of the website Ex. word search. 17 To be discussed 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. 18 Demonstration with an example. 19 GENERAL GUIDELINES: Do’s and Don’ts of GUI Design (7/7)… Keep the colors easy on the eye Keep standard design across pages Demonstration Demonstration with example of Indowordnet Optimize all images for fast download 20 Photoshop Demonstration 21 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 Type of user 22 example example General user to be able to view advanced features but these features not to be seen by default PROPOSED SOLUTIONS: User , User Type and Device Dependent Design… User Dependent Design 23 Have separate GUI based on User Category and User Type Functionalities based on User Category need to be decided Include help text / Video PROPOSED SOLUTIONS: User , User Type and Device Dependent Design… Device Dependent Design 24 Have separate GUI based on Device and functionalities that can be made available on the device Functionalities based on device need to be decided 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 25 Thank You दे व बरें करुं