Dr. Thomas Website
User Interface Design Comp 6620
Rahul Potghan Sonal Kulkarni
Abstract The objective is to design and implement user interface for Professor Dr.
Thomas. The Project is to create a website for members and associates. The website will be used as web presence for professor.
Following are the important aspects which should be included while designing professor website:
• Office location, phone number, and email address.• Professional credentials as they appear in the SOU catalog.• A list of the subjects they teach• Recent photograph.• Optionally, pages may also contain:• A list of professional publications.• Research projects and interests.• The professional affiliations.
ScheduleProject should take approximately 45 hours. Week1 (Oct 12) Total work hours - 21 hour - Meet with Dr. Seals to gather requirements. 1 hour - Prepare the abstract and the tentative schedule for overall project. Keywords for lexicon. Week2 (Oct 19) Total work hours – 5
1 hour - Read article and give 1/2 page summary (expected from each person in the group) 2 hour - Submit the detailed Wire Frame.2 hour - Meet with the Dr.Thomas to refine requirements. Week3 (Oct 26) Total work hours – 84hours - Conceptual design2 hours- Interface Design2 hours - one related article and summarize (one article for each group member) Week4 (Nov 2) Total work hours – 42 hours - Write more details about project & background (1page) 2 hours – Summary of all papers and works.
Week 5 (Nov 9) Total work hours – 51 hour – Documentation and response from client and reading paper. Week 6 (Nov 16) Total work hours – 55 hours – Testing website and reading paper Week 7 (Nov 23) Total work hours – 66 hours –Documentation for final Report (1 phase) Week 8 (Nov 30) Total work hours – 44 hours - Final Project report (Final Phase) Final Week (Dec 7) Total work hours – 66 hours- End of Cycle with UI sanity testing by developers. Write more details about programming
problems encountered, language used, etc. (1-2pages) .submission of UI and 8 page final submission for Development groups using CHI.
Hardware & Software Requirements
Following are the minimum requirements viewing this Web site o with optimal results.
Operating Systems PC : Windows 98/2000/NT 4.0 (PII) Macintosh: OS 8.1 (PowerPC)
Web Browser PC : IE 5.5 SP1 Macintosh: IE 5.03, Firefox, Safari, ChromeFile Compression PC : WinZip Macintosh: Stuffit Expander 6.01 Terminal Emulator Xwin32, SecureCRT or SSHHardware Details : P2, P3, P4, with minimum 128 Mb RAM, minimum 1 GHz processor, 3 GB
space
Lexicon
Following are the important keywords which will be used. Index Page- Home page of websiteURL- (Uniform Resource Locator) Address of a resource on the internet.Hypertext links- Hypertext, technique for organizing computer
databases or documents to facilitate the nonsequential retrieval of information
Server- Network computer, computer program, or device that processes requests from a client.
Tabs- Buttons on the page, which on click will take to other page associated with button name.
Software Process that will be used for this project
RAD: Refers to the type of Software development process, which minimizes the pre-planning phase, and results in more rapid software development lifecycle.
As in our project we will first builds preliminary data models and business process models as per the client requirement. Prototyping then will be useful to us and users to verify those requirements and to formally refine the data and process models.
Iterative Process: Iterative development means creating increasingly functional versions of a system in short development cycles. Each version is reviewed with the client to produce requirements that feed the next version
In our Project we will be using more of iterative process as it will have following advantage • repeated synchronization yields piece-wise integration•early insight into inter-component interaction• working software early
WireframeA website wireframe is a basic visual guide used in interface design to suggest the structure of a website and relationships between its pages.
Wireframe separates the graphic elements of a Web site from the functional elements in such a way that Web teams can easily explain how users will interact with the Web site.
Next slide is the snap shot of the current website which does not look appropriate.In the Slide number 3 we have presented wireframe for the Dr. Thomas website, which just show the simple layout of home page and important links on it.
Snap Shot of Current Website(OLD)
ImageAU LOGO
search etc
Teaching Research PublicationHome Student Useful Links
Personal Info
Contact info
Faculty Image
Title
home
syllabus
lectures
Publication
Resources
Assignments
Projects
Etc
Contents
Useful Links1234
Wireframe above fulfill all the functional requirements of the website which is lacking in current website. All the design applications which are of key importance in faculty webpage are included to demonstrate design aspects of website.
Low tech Prototype
Wireframe-High Tech Prototype
Wireframe-High Tech Prototype, page 2
Alternative wireframe-2
Task Scenario
• In the previous design webpage doesn’t have information organized.
• Research, Vita & Course information missing• Also if new user will visit website he have to browse through
pages to look for contact information.
So following slides have important functionality steps so that user will go to site and he will have access to contact information, available courses, Research,
curriculum vita, study materials.
Functional Requirements
• The website should provide easy access to information regarding the office hours of the faculty member to the students.
• The website should enable students to access the lectures and related study materials.
• The website should provide information about the courses offered by the faculty member.
• The website is required to contain information about the research interests of the faculty member.
Easy access to contact
information
Important Links
Top Bar has important tabs
Alternative Design- User visit on page and he has all easy access to contact info, important links
Details shown after clicking “Reseach” tab
User will just go to Research Page for more details
Easy access to contact
information
Important Links
Top Page
Alternative Design
Bottom Page
Access to all Important Resources on home Page
Article citation
1) Shneiderman B, Web Science: A Provocative Invitation to Computer Science, communications- ACM,2007 50(6) 25-27 http://www.cs.umd.edu/~ben/ShneidermanCACM6-2007.pdf
2) Shneiderman B, Promoting Universal Usability with Multi Layer Interface Design, ACM,2004 109-116 http://www.cs.umd.edu/~ben/ACM-CUU2003.pdf