KAMİS
Mobile Website
Principle
Description
The site structure in internet websites is important for users to access essential tasks quickly and easily. Since mobile devices offer a more limited screen size, providing a user-friendly site structure and utilizing the screen to the best extent becomes even more crucial. Moreover, using websites on mobile devices is generally more challenging compared to desktop devices, which means that the design of site structure should take different criteria into consideration.
Additionally, a consistent site structure helps users predict where they will find information and how to use it. This is especially useful for users with cognitive disorders (such as autism). A consistent and logical layout is important in helping users understand which areas they can interact with on the website. For instance, navigation aids like back buttons should consistently take users back to the previous step and should behave like a breadcrumb trail.
Guidelines
- The environment and needs of the users in case of using the site should be analysed before the site design.
- The site structure should be designed according to the conceptual model in the user's mind.
- Avoid designs that can only work on certain technical specifications or require specific technical capabilities; instead, design for widespread use, older technical capacities, browsers, and standards.
- Websites that only use the unique features of a particular platform (e.g. IOS, Android, Windows Mobile, Linux Mobile, etc.) should not be built.
- Interfaces should provide multiple ways to interact with the content when necessary. Offering multiple ways for content interaction makes the user's choice easier and increases inclusivity.
- Control and navigation components used in similar mobile sites should be used consistently. When it is necessary to use a special component, consistency with the design and interaction language of the general structure should be ensured.
- All options and components necessary for a specific task should be made visible to the user without overwhelming them with unnecessary information.
- In the designed pages, the structures that the user will navigate forward and backward many times should be avoided, the number of steps and the number of pages to be loaded should be minimised.
- Critical actions (e.g., delete, cancel, etc.) should be placed in areas that users cannot easily reach on the mobile device's screen. This prevents users from accidentally performing critical actions.
References
Useful Resources
- –
Significance Level
Example
Principle
Description
Colour influences user psychology in terms of perception and the way it interacts with all user interfaces. It is also an important factor in user interface design and runs deeper than simple aesthetic details.
Colour is the second most important factor after design in terms of the functionality of applications. Mobile interaction with the user is predominantly based on graphic elements, and colour plays a critical role in this interaction. It helps users to see and interpret the content of the application, interact with the right elements and understand actions.
In mobile applications, it is appropriate to use predominantly fewer colours and less saturated palettes. When using colours as differentiators, it is important to choose appropriate contrasts.
Because the environment and the device used in mobile devices can vary greatly, it's crucial to consider this variability in color usage. Adequate contrast between the background and foreground is essential, and reliance on color contrast alone for conveying information should be avoided. Poor contrast between the background and foreground makes reading and perception even more challenging on mobile devices.
Guidelines
- In order for the text to be legible, it should be ensured that the appropriate contrast is provided between the text colour and the background.
- The colour used in the text titles should be preferred closest to black or white in accordance with the background colour.
- In order to facilitate readability, black or the closest value to black should be selected in the colour of the text of the content. The use of more than one text colour in the content should be avoided.
- Colour combinations should be kept simple in order to contribute to the user experience.
- High contrast should not be preferred to attract the attention of users.
- The color contrast between linked text and non-linked text should meet the WCAG 2.0 Level AA contrast ratio or be ideally adjusted rather than using an established color contrast standard for mobile devices.
- Links should be the same colour throughout the site. A single colour (usually blue) is used to indicate links.
- Content should not be shown only in colour. Colours can be difficult to distinguish in bright sunlight.
References
- –
Useful Resources
Significance Level
Example
Principle
Description
Traditional desktop screens often have a greater width than height, whereas mobile device screens are designed based on vertical resolution. This means that even when preparing a mobile version of a desktop website, component sizes must be reconsidered, and the design needs an overall revision.
Video elements used on mobile sites may have long loading times, depending on the internet connection speed, and users may choose not to view video content to conserve their data, even with high-speed connections. At the same time, displaying the duration of videos on mobile devices with low internet speeds can influence the user's decision to watch the video.
Images should be prepared to fit the screen size of the device for mobile websites, especially in mobile browsers, as resizing images on the client side can lead to noticeable slowdowns, increased battery consumption, and responsiveness issues.
Guidelines
- It should be noted that photos / images will reduce the loading speed of the site and may cause the content to open more slowly.
- Photographs / pictures that support the text content and will be meaningful for users should be used.
- If there are many photos / images of the content, it can be ensured that other images other than the main image can be accessed via another link. Thus, uploading all images at the same time is prevented.
- For photos/images that are not clear and understandable, captions or explanations should be added.
- Mobile site images should be displayed to fit the screen size of the device without exceeding it.
- When images require high resolution and larger dimensions, it's recommended to initially show the image in its intended size and let users zoom in if they want to see a high-resolution version.
- If users want to see the high-resolution version of the image, they should be able to access the high-resolution version of the relevant image with the link to be added to the site.
- The use of background images should not be preferred unless necessary.
- Background images should not be used for informational purposes. In cases where it is necessary to use it, the information given in the background should be included separately in the site.
- The aspect ratio of the images should never be changed during enlargement and reduction. The relevant image should be placed on the screen in accordance with the aspect ratio.
- Low contrast images should not be preferred. Since mobile devices can be used in environments with different light levels, low-contrast images may be difficult to perceive.
- On pages with video elements, a description about the content of the relevant video should be added. In this way, users can decide whether to watch the video by reading the video description without waiting for the video to load.
- Clickable areas are of great importance due to the screen size of mobile devices. In order to provide convenience to users, video elements in the mobile site should be played by clicking both the video title and the thumbnail of the video (if any).
- The video playback time must be visible to users before the video is run.
- If the videos on the mobile site cannot be played on the users' mobile device or are not compatible with the device, users should be informed about this situation.
- Alternative transmissions, such as subtitles, sign language and audio description, should be made available via embedded media.
- The user should be able to recognise the presence of pause/stop/mute buttons.
- The video should not be started automatically when the web page containing the video is first opened, or it should be started silently.
- Relevant metadata must be provided for all media. Relevant metadata may include duration and the presence of subtitles, sign language or audio description.
References
- –
Useful Resources
Significance Level
Example
- –
Principle
Description
According to the principles of visual design, including "Gestalt Principles," user interface components displayed are related and gain perceptual significance based on their spacing, position, orientation, and more. Once the necessary components are placed on the page, the remaining areas are not just blank; they are a separate design element. White space, in this sense, serves not only readability and content priority but also contributes to visual organization, simplifying the user interface.
White space in design helps emphasize essential elements or keep them separated from other elements. It also provides significant breathing space, distancing users from interface clutter.
In ready-made structures where page layout, including white space, is predefined (e.g., grids), manual adjustments to white space might lead to visual design issues.
Guidelines
- While making decisions such as font type, size, colour, style and character spacing during design, the use of white space should also be taken into consideration.
- Not only the spacing between lines, but also the spacing between paragraphs and full content sections should be taken into account.
- There should be enough white space to visually distinguish all components within the page (e.g. header, navigation and sidebar etc.).
- The use of excessive amounts of white space that will create low information density on the page should be avoided.
- In the design of areas where users can interact (e.g. links, buttons, etc.), attention should be paid to the use of sufficient white space to prevent users from making incorrect choices.
References
- –
Useful Resources
Significance Level
Example
- –
Principle
Description
Corporate identity, with the correct use of corporate identity components, helps visitors accurately perceive that the website belongs to the organization. Corporate identity elements can include logos, images, flags, photos, patterns, color components, and the organization's slogan. A mobile website theme appears as a simplified version compared to desktop versions, with some components and features removed due to the limited screen space provided to users. Due to the limited screen size offered to users, some corporate identity elements may be omitted from the design. As a result, corporate mobile websites are created that do not fully reflect the identity they represent.
When corporate identity and affiliation are not adequately conveyed to users, it can lead to distrust and user loss. Therefore, special efforts should be made in mobile site design to convey corporate identity and affiliation information to users.
Guidelines
- To make it easier to understand which organization the website belongs to, the corporate logo should be used.
- When designing the site logo, it should be redesigned from scratch in different resolutions. If necessary, the logo intended for mobile sites should be resized after certain components are removed.
- Since mobile devices offer a more limited screen real estate, colors are a more prominent element. Therefore, adjustments should be made in the color palette, color intensity, and the areas where colors are used.
- The entire website should be reviewed by an editor to ensure consistency in content created by different authors. Consistency in writing style and tone throughout the site will help users correctly perceive the site's sense of affiliation.
- Page titles and page endings should be arranged consistently and contain information that reflects the corporate identity.
- Visual elements used on mobile websites (e.g., photos, images, icons, etc.) should be consistent with each other and with the site's identity, and their aspect ratios should be adjusted to fit the mobile design without altering them. It should be noted that discrepancies in these details are more noticeable on mobile websites.
- Bullet points used in lists should be consistent, and bullet points that do not match the corporate site identity should be avoided.
References
- –
Useful Resources
- –
Significance Level
Example
By using a similar font and harmonious colors with the corporate logo, a sense of corporate identity has been established in the example site.
Principle
Description
On mobile websites, navigation must be accessible, easily locatable, and have a space-saving design due to the limited screen size. Therefore, the same navigation structures used on desktops should not be used on mobile devices, and mobile-specific adjustments should be made, considering the specified conditions.
There are some common navigation structures. Each navigation structure can have advantages or disadvantages from different perspectives. Taking into account parameters such as user needs and the way the website is used can help determine which navigation structure will provide more efficiency.
Commonly used navigation structures include hamburger menus, tabbed structures, prioritized menu items, and full-screen designs, among other types.
Guidelines
- Navigation elements on the main page should have a similar appearance to the navigation elements displayed on desktop computers. This way, user habits are maintained, and confusion is avoided.
- Page navigation should be positioned predictably and accessible when the keyboard is displayed.
- The main page should include essential navigation elements, allowing navigation between all pages.
- Links that redirect users to other pages or actions should have clear and meaningful labels, avoiding vague expressions.
- Navigation elements should be large enough for easy selection on mobile screens.
- Navigation elements should be displayed consistently on different mobile devices with varying screen resolutions.
- The user's location on the site should be clearly defined using informative elements such as breadcrumbs, page titles, and selected links.
- In deep navigation structures, which are hierarchical, the user's location on the site should be explicitly indicated.
- Gesture-based navigation structures should not be preferred in mobile websites due to the unpredictability of their existence and the potential for mobile device functions to overlap with them.
- If there is information and functionality that should be prioritized on the screen, a space-saving hamburger menu structure, which is displayed when selected, can be preferred.
- If a hamburger menu is used on the website, the icon used should be in line with user habits and should be selected from icons familiar to this structure.
- Menus that contain sub-items should be designed visually understandable.
References
- –
Useful Resources
Significance Level
Example
Principle
Description
Mobile security encompasses various security vulnerabilities or attacks aimed at users' data, financial and credit card information, or control of different phone services. The fact that mobile devices belong to an individual creates a certain physical sense of security, sometimes leading users to neglect necessary security measures.
Despite the advantages provided by the internet, security issues related to social engineering attacks and theft of sensitive and personal data continue to emerge. With more personal data being recorded and stored by electronic devices, data and communication security is a feature to be implemented by developers and properly understood by users.
Mobile devices can have internet connections in very different environments, some secure and some not. While a standard desktop user can connect from a certain and secure internet connection at home or in the office, mobile users can access the internet from insecure connections with no encryption, potentially leading to security issues.
Guidelines
- The authentication system should give users a sense of security and not create obstacles to providing the desired functionality.
- Authorization screens that target mobile users must be SSL certified.
- To provide a more secure environment through public mobile sites, users should have the option to authenticate via different channels (e.g., SMS, etc.).
- For websites where potential issues can lead to loss of rights or money, authorization should be done through the phone number, SMS, or instant notifications (push messages) with secret information verification, ensuring that fake websites are prevented from doing this.
- Since mobile devices are generally used by a single person and have physical security, preventing the constant re-entry of usernames and passwords may be preferable for usability.
References
- –
Useful Resources
Significance Level
Example
Principle
Description
Guidelines
- Users' geographical location can be used in the services provided by the institution.
- Facilitative features that allow tasks to be completed more quickly (e.g., making phone numbers clickable) can be provided by considering that users may use the website in different contexts.
- Elements containing sound, such as videos and animations on the website, should not start automatically or should start silently, considering that they may be used in various contexts (e.g., meetings, conferences, travel, etc.).
- User profiles will vary, so data entry structures for mobile websites should be designed that adapt and facilitate the user's completion of the task based on the information they enter.
- The mobile website should be divided into sections that allow users to easily perform their tasks. Since mobile devices are used on the move, the goal is to complete tasks quickly and without errors.
References
- –
Useful Resources
- –
Significance Level
Example
Principle
Description
Compared to desktop device screens, mobile device screens display less content. Therefore, mobile users may need to engage in more interactions to access the same amount of information. For information beyond the visible area on mobile device screens, users must rely on short-term (approximately 20 seconds) memory.
While mobile devices offer the advantage of portability, the likelihood of interruptions due to external factors is high. Any incident occurring in an outdoor environment can disrupt the user's attention and disrupt the mobile usage experience. Therefore, mobile session durations are short. The average session duration is 150 seconds for desktop devices, while it is 72 seconds for mobile use.
Although some phone manufacturers attempt to display multiple windows simultaneously, the limited screen size is a factor that complicates the efficient implementation of this goal. Most users see only one window on their screens; unlike desktop devices, they cannot split the screen and work with different windows.
Enterprise services can be delivered through a mobile internet site or a platform-specific mobile application (app). However, people benefiting from these services may come from different socioeconomic backgrounds and use devices with very different technical specifications. The technologies used in the development of the site should be up-to-date and state-of-the-art, but often, this can lead to exclusion for some users. Therefore, the technologies used should be widely supported and sustainable by commonly used devices.
Guidelines
- Users should be able to complete tasks without the need to use different applications on mobile devices due to limitations such as screen size.
- Mobile internet sites should be self-sufficient and should not require any physical (e.g., a stylus, video player application, etc.) or virtual external tools.
- In touch interfaces on mobile devices, the area for interactive elements should be larger compared to desktop screens, and an inactive area should be provided around them to minimize the possibility of users accidentally touching different elements and making mistakes. In desktop devices, such areas can be understood by hovering the mouse cursor over them, but such an option does not exist on touch screens.
- Pages designed with consideration for the potential disconnection of cellular data and Wi-Fi connections should be simple, load quickly, and contain as much information as possible while reducing the need for forward and backward navigation.
- Mobile devices can utilize features such as GPS, camera, microphone, etc., from internet sites to help users perform their tasks more quickly and easily. For example, when entering barcode information is required, the camera feature of the mobile device can be used.
- Elements and interaction areas (e.g., links, buttons, scroll areas, etc.) on the page should be clearly distinguishable, and their purpose should be perceivable.
- Visual elements used on internet sites should be compatible with commonly used devices since mobile devices vary in technical aspects such as screen size and resolution.
- Processes like page reloads using scripts that heavily rely on mobile device technical features should not be repeated excessively unless absolutely necessary, in order to conserve battery life.
- Since users with different socioeconomic resources benefit from public services, pages should load quickly on older and lower-performance mobile devices, providing as smooth a user experience as possible.
- Users should not be asked to download software that is incompatible with their mobile devices (e.g., Flash, Windows application, etc.).
References
- –
Useful Resources
Significance Level
Example
Principle
Description
When considering the general characteristics of mobile devices, such as small screen size, versatility in various contexts, and a wide range of technical specifications, it can be said that designing for mobile is much more challenging compared to desktop design. Given these parameters, it is crucial to provide only essential features and information on a small screen, taking into account the needs of the target audience. The homepage serves as the face of the website and a starting point for many visitors. Therefore, any effort to improve the homepage will be a valuable gain.
A part of the services provided by public institutions can be offered through websites, and this trend continues to accelerate within the scope of digital transformation. Mobile devices differ from desktop devices in terms of technical specifications and usage patterns, and this difference can be utilized as an advantage in mobile internet sites. Taking into account the services offered by public institutions and the features of mobile devices, including the essential needs of the target audience on the homepage, will contribute to the mobile usage rates.
Guidelines
- The institution's logo on mobile internet sites should not take up too much space.
- The institution's logo should include a link to the homepage.
- Navigation on the homepage should be intuitive, clear, and understandable.
- Both the homepage and other pages should include a link to the desktop version of the mobile site. Users may want to access information or features they cannot find on the mobile site from the desktop version, or they may want to view the desktop version on their large-screen mobile devices.
- If search functionality is an important feature for accessing information and services on the website, the search bar should be positioned at the top of the page where it can be seen as soon as the page is loaded.
References
- –
Useful Resources
- –
Significance Level
Example
Principle
Description
Lists can be employed to make long texts more systematic and easier to read. Using a list structure offers certain advantages while also requiring attention to specific aspects. Lists align with the natural reading pattern of humans, following an F-shaped pattern. Additionally, they are useful for creating more homogeneous content and facilitating comprehension. Lists can help transform long, content-heavy pages into a more concentrated and understandable format.
In addition to the advantages provided by list structures, there are also potential downsides to consider. These include a visually modest appearance and the risk of user attention waning towards the end of the list. These are important considerations when using list structures.
Guidelines
- List structures can be used for long texts that are difficult to understand.
- On mobile sites, content can be grouped into lists based on different categories.
- If content presented in list structures on mobile sites consists of information from different categories, it can be displayed with the option to filter information by categories.
- If a hierarchical view is presented through list structures, it should not go too deep to the point where it hinders readability.
- Very long lists should be divided into multiple headings and grouped to enhance clarity and comprehensibility.
References
- –
Useful Resources
- –
Significance Level
Example
Principle
Description
Guidelines
- The number of data entry fields on a single screen should not be excessive. In cases where a large number of data entry fields are required, these fields can be grouped and presented in steps.
- During data entry, consider activities that may cause users to be interrupted (e.g., responding to a message, receiving a phone call) and extend the form timeout duration.
- When designing data entry elements, the screen sizes of mobile devices should be taken into consideration.
- The design of data entry areas should also take into account the situation where the keyboard is open and a very small area can be used.
- In data entry fields where only numbers can be entered, the number interface of the keyboard must be shown.
- Users should be given a starting point by automatically focusing on the first item in the data entry field.
- Text boxes should be designed in such a way that users can approximately see the text they type.
- On the screen where data entry is made, it should be designed in such a way that it can be easily understood which label/description belongs to which form field.
- The use of labels designed inside the data entry field (inline) should be avoided. Although this method allows more efficient use of limited space, it prevents users from seeing and controlling which field they are entering data for.
- Labels can be placed above the data entry fields. In this way, the entire left-to-right length of the screen can be used for the data entry field.
- Users should be allowed to enter data by making selections instead of empty text fields, data should be automatically filled in where necessary, and data entry should be simplified as much as possible.
- Hint mechanisms can be included to ensure that users do not forget what they have done in successive transactions.
References
- –
Useful Resources
Significance Level
Example
Principle
Description
Guidelines
- The width of search fields on mobile sites should be designed with consideration for the average length of search terms, ensuring that users can see the text they enter in the search field.
- To facilitate the search process on mobile sites, search fields should ideally cover the entire width of the screen.
- The search field should not be designed to be displayed by clicking on an icon (e.g., a magnifying glass) whenever possible. Designs where the area for data entry is clearly identifiable are preferred.
- During the search process, if technically feasible, smart search (auto-suggestion) should be implemented, reducing the effort required for data entry by providing suggestions to the user as soon as the third letter of the query word is entered.
- Since mobile devices are used in various contexts, it should be taken into account that users may make mistakes or enter incomplete queries. In such cases, suggestions should be provided to quickly complete the search process.
- Previously searched terms by users can be presented as suggestions for future searches. This feature makes the search process quicker and requires less effort.
- On mobile internet sites, multiple search fields should not be included unless necessary.
- When displaying search results, it should be ensured that the most relevant results for the search query are visible within the visible area of the mobile device.
- When displaying search results, the design should be optimized for the mobile device screen to facilitate easy examination of the results and quick access to the desired outcome.
References
- –
Useful Resources
- –
Significance Level
Example
Principle
Description
Guidelines
- In cases of errors caused by connectivity issues, users should be informed, and they should be given the opportunity to continue their interrupted tasks later.
- During data entry on mobile devices, entered data should always be visible within the device's visible area. This way, errors in data entry due to finger usage or virtual keyboards can be easily detected by users.
- Due to the limited screen size on mobile internet sites, long error messages should be avoided. Instead, concise and instructive messages that explain the cause of the error and the solution should be created.
- The mobile internet site should direct the user to the area where the erroneous action occurred. In cases where users enter data in multiple fields, such as long forms, enabling users to easily locate the area where the error occurred will facilitate a quick completion of the task.
- The number of data entry fields should be reduced as much as possible on mobile internet sites. This reduces the risk of entering incorrect information and makes tasks easier to complete.
- The areas where users need to type should be minimized on mobile internet sites. Typing on mobile devices is slow and error-prone, so interfaces that allow users to complete their tasks quickly and accurately should be designed.
References
- –
Useful Resources
- –
Significance Level
Example
Principle
Description
Guidelines
- For users with hearing impairments, any auditory information on mobile internet sites should also be provided with visual presentations.
- The design of the mobile internet site should take into account potential difficulties faced by physically disabled users due to the small screen size of mobile devices, and the site should be designed accordingly.
- Users with learning difficulties require clear and simple design. Users with learning difficulties need more general solutions, including consistent design and the use of simplified language.
- Due to the small screen size of mobile devices, too much information should not be attempted to be crammed in. If intensive content pages are necessary, they should be supplemented with visual and multimedia elements to enhance comprehensibility and attention should be paid to using white space.
- For users accessing websites with screen readers and multiple language options, the language selection should be made available in the initial stage.
- All elements on the website interface should be coded to be focused and readable by screen readers.
- Alternative media elements should be provided for disabled users who cannot access visual or auditory content.
- Attention should be paid to the use of header tags for quick navigation on the page with screen readers.
- For users with visual difficulties, focusing on the targeted point should be ensured and the focus should not change spontaneously. For example, when it is desired to focus on a text on a page, it should be ensured that the screen reader does not focus on a different text or item on the page.
- For users with visual difficulties, the order of focusing on page elements for screen readers should be given in the correct order.
- Abstract concepts should be avoided as much as possible as users with hearing difficulties use a different way of communication.
- The use of automatically played media files, such as videos and audio, should be avoided because screen reader users may have difficulty stopping them. As mobile devices can be used in various environments, such situations can cause difficulties for users with visual impairments.
- Content that requires excessive use of short-term memory, such as scrolling text, disappearing dialogues, content and words displayed on the previous screen that are expected to be remembered on the next screen, and encrypted codes, should be avoided, taking elderly users into account.
- To ensure that users can easily use interaction areas on the mobile internet site, the relevant area should be designed considering various finger sizes.
- Components related to frequently used tasks on mobile internet sites should be placed in the middle and lower areas where users will use their thumbs. It should be noted that 49% of users operate their phones with one hand using only their thumbs.
References
- –
Useful Resources
Significance Level
Example
