Transcript User Interface Design for Wordnet Website

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
दे व बरें करुं