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

Success of any software depends on the acceptability of the Users

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

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

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 5User Interface Design For Wordnet Website

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 6

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 APIs 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 7

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

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 9

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 10

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 11

GENERAL GUIDELINES: Dos and Donts 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 GUIs 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 12

13 Tags Being Discontinued in HTML 5New Tags to appear in HTML 5 Defines an acronym for example WWW Defines an article Defines an applet Defines content aside from the page content Tag for defining the base font. CSS replaces this tag. Defines sound content Defines bigger text, however is remaining in HTML 5. Define graphics Defines centered text, images and other elements. Defines a command button Defines a directory list Defines data in a tree-list The traditional pre-CSS tag for text font, size, and color Defines a dropdown list Defines a sub window (a frame) Defines a data template Defines a set of frames Defines details of an element Defines a single-line input field Defines a dialog (conversation) Defines a noframe section Defines external interactive content or plugin Defines strikethrough text (Short Version) Defines a target for events sent by a server Defines strikethrough text (Long Version) Defines a group of media content, and their caption Defines teletype text Defines a footer for a section or page Defines underlined text, this again would now be done in CSS Defines a header for a section or page Defines preformatted text 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

GENERAL GUIDELINES: Dos and Donts 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 14

GENERAL GUIDELINES: Dos and Donts 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 15

GENERAL GUIDELINES: Dos and Donts 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 16

GENERAL GUIDELINES: Dos and Donts 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 17

GENERAL GUIDELINES: Dos and Donts 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. 18

19

GENERAL GUIDELINES: Dos and Donts 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 20

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 example Type of user example General user to be able to view advanced features but these features not to be seen by default 22

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 23

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 24

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