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

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

User Interface Design For Wordnet Website4

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 Website5

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

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 

13

Tags Being Discontinued in HTML 5 New Tags to appear in HTML 5

<acronym>

Defines an acronym for example ‘WWW’ <article> Defines an article

<applet> Defines an applet <aside>Defines content aside from the page content

<basefont>

Tag for defining the base font. CSS replaces this tag.

<audio> Defines sound content

<big>Defines bigger text, however <small> is remaining in HTML 5.

<canvas> Define graphics

<center>Defines centered text, images and other elements.

<command> Defines a command button

<dir> Defines a directory list <datagrid> Defines data in a tree-list

<font>The traditional pre-CSS tag for text font, size, and color

<datalist> Defines a dropdown list

<frame> Defines a sub window (a frame)<datatemplate>

Defines a data template

<frameset>

Defines a set of frames <details> Defines details of an element

<isindex> Defines a single-line input field <dialog> Defines a dialog (conversation)<noframes>

Defines a noframe section <embed>Defines external interactive content or plugin

<s> Defines strikethrough text (Short Version)<event-source>

Defines a target for events sent by a server

<strike> Defines strikethrough text (Long Version) <figure>Defines a group of media content, and their caption

<tt> Defines teletype text <footer> Defines a footer for a section or page

<u>Defines underlined text, this again would now be done in CSS

<header> Defines a header for a section or page

<xmp> Defines preformatted text <mark> Defines marked text

<meter>Defines measurement within a predefined range

<nav> Defines navigation links<nest> Defines a nestingpoint in a datatemplate<output> Defines some types of output<progress> Defines progress of a task of any kind<rule> Defines the rules for updating a template<section> Defines a section<source> Defines media resources<time> Defines a date/time<video> Defines a video

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.

 

19

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

21

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

Thank You

दे�व बरे�ं � करुं�