� 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
� 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
The World Wide Web is a result of the
confluence of three developments
� 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.
� 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
‣ 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
‣ 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
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
What is a Scientific Test Six Ways to
� Knowledge based on superstition or habit
– “Good research can only be done by those in their 20 s”
– “OO design has too many subroutine calls and is too
– 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
� Guesswork: An approach that is not based on reasoning or
– 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
� Accepted because it comes from a respected
– 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
� 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
� 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
� 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,
– We all have biases; science helps us ignore them
• Based on objectively observed evidence
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
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
� 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
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.
Correlation and Causation Examples in Mobile
� Correlations are everywhere. As conspiracy theory
debunkers like to say: “If you look long enough, you’ll
� 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:
� 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
� 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
Does the increase in links directly cause the better search ranking? Or are they
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.
� 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
� 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
� 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
� 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.
� There are a variety of factors that will affect how users scan a webpage.
� The type of task, such as doing research, considering a purchase, browsing for
� 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
Users Scan Web Pages
� 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
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.
� 2. Z-Shape Pattern:
How Users Scan Pages with Minimal Content
How Users Scan Content:
� Top of Z: User scans the upper section horizontally, from left
� 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.
� 3. Layer-Cake Pattern:
For Users that Value Efficiency
� 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
� 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)
� 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
� Complete success: 20
� Success with a minor issue: 35
� Success with a major issue: 30
User Success Rate
� 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
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.
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."
Parece que tem um bloqueador de anúncios ativo. Ao listar o SlideShare no seu bloqueador de anúncios, está a apoiar a nossa comunidade de criadores de conteúdo.
Atualizámos a nossa política de privacidade.
Atualizámos a nossa política de privacidade de modo a estarmos em conformidade com os regulamentos de privacidade em constante mutação a nível mundial e para lhe fornecer uma visão sobre as formas limitadas de utilização dos seus dados.
Pode ler os detalhes abaixo. Ao aceitar, está a concordar com a política de privacidade atualizada.