Muhammad yousaf final_project_report_new

781 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
781
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Muhammad yousaf final_project_report_new

  1. 1. 1 Table of Contents1. Introduction ……………………………………………………………………………. 22. The Purpose of the Project………….……………………………………………….. 2 2.1 Professional Goals………………………………………………………............. 2 2.2 Learning Goals………………………………………………............................ 23. Web Graphical User Interfaces ……………………………………………………. 34. What is JQuery? ……………………………………………………………………….. 35. JQuery vs Flash ………………………………………………………………………… 46. Defining user friendly GUI …………………………………................................ 67. General Principals of Interface Design………………………………………….. 78. Testing and Analysing GUI based on JQuery ……….................................. 11 8.1 Form………………………………………………………………………………….. 11 8.1.1 A form with validation message …………………………………………… 12 8.1.2 Highlighting Current Field …………………………………………………… 12 8.1.3 Changing background color ……………………………………………….. 12 8.1.4 Confirming a form data before submitting……………………………….. 13 8.1.5 Playing a sound while cursor moves to next field ……………………… 13 8.1.6 Changing font style …………………………………………………………… 14 8.1.7 Submitting form without page refresh……………………………………. 14 8.1.8 Auto Complete Form ………………………………………………………… 15 8.2 Picture Gallery ………………………………………………………………...... 18 8.3 Inline Editing …………………………………………………………………….. 21 8.4 Tables ……………………………………………………………………………… 249 The product (Web Forms)……………………………………………………………. 27
  2. 2. 2 10 Usability Test……………………………………………………………………………. 30 11 Conclusion ……………………………………………………………………………… 33 11 Reference ………………………………………………………………………………. 33Introduction:In the final project of this program I am going to work with front-end design and development.Some websites use flash for interfaces and some Jscript. Depending on site requirements andclient’s needs, responsibility comes to developer which technology is going to be used to obtainthe expected results. I shall do development oriented analyzing keeping in mind also design.My tasks will be to analyze and development modern Web User Interfaces. How to usetechnology to gain required user interfaces.Websites are not static, updates comes every second day. Static websites become headache fordevelopers. Web user interfaces looks static but there are not.In my work, I shall analyze UI and suggest solutions to improve them. In simple words, mytheme can be written as:“Developing user friendly GUI’s using JQuery”A test will be conducted on web user interfaces developed in JQuery by applying generalprincipals of GUI and usability guidelines .Dynamic User Interfaces based on JQuery will becompare with static UI . In conclusion, result will be obtained either JQuery helps to developuser friendly Web Interfaces or not.2. The purpose of the project: The purpose of this project is to learn front end design and development. The professionaland learning goals are:2.1 Professional Goals: a) Be able to analyze web user interfaces depending on client’s requirements. b) Be able to produce UI.
  3. 3. 32.2 Learning Goals:a) Studying web user interfaces in depth.b) Design pattern for web GUI (Graphical User Interfaces)c) Learning technologies related to development.d) J Query (A Java Script based library for quick development )e) Choice of Technology 3. Web Graphical User InterfacesWe experience a number of web sites every day. Do we realize what make website decent andbonny? The first look at main page gives you an estimate how good it is. A well structured andelegant graphics website makes you please to use the site. Graphics should have a clear themeso that when a user is going to click, he/she knows what going to happen after clicking it.Graphical User Interfaces interact directly with user. User doesn’t know what is happen atbackend side, Designer/developer need to make website clean as possible. Mixing and puttinga lot of content together make website nasty. Brightness also effect on website credibility. Awell optimized content page attracts visitors effectively. An effective user interface design willensure that visitors understand the functionality and purpose of website.GUI in web cover a lot of components like menes, tabs, radio buttons, check boxes, text boxes,dialogue boxes and so on. GUI normally designs according to website look and functionality.Java script is first choice to develop GUI for web but also flash is another option. New GUI arebeing developed day by day to ease functionality. Developers have developed Jscript libraries toreduce time for development. JQuery, Prototype, X Library are few of them. 4. What is JQuery?
  4. 4. 4JQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, eventhandling, animating, and Ajax interactions for rapid web development. JQuery is designed tochange the way that you write JavaScript.(jquery.com) JQuery can be used for every kind ofGUI from fancy dialogue to form with validation. JQuery nicely manipulate DOM elements, CSSmanipulation, effects and animation, Ajax and extensible through plug-ins . JQuery is crossbrowser compatible. It works perfect with Firefox, Chrome, Safari, Opera and nasty InternetExplorer.JQuery is easy to learn and it reduce developing time. Design ideas can turn into reality withless tension. JQuery manipulate css and shows css properties during navigation.JQuery is open source but it has hug community to support. It simplified the code. 5. JQuery Vs Flash.It is critical quest when it comes to comparing JQuery with Flash. JQuery has its ownadvantages and disadvantages same as flash. Flash looks more fancy but JQuery is also notmuch behind. JQuery attract users very quickly. There was a time when people only think flashis the only option for rich internet contents but now there are many technologies like MicrosoftSilverlight and upcoming HTML5. There are options to build rich internet contents combiningJQuery with Ajax.A table shows when to use JQuery(Java Script) and when to Flash. Application Flash JavaScript(JQuery) Slide Show X Form Validation X Dropdown Menus X Tabbed Panels X Popups & Tooltips X Expandable/Collapsible X Elements
  5. 5. 5 Video/Audio Player X Complex Animation X 3D X Complex Multimedia XSource: http://logicpool.com/archives/30There are some other advantages why people prefer JQuery over Flash. I) Updates are easy. Use of JQuery with css give a chance to updates the contents easily with CMS. All the contents are saved in database. Any change in any time is possible when it require. While flash does not give this opportunity. II) Contents are Search Engine Friendly: All data is represented in html so it is easy for search Engine to look into and find its search or key words. III) Compatibility : JQuery compatible with more browsers then flash like IPhone, cell phones etc. IV) Coding and File Size: Coding in JQuery is easy and also it reduce file size as compare to flash. V) Free Plugins : JQuery is Open Source. Hundreds of free plugins are available for rapid development. VI) Ideal for programmer : JQuery is easy to learn. Developer with little attention can go through into JQuery.
  6. 6. 66. Defining Friendly User Interfaces 6.1 Visible The contents should be visible and have right brightness. 6.2 Better Control : The user should have better control over the contents. Especially in navigation it really matters. For example a menu have its sum menus. When you click on main items of menu, a list of child items appear. If user take their mouse over the child items and child items disappear before he/she click on item. It shall be annoying. 6.3 Refreshing only contents that need be: A good webpage is whom, which not reload every time when a user click on some content.This is new trend but handy. With this functionality user can be benefit who have low internet speed. So it comes under Accessibility. This functionality can be gain using JQuery and Ajax together. 6.4 Dynamic Contents in Web User Interfaces. Dynamic contents in user interfaces help to getting their desire results. www.cricinfo.com is an example where contents regularly refresh and are dynamic. 6.5 Help A interface or content should be helpful if user feeling difficult to use it or problem accessing it. Like confirming actions by dialogue box so user exactly know what he/she is doing.
  7. 7. 7 6.6 Correcting User’s Mistakes: When a user enter data into a form, chance of wrong entry data mostly likely exist. Highlighting user’s mistakes and correcting them gives help and surety to user. 6.7 Clean and Clear: GUI of website should be clean and clear. 6.8 Only Necessary Information: On necessary information need to show in GUI. If user need more information Then it should be on click or mouse over. 7. General Principals of Interface DesignIn addition I am including general principals of Interface design (Graphical User Interfaces)from book“The Essential Guide to User Interface Design: An Introduction to GUI Design Principles andTechniques” by Wilbert O. Galitz .Accessibility Aesthetically Pleasing AvailabilityClarity Compatibility ConfigurabilityControl Directness EfficiencyFamiliarity Flexibility ForgivenessImmersion Obviousness OperabilityPerceptibility Positive First Impression PredictabilityRecovery Responsiveness SafetySimplicity Transparency Visibility
  8. 8. 87.1. AccessibilitySystems should be designed to be usable, without modification, by as many people as possible.7.2. Aesthetically PleasingProvide visual appeal by:Providing meaningful contrast between screen elementsCreating groupingsAligning screen elements and groupsProviding three-dimensional representationUsing color and graphics effectively and simply7.3. AvailabilityMake all objects available at all times.Avoid the use of modes.7.4. ClarityThe interface should be visually, conceptually, and linguistically clear, including:Visual elementsFunctionsMetaphorsWords and text7.5. CompatibilityProvide compatibility with the following:The userThe task and jobThe productAdopt the user’s perspective.7.6.ConfigurabilityPermit easy personalization, configuration, and reconfiguration of settings.Enhances a sense of controlEncourages an active role in understanding7.7. ControlThe user must control the interaction.The context maintained must be from the perspective of the user.
  9. 9. 9The means to achieve goals should be flexible and compatible with the users skills,experiences, habits and preferences.Avoid modes because they constrain the actions available.Permit the user to customize the interface but provide defaults.7.8. DirectnessProvide direct ways to accomplish tasks.Available alternatives should be visible.The effect of actions on objects should be visible.7.9. EfficiencyMinimize eye and hand movements, and other control actions.Transitions between various system controls should flow easily and freely.Navigation paths should be as short as possible.Eye movement through a screen should be obvious and sequential.Anticipate the user’s wants and needs whenever possible.FamiliarityEmploy familiar concepts and use a language that is familiar to the userKeep the interface natural, mimicking the user’s behavior patternsUse real-world metaphors7.10. FlexibilityA system must be sensitive to the differing needs of its users, enabling a level and type ofperformance based upon:Each user’s knowledge and skillsEach user’s experienceEach user’s personal preferenceEach user’s habitsThe conditions at that moment7.11. ForgivenessTolerate and forgive common and unavoidable human errorsPrevent errors from occurring whenever possibleProtect against possible catastrophic errorsWhen an error does occur, provide constructive messages7.12. ImmersionA state of mental focus so intense that awareness and sense of the real world is lostFoster immersion within tasks
  10. 10. 107.13. ObviousnessA system should be easily learned and understood:What to look atWhat it isWhat to doWhen to do itWhere to do itWhy to do itHow to do itFlow of actions, response, visual presentations, and information should be:In a sensible orderEasy to recollectEasy to place in context7.14. OperabilityEnsure that a systems design can be used by everyone, regardless of a persons physicalcapabilities.7.15. PerceptibilityEnsure that a systems design can be perceived, regardless of a persons sensory capabilities.7.16. RecoveryA system should permit:Commands or actions to be abolished or reversedImmediate return to a certain point if difficulties ariseEnsure that users never lose their work as a result of:An error on their partHardware, software, or communication problems7.17. SafetyProtect the user from making mistakes.Provide visual cuesRemindersLists of choicesOther aids as necessary7.18. SimplicityProvide as simple an interface as possible.
  11. 11. 11Five ways to provide simplicity:Use progressive disclosure, hiding things until they are neededPresent common and necessary functions firstProminently feature important functionsHide more sophisticated and less frequently used functionsProvide defaultsMinimize screen alignment pointsMake common actions simple at the expense of uncommon actions being made harderProvide uniformity and consistency7.19. TransparencyPermit the user to focus on the task or job, without concern for the mechanics of the interface.Workings and reminders of workings inside the computer should be invisible to the user7.20. VisibilityA systems status and methods of use should be clearly visible.Improve visibility throughHierarchical organizationContext sensitivity 8. Testing and Analyzing GUI based on JQuery Now I will go through the GUI based on JQuery and try to find how user friendly are. 8.1 Forms Forms are part of almost every website. Contact form is exist nearly in every website. Simple forms without any validation do not give any meaning to collecting right data. Validation at both front-end and back-end is necessary. Developing user friendly forms need some extra consideration from visual look to functionality. With the combination of
  12. 12. 12 JQuery and Ajax, form can be constructed according to user requirements and can also be facilitate with extra features.Let’s look at some of the different form structures.8.1.1. A form with validation message.First Name --- ---------------- (Validation message can appearhere)Last Name Field is Blank. Please enter your lastname.(Example) Submit (Validation Message)This is simple front end validation which easily can be generate with JQuery.8.1.2. Highlighting current fieldLet’s make it little more fancy. Changing of current field’s color make field more viewable.First Name --- Highlighting outline color.Last Name Submit8.1.3. Another option, Changing of background color.First Name --- Filling of field with colorwhile cursor is up.Last Name
  13. 13. 13 Submit8.1.4 Confirming of Form Data before submitting to server.With dialog box it is possible . Please review the information once again. First Name : Jhon Last Name : Smith < Confirm CancelClicking on Confirm button, User confirm information .8.1.5. Playing a Sound while cursor moves to next field.First Name --- Play Sound while cursor go downLast Name
  14. 14. 148.1.6. Changing Font Style .Scene 1.First Name Jhon Bold and Italic during fillingfield.Last NameScene 2.First Name Jhon No bold or Italic after leaving thefieldLast NameFont style can be like Capital Letters while typing.8.1.7. Submitting form without page refresh :With JQuery you can submit a form without page refresh.Reference : http://net.tutsplus.com/demos/contactform/
  15. 15. 15After submitting form , the URL does not change and remain same.This function helps to follow the principal “Stay on the Page” from book “Designing WebInterfaces” 8.1.8. Auto Complete Form :Auto complete form is a popular feature which can be produce with the help of JQuery andAjax.It help to finding quickly information that user is looking for.
  16. 16. 16Lets look at googleAnd also facebook…..Auto Complete feature is pretty handy when user have to select an item from a list.There are two ways to make an Auto Complete. 1. Static 2. DynamicIf there is a limited number of items that have to be displayed then static method can beused.Static Auto Complete can be constructed using an array in Java Script which holds items of
  17. 17. 17a list.If values of an items change often then dynamic method is suitable. In this case, valuesare taken from database.Auto complete include in JQuery API , just need to customize according to design andrequirements .I recommend that using Auto Complete feature with Ajax, Php or Asp.net andDatabase is helpful and easy to maintain. It is because values of an item mostly likely changedafter a period of time.Link to Auto Complete JQuery API.http://docs.jquery.com/UI/Autocompleteif you are interested to use Auto Complete with Ajax and Php, Lets follow this link.It is easy to understand .http://devmanuals.com/tutorials/php/autoComplete.htmlIn this example , there is database which has table named as “course” . The ‘course ’ hascolumn course_name . Query select the names of course respected to first letter that usertype in the search box.
  18. 18. 18And result is :8.2. Picture Gallery/ Slide Show / SliderPicture Gallery is common in websites now a days. Picture Gallery is not only used for picturesbut also showing web contents. A BBC News website is an example of it .This is slider which contains images , text , links etc.Well if need more creativity and motions, Flash can be an option.The questions comes here why not use flash instead of picture gallery based on JQuary . Its alldepend on contents. If there are only pictures then flash can be used but if there is text thenJQuery is perfect. JQuery helps Search Engines to find text .
  19. 19. 19In my opinion, Flash is only suitable for fashion website and interactive movies.The popularity of JQuery based picture gallery is growing.The best way to develop a Picture Gallery is again to use JQuery with Ajax and Php or Asp.net.The use of these technologies give ease to maintain the contents or pictures in thePicture Gallery. Picture Gallery can be design in many ways . Lets looks some of options.Suppose there are products of a company. It can be design like this.
  20. 20. 20A view at Televic website.Link: http://www.televic.com/en/The contents moves from right to left but as mouse hover right or left side , the speed becomefast. The contents looks like vibrating while moving.
  21. 21. 21Another view:Now apears dialog box containing picture with short description.8.3. Inline EditingInline editing allows user to edit text or contents in same page as where it is shown. When userhovers in the editable area, normally the background color of the area changes to another colorfor example light yellow. After clicking on the content, content becomes editable and usually“Save” or “Cancel” and some times “Remove” buttons appears below the content or text.Inline Editing make user able to edit contents on the web page without losing the content.Inline Edit process usually four statesNon-edit state : Text will be in view mode. No edit actions are available.Invitation to Edit : In this state , user invited to edit as he/she take mouse to the text orcontent.
  22. 22. 22 The cursor moves to edit cursor and background color changes. Another way to invite is placing a edit link beside the contents.Edit State : Upon clicking on the element / edit link, text or contents starts loading into a edit mode. “Save” or “Cancel ” buttons also appears. Another way is Auto Save where user don’t need to press save button. It all depend on text/contents.Ending State : When user click on “Save” button after editing, it can take some seconds to save the work so let’s indicate it with “ saving….” text.Accessibility :Inline Editing is pretty handy but problem is that it is not very user friendly. Maybe user don’tunderstand how to use it or might not see editable text or contents.So lets show a separate link along the element. Depending on content, consider also analternative way to edit content . It can a separate page.Lets look at some of the examples.Non-edit StateInvitation to Edit:
  23. 23. 23Changing background color helps more to understand that it is target area.Edit State:
  24. 24. 24Ending State:Source: http://www.labs.mimmin.com/inlineedit/#demo8.4. TableTable are handy when data is in columns and rows format. Data often comes fromdatabase.I am going to compare a html table and JQuery sortable plugin.Link to Plugin : http://mottie.github.com/tablesorter/docs/index.html#Examples
  25. 25. 25A simple html table :Now images from Tablesorter Plugin :Sortable
  26. 26. 26Sortabel and Search :Applying theme :
  27. 27. 27This plugin also offers other functionality.Search within table helps to find the specific record. Search with browser return resultsfrom whole page which lose users focus from table.Applying theme give one kind of control and choice. Depending on user preference, arelevant theme can be chosen. 9. The Product (Web Forms)The product is a web form. Forms are key part of any website. Forms often used when it comesto authentication, selling the goods, contact information and many others. In product there aretwo forms which deal with authentication and registering users.I have taken help from the book “Web Form Design, Filling in the Blanks” by Luke Wroblewski.Luke is Senior Principal Designer at Yahoo Inc. His work is tremendous on web forms.In functionality, I applied JQuery’s User Interfaces Which help the forms being a user friendly.“Validate”, “Input Mask “, “DatePicker” and “Fancbox” which is a ligh box , are some ofthem.Bootrstrap, from Twitter which has a set of user interfaces components is also included inthe form.I have created both dynamic and static forms. Dynamic use JQuery and CSS while static haveonly backend system. The screen shots are below:Dynamic and static Login Form:
  28. 28. 28Static formDynamic and Static register form
  29. 29. 29Static Register FormStatic Register form does not include front-end validation, tooltip, Input mask and datepicker.Only backend validation is implemented.
  30. 30. 30 10. Usability TestA usability test was conducted from three persons. The location of all persons were deferent . Use Cases : Login Actors• 3 Users• Login ControlDescriptionUsers are required to login in order to enter the system. Once system validate the user it will grantaccess to main page. User must have account before going to login control.Use Case: RegistrationActors • 3 Users • Register
  31. 31. 31DescriptionUsers are required to fill in the “register” form. The register form possible contains Name,Email, Password, CPR No. and Date of Birth fields. A strong password is expected due tosecurity reasons. Help will be provided in the form of tooltip.I asked the users to use both dynamic and static forms. After that I asked questions and notedtheir activity. User (a) refer to Abdullah Anjam Age:32 User(b) refer to Karam Preet Singh Age: 27 User(c) refer to Kelly Tijtgat Age: 23(Not sure)Questions and Answers (Concerning both dynamic and static forms) Q. Does it give you a visual appeal?Ans. a) Yes , its o.k b) it seems to be great c) it is great but further improvement is possible.Q Does system provide help? If yes, then when it was helpful?Ans. a) sure, tooltip is helpful, especially in password field. b) Yes it is helpful but may be not necessary on all fields. C) c) Yes, as I don’t know about cpr number.Q. Does form is easily readable?Ans. a) yes, no problem b) No problem c) No problem, maybe labels should be in bold font Q. Does form layout change in different browsers as user have different preferred browsers? Ans. a) Internet Explorer (work fine except transition effect) b) Chrome (No problem) c) Firefox (No problem)
  32. 32. 32Q. What do you think register form does after looking at?Ans. Same answer: Create a AccountQ. How attractive did you find the design?Ans. a) Simple b) Simple and clear c) EffectiveQ. What would you expect to happen if you press the “Create my Account” button ? Ans. a) Shall create a account , same reply from all threeQ. How do you like the color scheme for register form?Ans. a) Good B) Very good I like it C) Nice combination of Red and GreenQ. Please rate the test fields in registration form1. Poor, 2. Fair, 3. Good, 4. Very good, 5. ExcellentAns. a) 3 b) 4 c) 4, Fields are consistent is size.Q. What are missing features in static register form then dynamic form?Ans. Live Validation, Hint (Tooltip), Dynamic Date input, Input Mask.Task Completion TimeDynamic Register form vs. Static Register Form a) Takes less time in dynamic then static. It takes 45 seconds at dynamic part. b) Takes less time in dynamic form then static. Completed dynamic in 40 seconds as compare to static around 1 minute. c) Takes nearly same time but still better in dynamic formThere was not much difference of time in using Login form both dynamic and static
  33. 33. 33 11. Conclusion:The general principals from Galitz and design pattern can be applied while developing userinterfaces based on JQuery and backend technologies.In result, JQuery helps to develop user friendly Web interfaces. It provides functionality to userinterfaces and better interaction with user. Its cross browsers compatibility gives chance toevery user to use the web site.Combining design and functionality is not easy task but interesting. Considering both thingsgives super results. Design can only be implemented if functionality helps. I enjoyed workingwith JQuery because it is easy, simple and complete. I explored design patterns for web GUI.Depending on site, these patterns can be approached. Modern GUI can be construct usingJQuery and following these design patterns. It was new experience as before I never tried andlooked deep in front end design and development. I had not covered all pattern of GUI but thiswork gave me idea how I can produce similar GUI related to web. 12. References:Books:“Designing Web Interfaces” By Bill Scott, Theresa Neil“The Essential Guide to User Interface Design: An Introduction to GUI Design Principles andTechniques” by Wilbert O. Galitz“JQuery Novice to Ninja” by Earle Castledine & Craig Sharkie“Web Design Form, Filling in the Blanks” by Luke Wroblewski.Web Usability Guidelines by Jakob Nielson.www.jquery.comhttp://logicpool.com/archives/30
  34. 34. 34http://www.labs.mimmin.com/inlineedit/#demohtt://google.comhttp:// www.flickr.com

×