O slideshow foi denunciado.
Seu SlideShare está sendo baixado. ×


Próximos SlideShares
Carregando em…3

Confira estes a seguir

1 de 41 Anúncio

Mais Conteúdo rRelacionado

Mais recentes (20)



  1. 1. Usability Design of Software Applications
  2. 2. � Hypertext - Formation of the WWW- Hypertext Engineering Design Images & Navigation- Web-site Design Tips, Knowledge Acquisition-What is a Scientific Test Six Ways to Acquire Knowledge- Correlation and Causality-Confusing Correlation and Causality, UI Evaluations-Website Design Scanning and Choosing-Users Scan Web Pages-URL Design, User Success Rate , Web Site Home Pages UNIT 2
  3. 3. Hypertext
  4. 4. Contd..
  5. 5. � Tim Berners-Lee, a British scientist, invented the World Wide Web (WWW) in 1989, while working at CERN. � The web was originally conceived and developed to meet the demand for automated information-sharing between scientists in universities and institutes around the world. What is WWW and its features? � The World Wide Web (WWW) is an Internet-based global information system. The web is a system of interlinked hypertext documents contained on the internet. � With a web browser, one can view web pages that may contain text, images, videos, and other multimedia and navigate between them by using hyperlinks Formation of the WWW
  6. 6. The World Wide Web is a result of the confluence of three developments Contd.. WORLD WIDE WEB
  7. 7. Contd.. � Components of the Web: There are 3 components of the web: � Uniform Resource Locator (URL): serves as a system for resources on the web. � HyperText Transfer Protocol (HTTP): specifies communication of browser and server. � Hyper Text Markup Language (HTML): defines the structure, organization and content of a web page.
  8. 8. � Use images for navigation, buttons, & page titles -Always use ALT tag (508 compliance) -Use small images (fewer bytes) ‣ Animation is usually annoying -The web page is shouting at you and distracting you ‣ Navigating within pages -Avoid horizontal scrolling -Use intra-page links to keep users’ hands on the mouse -Put essential content on top Hypertext Engineering Design Images & Navigation
  9. 9. ‣ Make search easy to find (speed) ‣ Keep content current (learn, errors) - Make archives of previously published content available ‣ Minimize the need to scroll (speed, learn) ‣ Structure content into hierarchies, but don’t make it too complex (learn) ‣ Key functions such as shopping carts and help buttons should be easy to find (speed) ‣ Avoid pop-ups that open new windows (errors) Web-site Design Tips, Knowledge Acquisition
  10. 10. Knowledge acquisition is the process of extracting, structuring and organizing knowledge from one source, usually human experts, so it can be used in software such as an ES. 1. Make your design reflect your business 2. Create a simple homepage 3. Create a functional navigation 4. Responsive design 5. Make your site easy to skim 6. Include visual elements 7. Incorporate social media buttons 8. Include calls to action (CTA) 9. Test your pages Knowledge Acquisition Contd..
  11. 11. � Tenacity � Intuition � Authority � Rationalism � Empiricism � Science What is a Scientific Test Six Ways to Acquire Knowledge
  12. 12. � Knowledge based on superstition or habit • Examples: – “Good research can only be done by those in their 20 s” – “OO design has too many subroutine calls and is too inefficient” – Java is too inefficient for real use • Exposure: The more we see something, the more we like it • Tenacity has – No guarantee of accuracy – No mechanism for error correction • Knowledge from tenacity is prejudism Tenacity
  13. 13. � Guesswork: An approach that is not based on reasoning or inference • Examples: – I think he is a nice person – It’s probably going to rain today • We do not really understand why we believe it • No way to separate accurate from inaccurate knowledge • Can be used to form hypotheses • Can be very misleading Intuition
  14. 14. � Accepted because it comes from a respected source • Examples: – Religion – Totalitarian government – Rules our parents taught us • No way to validate or question the knowledge • Not the same as asking an expert – we can accept, reject, or challenge an expert – Teachers are experts, not authorities Authority
  15. 15. � Acquisition of knowledge through reasoning • Logical deduction • Assume knowledge is correct if the correct reasoning process is used • Middle ages relied almost exclusively on rationalism • Important for theory and pure math – A mathematical proof is rationalism at its best – Theoretical physics … experimental physics • Easy to reach incorrect conclusions – False premises – Mistakes in the reasoning or steps skipped • Use rationalism to arrive at a hypothesis, then test with the scientific method Rationalism
  16. 16. � Acquiring knowledge through experience • “I have experienced it, therefore it is true” • Experience is subjective and hard to control • “I wrote 3 programs without designing and they worked – designs are worthless! – Who wrote them? – What programs? – Was the design present but just unwritten? • Much of computer “science” is just empiricism Empiricism
  17. 17. � Testing ideas empirically according to a specific testing procedure that is open to public inspection • Based on reality – Scientists have to look at the fire, not the shadows • Separate personal beliefs, perceptions, biases, attitudes, emotions – We all have biases; science helps us ignore them • Based on objectively observed evidence Science
  18. 18. What is Correlation? � Correlation is a term in statistics that refers to the degree of association between two random variables. � So the correlation between two data sets is the amount to which they resemble one another. � If A and B tend to be observed at the same time, you’re pointing out a correlation between A and B. � You’re not implying A causes B or vice versa. You’re simply saying when A is observed, B is observed. They move together or show up at the same time. Correlation and Causality
  19. 19. There are three types of correlations that we can identify: � Positive correlation is when you observe A increasing and B increases as well. Or if A decreases, B correspondingly decreases. Example: the more purchases made in your app, the more time is spent using your app. � Negative correlation is when an increase in A leads to a decrease in B or vice versa. � No correlation is when two variables are completely unrelated and a change in A leads to no changes in B, or vice versa. � Just remember: correlation doesn’t imply causation. It can sometimes be a coincidence. And if you don’t believe me, there is a humorous website full of such coincidences called Spurious Correlations.1 Contd..
  20. 20. � Here’s an example: Contd..
  21. 21. What is Causation? � Causation is implying that A and B have a cause-and-effect relationship with one another. You’re saying A causes B. Causation is also known as causality � Firstly, causation means that two events appear at the same time or one after the other. � And secondly, it means these two variables not only appear together, the existence of one causes the other to manifest. Contd..
  22. 22. Contd..
  23. 23. Correlation and Causation Examples in Mobile Marketing � Correlations are everywhere. As conspiracy theory debunkers like to say: “If you look long enough, you’ll see patterns.” � In the same way, if you look long enough, you may begin to see cause-and-effect relationships in your mobile marketing data where there is only correlation. We try to find a reason why A and B occur at the same time. � See if you can spot which is which in these correlation and causation examples below: Contd..
  24. 24. � New web design implemented >> Web page traffic increased Was the traffic increase because of the new design (causality)? Or was traffic simply up organically at the time when the new design was released (correlation)? � Uploaded new app store images >> Downloads increased by 2X Did downloads increase because of the new images in your app stores? Or did they just happen to occur at the same time? � Push notification sent every Friday >> Uninstalls increase every Friday Are people uninstalling your app because of your weekly push notifications? Or is some other factor at play? � Increase in links to your website >> Higher ranking in search engine results Does the increase in links directly cause the better search ranking? Or are they merely correlated? Contd..
  25. 25. confusion of correlation with causation � The phrase "correlation does not imply causation" refers to the inability to legitimately deduce a cause-and-effect relationship between two events or variables solely on the basis of an observed association or correlation between them. UI evaluation � The goal of user interface evaluations is to make products and services more usable, easy to learn and intuitive for the user. Learners create an evaluation strategy and validate user interfaces using evaluation techniques and usability testing. Confusing Correlation and Causality, UI Evaluations
  26. 26. � How do I make my website scan able? Here are some tips to make your website more scan able: � Follow conventions. Unless you are sure of your drastically different idea, stick to conventions, at least for the most part. ... � Use visual hierarchy. ... � Pay attention to your typography. ... � Limit the number of choices. ... � Cut out the fluff. Website Design Scanning and Choosing
  27. 27. � How do users scan a website? � Specifically: Users first read in a horizontal movement, usually across the upper part of the content area. This initial element forms the F's top bar. Next, users move down the page a bit and then read across in a second horizontal movement that typically covers a shorter area than the previous movement. Contd..
  28. 28. � What is scannable website? � So, scannability is the way to present the content and navigation elements like the layout that can be scanned easily. Interacting with a website, especially the first time, users quickly look through the content to analyze whether it's what they need. � Contd..
  29. 29. � There are a variety of factors that will affect how users scan a webpage. These include: � The type of task, such as doing research, considering a purchase, browsing for new information � The page layout � The reader’s level of interest, motivation, and focus � The type of page content, such as primarily text, images, or product listings � Personal characteristics, such as a tendency to scan even when motivated versus generally taking a detailed approach to reading digital content. � When you understand scanning patterns, you can create digital content that balances how to increase user comprehension, provide a great user experience, and increase the time users spend on your webpages (also know as website stickiness). Users Scan Web Pages
  30. 30. � The following sections describe common scanning problems–and how we can leverage them to increase conversion, lower bounce rates, and more. � 1. F-Shape Pattern: The Most Common Way Users Scan Content Contd..
  31. 31. How Users Scan Content: � Top bar of the F: The user reads horizontally across the upper part of the web copy. � Lower bar of the F: The user then moves down the page a bit and again move across the page to the right, but for a shorter distance than the upper bar. � Vertical Bar: The user vertically scans the left side of the page’s web copy. Contd..
  32. 32. � 2. Z-Shape Pattern: How Users Scan Pages with Minimal Content Contd..
  33. 33. How Users Scan Content: � Top of Z: User scans the upper section horizontally, from left to right � Diagonal: Next, the user moves on the diagonal line, down and to the left. � Bottom of Z: Finally, the bottom area is again viewed from left to right. Contd..
  34. 34. � 3. Layer-Cake Pattern: For Users that Value Efficiency Contd..
  35. 35. � How Users Scan Content: � Top section: Think about someone who loves frosting on a cake. The title and top section is the premium frosting area; it gets the most attention. � Subheads: Next, users focus on subheads—the lower layers of icing. Visitors scan the subheads top to bottom, only stopping to read paragraphs if a particular subhead tickles their fancy. Contd..
  36. 36. � URLs always need to be clear, unambiguous, easy to read, easy to type and easy to share. all URLs must be in lower case. URLs must use words and should not contain acronyms, wherever possible (see 8 for an exception where acronyms are used for an organization redirect) URL Design
  37. 37. � To report levels of success, you simply report the percentage of users who were at a given level. So, for example, if out of 100 users, 35 completed the task with a minor issue, you would say that 35% of your users were able to complete the task with a minor issue. � Complete success: 20 � Success with a minor issue: 35 � Success with a major issue: 30 User Success Rate
  38. 38. � Good success rate? 78% is an average completion rate So this is one threshold of good and bad–with anything above a 78% being above average. If you're scratching your head looking for a benchmark for a task, using 78% would be a good place to start Contd..
  39. 39. Contd..
  40. 40. Web Site Home Pages � A home page (or homepage) is the main web page of a website. The term may also refer to the start page shown in a web browser when the application first opens.
  41. 41. What is a Webpage? � A web page is a single hypertext document available on World Wide Web (WWW). It is composed of HTML elements and displayed on the user's browser such as Mozilla, Firefox, Chrome, etc. It is also referred to as "Page." Contd..