Upload
leyna
View
36
Download
0
Tags:
Embed Size (px)
DESCRIPTION
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. Design Concerns Web Application Users Functionality and Purpose Type of Users Device Type and Environment - PowerPoint PPT Presentation
Citation preview
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
देव बरें� करु�