Download - User Interface Design for Wordnet Website Indowordnet Workshop(1-2 nd Jan 2011 IITB, Mumbai)
![Page 1: User Interface Design for Wordnet Website Indowordnet Workshop(1-2 nd Jan 2011 IITB, Mumbai)](https://reader035.vdocuments.site/reader035/viewer/2022062511/5518bf72550346881f8b5533/html5/thumbnails/1.jpg)
User Interface Design for Wordnet Website
Indowordnet Workshop(1-2nd Jan 2011 IITB, Mumbai)
![Page 2: User Interface Design for Wordnet Website Indowordnet Workshop(1-2 nd Jan 2011 IITB, Mumbai)](https://reader035.vdocuments.site/reader035/viewer/2022062511/5518bf72550346881f8b5533/html5/thumbnails/2.jpg)
Success of any software depends on the acceptability of the Users
![Page 3: User Interface Design for Wordnet Website Indowordnet Workshop(1-2 nd Jan 2011 IITB, Mumbai)](https://reader035.vdocuments.site/reader035/viewer/2022062511/5518bf72550346881f8b5533/html5/thumbnails/3.jpg)
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
![Page 4: User Interface Design for Wordnet Website Indowordnet Workshop(1-2 nd Jan 2011 IITB, Mumbai)](https://reader035.vdocuments.site/reader035/viewer/2022062511/5518bf72550346881f8b5533/html5/thumbnails/4.jpg)
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
![Page 5: User Interface Design for Wordnet Website Indowordnet Workshop(1-2 nd Jan 2011 IITB, Mumbai)](https://reader035.vdocuments.site/reader035/viewer/2022062511/5518bf72550346881f8b5533/html5/thumbnails/5.jpg)
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
![Page 6: User Interface Design for Wordnet Website Indowordnet Workshop(1-2 nd Jan 2011 IITB, Mumbai)](https://reader035.vdocuments.site/reader035/viewer/2022062511/5518bf72550346881f8b5533/html5/thumbnails/6.jpg)
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
![Page 7: User Interface Design for Wordnet Website Indowordnet Workshop(1-2 nd Jan 2011 IITB, Mumbai)](https://reader035.vdocuments.site/reader035/viewer/2022062511/5518bf72550346881f8b5533/html5/thumbnails/7.jpg)
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
![Page 8: User Interface Design for Wordnet Website Indowordnet Workshop(1-2 nd Jan 2011 IITB, Mumbai)](https://reader035.vdocuments.site/reader035/viewer/2022062511/5518bf72550346881f8b5533/html5/thumbnails/8.jpg)
8
DESIGN CONCERNS: Type of User How comfortable are our users with
Computers / The Web? (COMFORT LEVEL) Medium Advanced
![Page 9: User Interface Design for Wordnet Website Indowordnet Workshop(1-2 nd Jan 2011 IITB, Mumbai)](https://reader035.vdocuments.site/reader035/viewer/2022062511/5518bf72550346881f8b5533/html5/thumbnails/9.jpg)
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
![Page 10: User Interface Design for Wordnet Website Indowordnet Workshop(1-2 nd Jan 2011 IITB, Mumbai)](https://reader035.vdocuments.site/reader035/viewer/2022062511/5518bf72550346881f8b5533/html5/thumbnails/10.jpg)
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
![Page 11: User Interface Design for Wordnet Website Indowordnet Workshop(1-2 nd Jan 2011 IITB, Mumbai)](https://reader035.vdocuments.site/reader035/viewer/2022062511/5518bf72550346881f8b5533/html5/thumbnails/11.jpg)
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
![Page 12: User Interface Design for Wordnet Website Indowordnet Workshop(1-2 nd Jan 2011 IITB, Mumbai)](https://reader035.vdocuments.site/reader035/viewer/2022062511/5518bf72550346881f8b5533/html5/thumbnails/12.jpg)
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
![Page 13: User Interface Design for Wordnet Website Indowordnet Workshop(1-2 nd Jan 2011 IITB, Mumbai)](https://reader035.vdocuments.site/reader035/viewer/2022062511/5518bf72550346881f8b5533/html5/thumbnails/13.jpg)
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
![Page 14: User Interface Design for Wordnet Website Indowordnet Workshop(1-2 nd Jan 2011 IITB, Mumbai)](https://reader035.vdocuments.site/reader035/viewer/2022062511/5518bf72550346881f8b5533/html5/thumbnails/14.jpg)
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
![Page 15: User Interface Design for Wordnet Website Indowordnet Workshop(1-2 nd Jan 2011 IITB, Mumbai)](https://reader035.vdocuments.site/reader035/viewer/2022062511/5518bf72550346881f8b5533/html5/thumbnails/15.jpg)
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
![Page 16: User Interface Design for Wordnet Website Indowordnet Workshop(1-2 nd Jan 2011 IITB, Mumbai)](https://reader035.vdocuments.site/reader035/viewer/2022062511/5518bf72550346881f8b5533/html5/thumbnails/16.jpg)
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
![Page 17: User Interface Design for Wordnet Website Indowordnet Workshop(1-2 nd Jan 2011 IITB, Mumbai)](https://reader035.vdocuments.site/reader035/viewer/2022062511/5518bf72550346881f8b5533/html5/thumbnails/17.jpg)
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
![Page 18: User Interface Design for Wordnet Website Indowordnet Workshop(1-2 nd Jan 2011 IITB, Mumbai)](https://reader035.vdocuments.site/reader035/viewer/2022062511/5518bf72550346881f8b5533/html5/thumbnails/18.jpg)
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.
![Page 19: User Interface Design for Wordnet Website Indowordnet Workshop(1-2 nd Jan 2011 IITB, Mumbai)](https://reader035.vdocuments.site/reader035/viewer/2022062511/5518bf72550346881f8b5533/html5/thumbnails/19.jpg)
19
![Page 20: User Interface Design for Wordnet Website Indowordnet Workshop(1-2 nd Jan 2011 IITB, Mumbai)](https://reader035.vdocuments.site/reader035/viewer/2022062511/5518bf72550346881f8b5533/html5/thumbnails/20.jpg)
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
![Page 21: User Interface Design for Wordnet Website Indowordnet Workshop(1-2 nd Jan 2011 IITB, Mumbai)](https://reader035.vdocuments.site/reader035/viewer/2022062511/5518bf72550346881f8b5533/html5/thumbnails/21.jpg)
21
![Page 22: User Interface Design for Wordnet Website Indowordnet Workshop(1-2 nd Jan 2011 IITB, Mumbai)](https://reader035.vdocuments.site/reader035/viewer/2022062511/5518bf72550346881f8b5533/html5/thumbnails/22.jpg)
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
![Page 23: User Interface Design for Wordnet Website Indowordnet Workshop(1-2 nd Jan 2011 IITB, Mumbai)](https://reader035.vdocuments.site/reader035/viewer/2022062511/5518bf72550346881f8b5533/html5/thumbnails/23.jpg)
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
![Page 24: User Interface Design for Wordnet Website Indowordnet Workshop(1-2 nd Jan 2011 IITB, Mumbai)](https://reader035.vdocuments.site/reader035/viewer/2022062511/5518bf72550346881f8b5533/html5/thumbnails/24.jpg)
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
![Page 25: User Interface Design for Wordnet Website Indowordnet Workshop(1-2 nd Jan 2011 IITB, Mumbai)](https://reader035.vdocuments.site/reader035/viewer/2022062511/5518bf72550346881f8b5533/html5/thumbnails/25.jpg)
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
![Page 26: User Interface Design for Wordnet Website Indowordnet Workshop(1-2 nd Jan 2011 IITB, Mumbai)](https://reader035.vdocuments.site/reader035/viewer/2022062511/5518bf72550346881f8b5533/html5/thumbnails/26.jpg)
Thank You
दे�व बरे�ं � करुं�