SlideShare a Scribd company logo
Structure in Basic Web Design
Structure in Basic
   Web Design
Structure in Basic Web Design
Structure
Structure

“The subjects were asked to categorize the information items in such a way that they could be related hierarchically.
The subjects received cards with a one-line description of each item. Their task was to organize the items into
categories or groups of items that, according to them, were related and therefore should be found in the same place
in an information system. As we were interested in finding a hierarchical structure, we asked them to group the
categories into higher order categories until they reached a unique superior level. The items to be classified could be
situated in any of the levels. An item like telephone number of the department directory for example, could be in the
same branch but on a lower level to that of the list of staff of the university. Lastly, they were allowed to include the
same item in two different categories which would show the existence of a direct connection between this item and
another category which in turn symbolizes a direct connection that breaks the hierarchical structure.”
Structure

“The subjects were asked to categorize the information items in such a way that they could be related hierarchically.
The subjects received cards with a one-line description of each item. Their task was to organize the items into
categories or groups of items that, according to them, were related and therefore should be found in the same place
in an information system. As we were interested in finding a hierarchical structure, we asked them to group the
categories into higher order categories until they reached a unique superior level. The items to be classified could be
situated in any of the levels. An item like telephone number of the department directory for example, could be in the
same branch but on a lower level to that of the list of staff of the university. Lastly, they were allowed to include the
same item in two different categories which would show the existence of a direct connection between this item and
another category which in turn symbolizes a direct connection that breaks the hierarchical structure.”

BEHAVIOUR & INFORMATION TECHNOLOGY, 1999, VOL. 18, NO. 4, 248
gory which in turn symbolizes a direct connection       5) The distance between two items situated in
 breaks the hierarchical structure.                        diŒerent places of the hierarchy but still directly



               Structure
he aim of the study was explained to the subjects and      connected would be one. For example, d(c,e) = 1
  were allowed to examine all the items before             These links are not necessarily symmetric so you
nning the classi®cation. They were also allowed to         might be able to traverse easily from one point to
 ge their minds as they worked and only ®nished            the another but the return could be di cult. This
n they were happy with the ®nal product. The task          is symbolized in ®gure 1 with a one-way arrow
  approximately one hour for all the subjects.             An example is d(e,c) = 3, so it easier going from c
Student Matrix   Teacher/Staff/IT Matrix
Structure
Structure

“Google has always had the mantra of 'focus on the user and all else will
follow', so the company puts a significant amount of effort into researching its
users. In fact, Au estimates that 30 to 40 per cent of her 200-strong worldwide
user experience team is compromised of user researchers.”
Structure

“Google has always had the mantra of 'focus on the user and all else will
follow', so the company puts a significant amount of effort into researching its
users. In fact, Au estimates that 30 to 40 per cent of her 200-strong worldwide
user experience team is compromised of user researchers.”
By Oliver Lindberg on Techradar.com
Structure

“Google has always had the mantra of 'focus on the user and all else will
follow', so the company puts a significant amount of effort into researching its
users. In fact, Au estimates that 30 to 40 per cent of her 200-strong worldwide
user experience team is compromised of user researchers.”
By Oliver Lindberg on Techradar.com

http://www.techradar.com/news/internet/google-explains-its-minimalist-design-philosophy-641441
Structure
Garrett:
Structure
   Defines how users got to that page and where they go when
   they are finished
   Defines arrangement of Categories
   Information Architecture: the arrangement of content
   elements within the information space
Structure


Having an intuitive, clear structure aids navigation
   Websites are not linear, like a book, but have “levels” of
   access
http://www.thewebsqueeze.com/web-design-tutorials/a-websites-structure-from-a-to-z.html
Structure
Purpose of Website
   information repository
   links database
   Information
   Education
   Interactive
Structure
Target for Website
Access to content
    The rule of Two - 2 pages; two screens; 2 clicks; 2 ways - is the
    important info available on the home page in less than two screens
    are important documents or pages less than two clicks from the
    homepage
    are there multiple access points to the info on the site or through
    links

More Related Content

PPT
Structure in Basic Web Design
PDF
Cluster Based Web Search Using Support Vector Machine
PDF
Interpreting sslar
PDF
International Journal of Engineering Inventions (IJEI),
PDF
Mining and Analyzing Academic Social Networks
DOC
Introduction abstract
PDF
ICICCE0280
DOCX
NE7012- SOCIAL NETWORK ANALYSIS
Structure in Basic Web Design
Cluster Based Web Search Using Support Vector Machine
Interpreting sslar
International Journal of Engineering Inventions (IJEI),
Mining and Analyzing Academic Social Networks
Introduction abstract
ICICCE0280
NE7012- SOCIAL NETWORK ANALYSIS

What's hot (18)

PDF
Recent research in web page classification – a review
PDF
Recent research in web page classification – a review
PDF
Organizational Overlap on Social Networks and its Applications
PDF
An Efficient Modified Common Neighbor Approach for Link Prediction in Social ...
PDF
In tech application-of_data_mining_technology_on_e_learning_material_recommen...
PPTX
(Icmia 2013) personalized community detection using collaborative similarity ...
DOC
View the Microsoft Word document.doc
PDF
CONTEXTUAL MODEL OF RECOMMENDING RESOURCES ON AN ACADEMIC NETWORKING PORTAL
PDF
Contextual model of recommending resources on an academic networking portal
PDF
APPLICATION OF CLUSTERING TO ANALYZE ACADEMIC SOCIAL NETWORKS
PDF
An improved technique for ranking semantic associationst07
PDF
Tag based image retrieval (tbir) using automatic image annotation
PDF
A Proposal on Social Tagging Systems Using Tensor Reduction and Controlling R...
PPT
LAK13: Visualizing Social Learning Ties by Type and Topic: Rationale and Co...
PDF
Applying Semantic Web Technologies to Services of e-learning System
PDF
Distributed Link Prediction in Large Scale Graphs using Apache Spark
PPTX
PDF
Adaptive Search Based On User Tags in Social Networking
Recent research in web page classification – a review
Recent research in web page classification – a review
Organizational Overlap on Social Networks and its Applications
An Efficient Modified Common Neighbor Approach for Link Prediction in Social ...
In tech application-of_data_mining_technology_on_e_learning_material_recommen...
(Icmia 2013) personalized community detection using collaborative similarity ...
View the Microsoft Word document.doc
CONTEXTUAL MODEL OF RECOMMENDING RESOURCES ON AN ACADEMIC NETWORKING PORTAL
Contextual model of recommending resources on an academic networking portal
APPLICATION OF CLUSTERING TO ANALYZE ACADEMIC SOCIAL NETWORKS
An improved technique for ranking semantic associationst07
Tag based image retrieval (tbir) using automatic image annotation
A Proposal on Social Tagging Systems Using Tensor Reduction and Controlling R...
LAK13: Visualizing Social Learning Ties by Type and Topic: Rationale and Co...
Applying Semantic Web Technologies to Services of e-learning System
Distributed Link Prediction in Large Scale Graphs using Apache Spark
Adaptive Search Based On User Tags in Social Networking
Ad

Viewers also liked (15)

PDF
Hamilton Honda to Serve as Sponsor for Notre Dame High School’s Polar Plunge
ODP
Ser feliz!
PDF
abraleeagillustrated
PPSX
Presentatie Bij Feedback Eco Questionnaire Webpagina Eng 170210
PDF
“Gestión para la mejora de la infraestructura, como medio para evitar el in...
PDF
Gráfico diario del dow jones de juan polaina
PDF
Hamilton Honda Celebrates President’s Award With Employee Luncheon
PDF
Gost 30328 95
PDF
Mathe.forscher Dimensionenfächer
PDF
Profesor Ph.D. Raúl Archibold Suárez/ Investigación : "Incidencia de las emis...
DOCX
Oficio 2
PDF
Normas APA
PPT
Mastite dos bovinos: identificação, controle e prevenção
PDF
Contingencia
PPTX
Eutanásia em veterinária
Hamilton Honda to Serve as Sponsor for Notre Dame High School’s Polar Plunge
Ser feliz!
abraleeagillustrated
Presentatie Bij Feedback Eco Questionnaire Webpagina Eng 170210
“Gestión para la mejora de la infraestructura, como medio para evitar el in...
Gráfico diario del dow jones de juan polaina
Hamilton Honda Celebrates President’s Award With Employee Luncheon
Gost 30328 95
Mathe.forscher Dimensionenfächer
Profesor Ph.D. Raúl Archibold Suárez/ Investigación : "Incidencia de las emis...
Oficio 2
Normas APA
Mastite dos bovinos: identificação, controle e prevenção
Contingencia
Eutanásia em veterinária
Ad

Similar to Structure in Basic Web Design (20)

PPT
Interaction Design
PDF
Cert Overview
PPTX
Information Architecture For Technical Communicators: What Does One Need to ...
PDF
Rdf Based User Interfaces
PPTX
Professional ui for a website design
PPT
Organization Systems
PPTX
Information architecture
PPTX
IT6701-Information Management Unit 4
PPT
Metadata and Taxonomies for More Flexible Information Architecture
PDF
Information architecture unit i
PPT
Information architecture-a-how-to-19917
PPTX
Search Patterns: UX Russia
PPTX
Interface Design
PDF
IA basics
DOCX
Many people can intuitively categorize a website as good or bad,.docx
PDF
Redesigning a Website Using Information Architecture Principals
PDF
Elements Of Web Design
PDF
Barcelona Euro Ia Final No Picture
PDF
Transforming Semantic Web Ideas to Information Architecture
PDF
Web engineering notes unit 2
Interaction Design
Cert Overview
Information Architecture For Technical Communicators: What Does One Need to ...
Rdf Based User Interfaces
Professional ui for a website design
Organization Systems
Information architecture
IT6701-Information Management Unit 4
Metadata and Taxonomies for More Flexible Information Architecture
Information architecture unit i
Information architecture-a-how-to-19917
Search Patterns: UX Russia
Interface Design
IA basics
Many people can intuitively categorize a website as good or bad,.docx
Redesigning a Website Using Information Architecture Principals
Elements Of Web Design
Barcelona Euro Ia Final No Picture
Transforming Semantic Web Ideas to Information Architecture
Web engineering notes unit 2

Recently uploaded (20)

PPTX
Entrepreneur intro, origin, process, method
PPTX
Complete Guide to Microsoft PowerPoint 2019 – Features, Tools, and Tips"
PPTX
areprosthodontics and orthodonticsa text.pptx
PPTX
LITERATURE CASE STUDY DESIGN SEMESTER 5.pptx
PPTX
AC-Unit1.pptx CRYPTOGRAPHIC NNNNFOR ALL
PPTX
CLASS_11_BUSINESS_STUDIES_PPT_CHAPTER_1_Business_Trade_Commerce.pptx
DOCX
actividad 20% informatica microsoft project
PPTX
YV PROFILE PROJECTS PROFILE PRES. DESIGN
PPTX
AD Bungalow Case studies Sem 2.pptxvwewev
PPTX
Fundamental Principles of Visual Graphic Design.pptx
PDF
Interior Structure and Construction A1 NGYANQI
PDF
GREEN BUILDING MATERIALS FOR SUISTAINABLE ARCHITECTURE AND BUILDING STUDY
PDF
BRANDBOOK-Presidential Award Scheme-Kenya-2023
PPT
Machine printing techniques and plangi dyeing
PPTX
Tenders & Contracts Works _ Services Afzal.pptx
PDF
The Advantages of Working With a Design-Build Studio
PDF
Facade & Landscape Lighting Techniques and Trends.pptx.pdf
PDF
Urban Design Final Project-Context
PPTX
12. Community Pharmacy and How to organize it
PPTX
6- Architecture design complete (1).pptx
Entrepreneur intro, origin, process, method
Complete Guide to Microsoft PowerPoint 2019 – Features, Tools, and Tips"
areprosthodontics and orthodonticsa text.pptx
LITERATURE CASE STUDY DESIGN SEMESTER 5.pptx
AC-Unit1.pptx CRYPTOGRAPHIC NNNNFOR ALL
CLASS_11_BUSINESS_STUDIES_PPT_CHAPTER_1_Business_Trade_Commerce.pptx
actividad 20% informatica microsoft project
YV PROFILE PROJECTS PROFILE PRES. DESIGN
AD Bungalow Case studies Sem 2.pptxvwewev
Fundamental Principles of Visual Graphic Design.pptx
Interior Structure and Construction A1 NGYANQI
GREEN BUILDING MATERIALS FOR SUISTAINABLE ARCHITECTURE AND BUILDING STUDY
BRANDBOOK-Presidential Award Scheme-Kenya-2023
Machine printing techniques and plangi dyeing
Tenders & Contracts Works _ Services Afzal.pptx
The Advantages of Working With a Design-Build Studio
Facade & Landscape Lighting Techniques and Trends.pptx.pdf
Urban Design Final Project-Context
12. Community Pharmacy and How to organize it
6- Architecture design complete (1).pptx

Structure in Basic Web Design

  • 2. Structure in Basic Web Design
  • 5. Structure “The subjects were asked to categorize the information items in such a way that they could be related hierarchically. The subjects received cards with a one-line description of each item. Their task was to organize the items into categories or groups of items that, according to them, were related and therefore should be found in the same place in an information system. As we were interested in finding a hierarchical structure, we asked them to group the categories into higher order categories until they reached a unique superior level. The items to be classified could be situated in any of the levels. An item like telephone number of the department directory for example, could be in the same branch but on a lower level to that of the list of staff of the university. Lastly, they were allowed to include the same item in two different categories which would show the existence of a direct connection between this item and another category which in turn symbolizes a direct connection that breaks the hierarchical structure.”
  • 6. Structure “The subjects were asked to categorize the information items in such a way that they could be related hierarchically. The subjects received cards with a one-line description of each item. Their task was to organize the items into categories or groups of items that, according to them, were related and therefore should be found in the same place in an information system. As we were interested in finding a hierarchical structure, we asked them to group the categories into higher order categories until they reached a unique superior level. The items to be classified could be situated in any of the levels. An item like telephone number of the department directory for example, could be in the same branch but on a lower level to that of the list of staff of the university. Lastly, they were allowed to include the same item in two different categories which would show the existence of a direct connection between this item and another category which in turn symbolizes a direct connection that breaks the hierarchical structure.” BEHAVIOUR & INFORMATION TECHNOLOGY, 1999, VOL. 18, NO. 4, 248
  • 7. gory which in turn symbolizes a direct connection 5) The distance between two items situated in breaks the hierarchical structure. diŒerent places of the hierarchy but still directly Structure he aim of the study was explained to the subjects and connected would be one. For example, d(c,e) = 1 were allowed to examine all the items before These links are not necessarily symmetric so you nning the classi®cation. They were also allowed to might be able to traverse easily from one point to ge their minds as they worked and only ®nished the another but the return could be di cult. This n they were happy with the ®nal product. The task is symbolized in ®gure 1 with a one-way arrow approximately one hour for all the subjects. An example is d(e,c) = 3, so it easier going from c
  • 8. Student Matrix Teacher/Staff/IT Matrix
  • 10. Structure “Google has always had the mantra of 'focus on the user and all else will follow', so the company puts a significant amount of effort into researching its users. In fact, Au estimates that 30 to 40 per cent of her 200-strong worldwide user experience team is compromised of user researchers.”
  • 11. Structure “Google has always had the mantra of 'focus on the user and all else will follow', so the company puts a significant amount of effort into researching its users. In fact, Au estimates that 30 to 40 per cent of her 200-strong worldwide user experience team is compromised of user researchers.” By Oliver Lindberg on Techradar.com
  • 12. Structure “Google has always had the mantra of 'focus on the user and all else will follow', so the company puts a significant amount of effort into researching its users. In fact, Au estimates that 30 to 40 per cent of her 200-strong worldwide user experience team is compromised of user researchers.” By Oliver Lindberg on Techradar.com http://www.techradar.com/news/internet/google-explains-its-minimalist-design-philosophy-641441
  • 13. Structure Garrett: Structure Defines how users got to that page and where they go when they are finished Defines arrangement of Categories Information Architecture: the arrangement of content elements within the information space
  • 14. Structure Having an intuitive, clear structure aids navigation Websites are not linear, like a book, but have “levels” of access
  • 16. Structure Purpose of Website information repository links database Information Education Interactive
  • 17. Structure Target for Website Access to content The rule of Two - 2 pages; two screens; 2 clicks; 2 ways - is the important info available on the home page in less than two screens are important documents or pages less than two clicks from the homepage are there multiple access points to the info on the site or through links