KAMİS
Page Structure
Clear Error Messages
Principle
Error messages should be designed to be clear and understandable.
Description
No user wants to make errors. Users act based on their mental model, which is a representation of their goals, when using a site. If their mental model doesn't align with the system model, or if data input errors occur due to physical or informational reasons, they might encounter unexpected results, which are conveyed to them through error messages. In the design of error messages, it's crucial to analyze why the user made an error. The content of error messages is of utmost importance for users to correct their mistakes and avoid making the same mistake again. Poorly planned error messages can seriously erode a user's trust in the computer system and the website. Many users tend to think that errors are the system's fault and are thus reluctant to blame themselves, making well-designed error messages essential for recovery.
Guidelines
- The content of error messages should be presented in a clear and understandable language, explaining why the error occurred and how to fix it.
- When giving error messages, the use of error codes and technical expressions that the user may not understand or may be confused should be avoided.
- Error messages should be in the same language as the website's content.
- If possible, the data the user entered that caused the error should be displayed in the error message. This allows the user to see their mistake.
- The task the user was attempting to perform when the error occurred should be explained. Many errors result from the user selecting the wrong task. Error messages should define the target task (e.g., "The inventory record for 'kamis' for the year 2011 cannot be found").
- Error messages should be issued promptly when an error is detected and presented to the user as early as possible. Avoid informing the user that an option isn't valid after one or several steps. Errors should be detected and communicated as early as possible, ideally with an opportunity for correction.
- Messages like "Sorry, please try again later" should be avoided unless they are genuinely necessary.
- In data query systems, not finding a record in some cases should not be interpreted as an error, and the interface should not use negative language and icons.
- Error messages and warning messages should not be confused; they should be separate and consistently designed, both in terms of syntactic and semantic aspects, as well as visually.
References
- ISO 9241-151 / 10.3.2 – Providing clear error messages
Useful Resources
- –
Significance Level
★★★★★ 5/5
Example
In the example site, the error message is presented in a clear and understandable manner.
White Space Usage
Principle
To facilitate readability, appropriate white space with the right width and height should be used between content elements.
Description
White space in content helps users read the content more comfortably and access the information they need more easily.
Guidelines
- Care should be taken to use white space between sections of the page.
- Consistent white space should be added between visual and text content.
- Line spacing and spacing between paragraphs in text content should be designed to be easy on the eyes.
- Symmetry, balanced use of white space, and alignment of components should be emphasized, especially in avoiding neglect.
References
- ISO 9241-151 / 9.3.17 – Use of “white space”
Useful Resources
- –
Significance Level
★★★★★ 5/5
Example
In the example site, the content elements are densely packed together, and different types of content are not visually distinguished.
Frame Usage
Principle
The use of the frame () element in website code should be avoided.
Description
When the frame () element is used on websites, there can be issues with browser navigation, such as forward and backward buttons or page scrolling, since browsers do not support it. In cases where frame usage is necessary, meaningful and clear names should be given to each frame, and the purpose of using frames and any relationships between them should be explicitly stated in the HTML code. In addition, pages with text that explain situations where users cannot view frames should be prepared. In recent years, with the widespread use of responsive design and CSS technology, the use of frame elements has decreased. However, it is important to particularly avoid approaches that could create similar issues.
Guidelines
- When coding the website, the current languages supported by the browsers should be preferred.
- Care should be taken not to use the frame () tag of the HTML language, which can cause problems in different browsers.
- Similarly, the IFRAME element should also be considered as an element that should not be used unless necessary.
References
- ISO 9241-151 / 9.3.10 – Using frames with care
- ISO 9241-151 / 99.3.11 – Providing alternatives to frame-based presentation
- ISO 9241-151 / 9.3.12 – Providing alternative text-only pages
Useful Resources
- –
Significance Level
★★★★★ 3/5
Example
In the example site, a map service is embedded within the page using frame elements. While such usage provides convenience for websites, frame structures used to segment pages should be avoided unless absolutely necessary.
Vertical Scrolling
Principle
In long pages designed to convey comprehensive content and provide detailed information to users, a vertical scrolling bar should be used. In cases where content can be divided into smaller sections, a pagination structure should be preferred.
Description
Vertical scrolling is a widely adopted technique in browsers and mobile applications, particularly convenient for finger-based interactions, allowing users to quickly and easily digest information across multiple screens. For long and content-rich pages that need to deliver detailed information, continuously redirecting users to different pages or forcing them to navigate internal links can be distracting and hinder the comprehension of the intended message. Therefore, it is appropriate to use a vertical scrolling bar on long pages. If content is conceptually distinct, transitioning to separate pages is considered more suitable.
Guidelines
- A vertical scrolling bar should be used when long page usage is mandatory.
- Even when a vertical scrolling bar is in use, links for in-page navigation should be provided.
- The use of components that suggest the end of the page content should be avoided. If the components that users expect at the bottom of the page are placed at the bottom of the visible part of the first screen part, users think that there is no content lower down.
- Unless there are special circumstances or the presentation of a final text document, scrolling more than the height of 5-6 screens is not recommended.
References
- ISO 9241-151 / 8.4.14 – Subdividing long pages
- ISO 9241-151 / 9.3.7 – Minimize vertical scrolling
Useful Resources
- –
Significance Level
★★★★★ 4/5
Example
In the example website, a list of links to content is provided on the left side, making it easier for users to access their desired content by clicking on the relevant title. In addition, a vertical scrolling bar and a "Back to Top" button are used to facilitate navigation as necessary.
Visual Design Principles
Principle
Basic visual design principles should be applied in the design of websites.
Description
Basic visual design principles are a set of rules that have been established through extended experimental work, the maturation of tried-and-tested designs, and psychological studies explaining how the human visual perception system functions.
For instance, the principle of proximity suggests that related menus, links, icons, and images should be placed close to each other to facilitate their semantic comprehension.
On the other hand, the principle of similarity implies that elements resembling each other in terms of color, shape, size, and position are considered related. Hence, the use of similar symbols to represent similar functions creates a more reinforcing effect. For example, << >> symbols, when placed side by side, evoke a forward and backward navigation structure perception. When different symbols that don't create a similarity perception are used instead, the same effect cannot be achieved.
Visual design principles are multi-dimensional, and it's crucial for designers to read significant books and documents on this topic. Learning principles like visual balance, the use of white space, color weights, complementary colors, warm-cold colors, geometric balances, Gutenberg diagram, the golden ratio, among others, can significantly contribute to the success of a website.
Guidelines
- In a website, elements used on the same or different pages should complement each other and maintain consistency like parts of a whole.
- Related menus, links, icons, and images should be grouped closely to each other.
- Elements that resemble each other in terms of color, shape, size, and position (buttons, menus, links, etc.) should be styled similarly.
- Important and attention-seeking elements should be designed to be more prominent (in terms of size, color, position, shape, etc.) compared to others, while adhering to the principle of consistency.
References
- ISO 9241-151 / 7.1.3 – Appropriateness of content for the target group and tasks
- ISO 9241-151 / 9.2 – Observing principles of human perception
Useful Resources
Significance Level
★★★★★ 5/5
Example
In the example website, the relationship between the form field and the "APPLY" button is clearly indicated.
Content Suitable for Target Audience
Principle
The content used on the website should be meaningful, easily accessible, and usable for the site's target audience.
Description
The content shared on the website should align with the users' purpose for visiting the site, and users should be able to easily access the information they are looking for. When accessing information, the mental effort should be minimal, quick access should be provided, and users should feel a high level of control.
Guidelines
- When creating content, foreign words, technical terms, and abbreviations should be provided with explanations.
- A clear and comprehensible language should be preferred, taking into account the target audience's age, gender, education level, socio-economic level, etc.
- Headings and images within the site should be consistent with the site's content, allowing users to directly access the information they seek. Keep sentence length short and avoid overly long or convoluted sentences.
- Consistent language and tone should be used in the content, giving the impression that it all comes from the same source.
References
- ISO 9241-151 / 6.6 – Recognizing the purpose of a Web application
Useful Resources
Significance Level
★★★★★ 4/5
Example
In the example website, abbreviations and technical terms have been used, but their meanings are not provided within the page.
Content Organization
Principle
Content on a website should be organized with consideration for the conceptual relationships and structure.
Description
Making it easy for users to access the information they are looking for and perform their desired tasks is crucial. Therefore, when creating content for a website, it's expected that content is logically divided, placed in order of importance, and structured hierarchically. If a correct conceptual map is formed in the user's mind, they can easily reach their desired goals.
Guidelines
- Before starting the website design, create a site map that contains all menus and content, showing the logical relationships and order of importance.
- When organizing content, you can use affinity (proximity) diagrams, UML (Unified Modeling Language) diagrams, or concept maps.
- Before the site is built, you can group menus and content by conducting a card sorting exercise with a sample user base.
References
- ISO 9241-151 / 7.1.2 – Designing the conceptual model
Useful Resources
Significance Level
★★★★★ 4/5
Example
The example image provides a content planning diagram for a website. Menus are arranged in order of importance under the homepage, and content related to each menu is placed underneath.
Tooltip Text
Principle
Tooltip text should be used on web pages for elements that users might find difficult to understand.
Description
In website interfaces, there are elements that users may not be familiar with. Tooltip text can be used to make these elements more understandable to users. Tooltip text appears when the mouse pointer hovers over an element, providing explanatory and helpful information related to that element.
Guidelines
- Tooltip text should not be used for links with clear and understandable link text.
- Using tooltip text to support link text when necessary can enhance clarity.
- It should be taken into account that tooltip text cannot be displayed in browsers used on touchscreen devices. However, this situation may be eliminated with the widespread use of 3D touch technology.
- For interface elements without textual labels, tooltip text should be used.
- Tooltip text should be used for design elements that are not used very often by users and are specific to certain websites.
- Instead of using tooltip text, it should be preferred to make the design element understandable. If a design element requires the use of tooltip text, as a general rule, it can be said that this element is poorly designed.
- If users need to interact with the content in the hint text, this content should not be presented as a tooltip text.
- Tooltip texts should be presented in an easily discoverable design. Unless there are visual clues, users may find it difficult to understand which elements contain clue text.
- Tooltip texts should contain short and descriptive/helpful information and should not be a repetition of the information already on the screen.
- It should have static / fixed content, its content should not change continuously.
- Its layout and design should be appropriate and understandable; it should not be reminiscent of different and interactable design elements.
- The purpose of the links or what kind of content they provide access to can be presented to the user with tooltip texts.
- The tooltip text should not contain all the basic information necessary for the realisation of the basic navigation process, but only as auxiliary information. The user should not be obliged to read the tooltip text.
References
- ISO 9241-151 / 9.4.5 – Self-explanatory link cues
- ISO 9241-151 / 9.4.9 – Marking links to special targets
Useful Resources
Significance Level
★★★★★ 4/5
Example
In the example website, when you hover over logos created with institution logos, there is no tooltip text to explain the target content. This can cause confusion for users who are not familiar with the institution logos.
Transactional Pages
Principle
In pages where transactions are performed, the screen should be organized into purpose-specific grouped sections.
Description
Users visit websites not only to obtain information but also to utilize certain services. Pages where services are received may have a variable structure, unlike other pages. For example, in pages where queries are made by entering certain criteria, the obtained results change as the input criteria change. Users may perform different actions on the same page by entering different criteria. Users who want to perform a new action should be able to achieve the relevant result on the same page by simply changing the criteria, without using the back and forward functions. Conducting transactions on the same page keeps users connected to the website.
Guidelines
- Grouping and sectioning should be applied on pages where data entry, querying, and other operations take place.
- Areas where users input data should be visually separated from areas displaying the results of the operation.
- Users should be able to navigate between operations without requiring browser features.
- Error, warning, and informational messages should be clearly distinguishable from the content.
- Vertical alignment should be used, and the number of groups formed by vertically aligned components should be minimized.
References
- ISO 9241-151 / 7.1.6 – Level of granularity
Useful Resources
- –
Significance Level
★★★★★ 4/5
Example
In the example website, the criteria for queries are located at the top of the page, and the results corresponding to the entered values are displayed at the bottom.
Welcome Screens
Principle
The use of pop-up windows on the initial entry to a website without the user's consent should be avoided.
Description
Automatically opening windows without user consent can be annoying and distracts users, causing their attention to wander. Users often perceive such windows as advertisements and close them without inspecting the content. Consequently, the intended message may not reach users. Furthermore, such approaches can negatively impact the perception of site quality.
Guidelines
- The use of pop-up windows (pop-ups) should be avoided at the first entrance to the site.
- If pop-up windows are necessary, provide users with an option to close these windows.
- Important announcements that are expected to be shown to users once should be displayed upon initial entry to the site. Measures should be taken to prevent them from opening again during subsequent visits, such as using cookies. It should be noted that not all users enter the site from the homepage, and there is significant direct access to subpages from search engines. Thus, important announcements and similar content placed only on the homepage may not reach all users.
References
- ISO 9241-151 / 8.3.10.1 – Avoiding unnecessary splash screens
- ISO 9241-151 / 8.3.10.2 – Skipping splash screens
Useful Resources
- –
Significance Level
★★★★★ 4/5
Example
In the example site, when users enter, a window automatically opens on the page without user control.
Opening Windows Without User Control
Principle
The use of unnecessary and involuntary windows that open when a link is clicked on a website should be avoided.
Description
Opening new windows or tabs on a website can distract users and cause confusion. In particular, when the newly opened window appears above the current page, it can make it difficult for users to return to the original page, negatively affecting the usability and accessibility of the website.
Guidelines
- Users should be informed when a link opens a new window or tab.
- These pop-up windows, which open without user request, should only be used in cases where it's not intended for users to leave the current page or in help pages.
- In cases where it's necessary for content to open in a new window, users should be provided with this information in an understandable manner.
- When a new window is opened, users should not be prevented from adjusting its size.
References
- ISO 9241-151 / 8.3.11 – Avoiding opening unnecessary windows
Useful Resources
- –
Significance Level
★★★★★ 3/5
Example
In the example site, when clicking on a menu on the homepage, the opened page appears in a new tab without informing the user, reducing the site's usability.
List Structure
Principle
Lists should be formatted in a way that is easy to use and understand.
Description
Lists on websites should be usable effectively by users.
Guidelines
- Text properties, background colors, and formatting of list items should be consistent.
- Lists should group elements according to their relevance. Meaningful headings should be provided for groups based on their content, and each list item should only appear under the relevant heading.
- If more than 7 components are present in a list, they should be logically separated through grouping or dividers.
- Lists should be ordered chronologically or by importance, with important or earlier items placed at the top. If there is no specific order data, alphabetical sorting should be preferred.
References
- –
Useful Resources
- –
Significance Level
★★★★★ 3/5
Example
In the example site, the main list and sublists are designed consistently, and the selected list items in the main and sublists are formatted similarly.
Color Usage
Principle
Simple, consistent, and harmonious colors should be preferred in website design.
Description
When selecting colors for a website, consider the meanings of color codes, how colors are visually perceived, and the intended message. Additionally, adherence to established color usage standards (ISO 9241-303) is expected in website design.
Guidelines
- Colors used throughout the website should be consistent and harmonious with each other.
- Care should be taken to ensure that the colours used do not adversely affect the readability and meaning of the content presented.
- The use of more than 3-4 different colours within and between pages should be avoided.
- When determining the primary colors, consider colors that are related to the organization's logo, its field of activity, and characteristics.
- Attention should be paid to colour and background harmony throughout the website.
- The meaning of colours must be taken into account
- Information should not be conveyed solely through color. Users with color vision issues or using monitors with color problems may encounter difficulties.
- Coloured backgrounds with high saturation should not be used, and text should not be displayed based solely on colour contrast, such as blue on red, red on blue, red on blue, red on green or green on red.
- Unless there is a significant reason to do otherwise, pastel colors are suitable over highly saturated colors.
References
- ISO 9241-303 – Requirements for electronic visual displays
- ISO 9241-151 / 9.3.9 – Using color
Useful Resources
- –
Significance Level
★★★★★ 3/5
Example
In the example site, colors are used in a simple and consistent manner.
Simple and Understandable Content
Principle
Websites should be created in a simple and understandable structure to ensure that users can easily comprehend the content. An important component of this is preparing the content in a simple and understandable manner.
Description
Content that users do not need or would not miss if removed will make the website more complex, which adversely affects the usability of the website. Unnecessarily long sentences, repetitions, and complex sentence structures can negatively impact the user's cognitive performance. Clearly conveying the fundamental aspects of concepts should be a priority, with examples provided when necessary. Content presented in colloquial language without organization and editing will not only impair user performance but also decrease user satisfaction.
Guidelines
- None of the elements that the target audience does not need or would not miss if removed should be present on the website.
- Breaking down content into sections and organizing them under headings will improve understandability.
- Unnecessary repetitions and waxing sentences should be avoided.
- Usage of colloquial language such as "Our President" or "Our Manager" should be minimized, and speech structures containing multiple exclamation marks should not be used.
- Elements that would create visual clutter in accordance with the principles of visual design should be removed from the page.
- Care should be taken to use white spaces adequately.
References
- ISO 9241-151 / 7.1.5 – Structuring content appropriately
Useful Resources
Significance Level
★★★★★ 4/5
Example
In the example site, the presence of numerous icons and images scattered around has made the site's appearance cluttered.
Line Length
Principle
Line lengths should be determined based on the purpose of the website.
Description
When developing websites, line lengths should be determined considering the site's performance or user habits. It should not be forgotten that long lines can make reading and tracking on the screen more difficult. Research has shown that the optimal readable line length ranges from 6 to 14 cm at a reading distance of 60 cm. Therefore, using text designed with columns or sharing space with images, menus, or content blocks instead of full-width text makes the text more readable.
Guidelines
- If the goal is to allow users to access more information quickly, line lengths should not exceed 75-100 characters.
- Instead of using long lines, take advantage of bullet points and formatting techniques.
- Since "Serif" fonts are easier to read than "Sans-Serif" fonts, "Serif" fonts (e.g. Times New Roman, Palatino, Cambria etc. with notched edges) should be preferred in the text
- Considering that fonts with large letters will contain less text per unit area and require more eye movement, appropriate font selection should be made.
References
- ISO 9241-151 / 7.1.6 – Level of granularity
Useful Resources
- –
Significance Level
★★★★★ 3/5
Example
In the example site, line lengths have been kept short to enhance the readability of the content.
Page Hierarchy
Principle
Content on web pages should be organized by order of importance.
Description
In the main page and subpages that make up a website, different information or actions may be more important or frequently used compared to others based on the website's purpose and target audience. When developing a website, this should be taken into consideration, and frequently preferred actions and content should be placed in more easily accessible areas on the page.
Guidelines
- On the main page and sub-pages, frequently used or important transactions / information should be visible and easy to access.
- Users generally focus on the left and top parts of the pages. Therefore, frequently used information can preferably be placed in these areas.
- The ordering should be structured based on usage frequency and chronological priority. If there is no relationship, alphabetical order should be used.
- The locations of actions/information should not be changed dynamically too often.
References
- ISO 9241-151 / 6.7 – Prioritizing different design goals
Useful Resources
Significance Level
★★★★★ 4/5
Example
In the example website, frequently used actions have been grouped on the page to provide easy access for users.
Page Contents
Principle
The content on a website should be clear, simple, and in compliance with grammar rules.
Description
The content on websites should be consistent with the website's purpose and should meet the users' needs.
Guidelines
- The content on a web page should be reviewed by different individuals to correct any errors or omissions.
- When preparing content, the organization's mission, vision, and the services it offers should be considered. Content should include links and information that meet user expectations.
- To make the content more understandable, rather than overwhelming users with excessive and unnecessary information, consider providing answers to questions such as who the content is for, what the content is about, when the information was created, including a location if applicable, and why the content was created.
- No content (text, images, etc.) that is unnecessary or unimportant to the organization's target audience should be present on the website.
- Use shorter content compared to printed text and support it with a higher number of sections, paragraphs, and headings compared to printed materials to make it scannable.
References
- ISO 9241-151 / 7.1.4 – Completeness of content
Useful Resources
Significance Level
★★★★★ 3/5
Example
In the example website, content has been organized based on the services offered by the organization, and the content is structured to be simple and understandable.
Content Timeliness
Principle
The content on websites should be kept up to date.
Description
The content on web pages should be regularly reviewed for freshness and accuracy.
Guidelines
- Regular content reviews should be conducted to ensure the freshness and accuracy of the content on the website. A long time passing since the previous update may create the perception that the site is not being maintained and that the content may no longer contain sufficient or up-to-date information.
- Outdated information and content should be updated, and content that is no longer current should be removed.
- Information such as announcements, news, and informational content should include the publication and update dates.
- In sites where it may be challenging to update content due to human or technical limitations, and when the date of the last update is not deemed important for certain content, the inclusion of update date information can be avoided, and time-sensitive content like news may be minimized.
- When making updates, the page address should not be changed, considering that the content may contain links from different sites. In cases where the page address needs to change, appropriate redirection should be implemented.
- In websites expected to have continually updated information (e.g., weather, flight schedules, pharmacy hours), the date of the last update should be clearly displayed.
References
- ISO 9241-151 / 7.2.4 – Keeping content up to date
- ISO 9241-151 / 7.2.5 – Making date and time of last update available
- ISO 9241-151 / 9.3.5 – Visualizing temporal status
Useful Resources
Significance Level
★★★★★ 4/5
Example
In the example website, news and announcements lack date information, making it unclear whether this content is up to date or not.
Page Length
Principle
The length of a page should be determined based on the intended use of the page.
Description
The length of a web page can vary depending on the primary purpose of the page. For instance, homepages or general information pages should be short, while pages requiring detailed information may feature longer content. In cases where long content is necessary, designs that allow users to read without interruption should be implemented. In all cases, breaking down and grouping content will improve readability, comprehensibility, and findability.
Guidelines
- Homepages and general informational pages should be designed to be short to allow users to see more information at once.
- For pages that require long content, vertical scrollbars should be used.
- To ensure that long content is easily readable and usable, in-page segmentation should be applied, and links should be provided between headings.
- Horizontal scrolling should be avoided in content.
- Text should be aligned to the left or justified on both sides but not centered.
- Paragraphs, sections, and subheadings should be used sufficiently to facilitate the easy reading of long content.
References
- ISO 9241-151 / 7.1.6 – Level of granularity
- ISO 9241-151 / 8.4.14 – Subdividing long pages
- ISO 9241-151 / 9.3.6 – Selecting appropriate page lengths
Useful Resources
- –
Significance Level
★★★★★ 3/5
Example
In the example website, the content has been divided into sections with headings and features an expandable and collapsible design, allowing users to navigate within the page easily.
Paging Structure
Principle
In cases where content is quite long, the page structure can be presented in smaller pages. When very long page content can be logically divided into small segments, a pagination structure can be preferred.
Description
If page content can be divided into smaller segments and it is generally known that the pages linked are loaded relatively quickly, a pagination structure can be used. Rather than having users navigate through a page with a scrollbar, they can be directed to a page containing only the information they want to access through provided links. With the advent of faster internet speeds, users' issues with loading long pages have been resolved. Dynamic loading techniques can be used to display the loaded portion and cache the next scroll content. Infinite scrolling is the dynamic content variant of this approach, and specific principles for this technique are outlined in the relevant section.
Guidelines
- If it is possible to divide long content into smaller segments, a pagination structure should be preferred.
- On long pages that require scrolling, code snippets and table structures that prevent the first loaded part from being displayed should not be used.
- When using a pagination structure, ensure that the linked pages load quickly.
- In cases where the page cannot load entirely, provide clear indications that the page hasn't loaded completely instead of making users think it's the end of the page.
References
- ISO 9241-151 / 8.4.14 – Subdividing long pages
- ISO 9241-151 / 9.3.7 – Minimize vertical scrolling
Useful Resources
- –
Significance Level
★★★★★ 4/5
Example
In the example website, the use of pagination instead of a scrollbar makes it easier for users to access the news they want by clicking on the number associated with the respective news article.
Infinite Scrolling
Principle
In corporate websites where accessing information is a priority, infinite scrolling should be avoided.
Description
Infinite scrolling on websites is a scrolling technique where content continues to load as the user scrolls downward. It is commonly used on social media platforms, e-commerce websites, and mobile sites. While infinite scrolling makes it easy to present large amounts of information, it can make it more challenging for users to find the specific information they are looking for, compared to a pagination structure.
Guidelines
- Infinite scrolling should not be used on pages that users visit to obtain information or perform specific tasks.
- Infinite scrolling can be used in the mobile versions of websites.
References
- –
Useful Resources
- –
Significance Level
★★★★★ 3/5
Example
In the example site image, as the user scrolls down using the scrollbar, new content is loaded.
Row and Column Headings in Tables
Principle
If tables are used within a page, attention should be given to clear, concise, and content-appropriate row and column headings.
Description
Users should be able to read the table accurately and understand what content corresponds to which cell. Furthermore, separating rows and using different colors are recommended for ease of reading.
Guidelines
- Row and column headings in tables should be clear to facilitate understanding of the table.
- Designs that make it easier to read and understand the table should be preferred.
- Saturated colours should not be used for table background colours.
- If sorting is available, ensure that users can perceive which data the table is sorted by.
- In the leftmost columns of the table, try to avoid redundant information. While horizontal scrolling is not recommended, in cases where it's necessary, placing critical information in the left columns will reduce the need for users to scroll left and right constantly.
- For large tables, they can be divided into separate pages. However, it should be remembered that web browsers can display multiple pages through vertical scrolling, and the table can be examined through scrolling. This scrolling should be carried out based on the scrollbar at the side of the page, not an additional scroll bar inside the table component.
- In long tables with vertical scrolling, keeping column names fixed while in use, and keeping row names fixed when using horizontal scrolling will facilitate tracking the information in the table.
References
- –
Useful Resources
- –
Significance Level
★★★★★ 4/5
Example
In the example website, the column headings in the table are clearly and understandably presented, making it easier for users to understand the table.
Row and Column Sizes in Tables
Principle
In tables, row and column sizes should be designed to be in proportions that match the content.
Description
Selecting row and column sizes that do not disrupt the page structure in websites using tables will enhance the user experience.
Guidelines
- The use of tables with very dense content should be avoided.
- Care should be taken to ensure that cell formatting in tables is consistent.
- Care should be taken to ensure that long content does not adversely affect the column width dynamically.
- Unnecessary information in cells should be avoided, and text folding, cropping or scrolling should be used for long content.
- Table contents should be aligned in a consistent manner and all cells should be formatted in the same format (e.g. left justified, justified, centred, etc.).
References
- –
Useful Resources
- –
Significance Level
★★★★★ 3/5
Example
In the example website, the top menu on the homepage and subpages is consistently designed.
Consistent Page Design
Principle
All pages on a website must be consistent with each other.
Description
Consistency is used to refer to the uniform design of similar text and visual components. This enhances learning, as previously acquired knowledge aids in performing subsequent tasks. Furthermore, consistency ensures that users feel they are still within the same website when navigating through different subpages, facilitating more robust navigation.
Guidelines
- The main menu and side menus should be the same on all pages.
- Text, headings, images, tables, logos, and other elements in page design should be consistently designed.
- Consistency should be maintained across all subpages of a website to ensure usability, and all pages should be designed with the same structure.
- As much as possible, properties like font types, font sizes, font colors, and page alignment should be the same on all pages.
- In complex site structures, three or four distinct basic page templates are designated. These templates should be designed with a consistent visual language and font structure. The height and characteristics of the logo and header can be adjusted in these different designs as needed, without compromising consistency.
- Page content, language structure, and tone should be consistent throughout the entire site.
- Even a one-pixel shift or balance discrepancy in components like the logo and buttons can lead to a negative perception of quality by users and should be taken into account.
References
- ISO 9241-151 / 7.1.5 – Structuring content appropriately
- ISO 9241-151 / 9.3.2 – Consistent page layout
- ISO 9241-151 / 9.3.15 – Identifying all pages of a website
Useful Resources
Significance Level
★★★★★ 4/5
Example
In the example website, the top menu on the homepage and subpages is consistently designed.
Horizontal Scrolling
Principle
Horizontal scroll bars should not be used on websites.
Description
The use of horizontal scroll bars is discouraged because it can hinder users from fully grasping the content and make it difficult to view content on different screen types. When designing websites, it is recommended to avoid requiring horizontal scrolling and instead opt for flexible designs that can adapt to different screens. This issue often arises due to pages being developed in full-screen mode and not being adequately tested with smaller browser windows.
Guidelines
- The use of horizontal scroll bars should be avoided on web pages.
- During the development phase, the site should be tested with browser windows smaller than full-screen.
- Fluid design, with the use of CSS technology, should ideally allow switching between approximately three different design width modes for various screen sizes.
References
- ISO 9241-151 / 9.3.8 – Avoiding horizontal scrolling
Useful Resources
- –
Significance Level
★★★★★ 4/5
Example
In the example website, on a screen with a resolution of 1024x768 pixels, users are required to use the horizontal scrolling bar to view the entire page.
Printable Content
Principle
The option to print content on the website should be provided.
Description
Users may need to utilize certain content in printed form. Therefore, content that users might need to print should be made printable within the website. Providing content in a format that can be directly printed will prevent users from having to reformat the content.
Guidelines
- For content that needs to be printed in hardcopy (e.g., petitions, assessment receipts, declarations, etc.), a visible print option should be provided.
- Printing of the page should be tested, and measures should be taken to avoid printing with a dark background.
- Before printing the content, ensure that the print preview page displays all components, preventing users from unintentionally printing more pages than expected.
- Each page of the generated printout should include source attribution text in the footer area.
References
- ISO 9241-151 / 9.3.16 – Providing printable document versions
Useful Resources
- –
Significance Level
★★★★★ 4/5
Example
In the example website, users are enabled to print the content, and a print icon (located in the top right corner) indicates this option.