http://3.86.49.49/ 2026-04-19T09:21:02+00:00 http://3.86.49.49/ http://3.86.49.49/lib/tpl/docnavwiki/images/favicon.ico text/html 2021-06-25T10:09:56+00:00 Anonymous (anonymous@undisclosed.example.com) http://3.86.49.49/doku.php?id=design:character_limits&rev=1624612196&do=diff UI Design Patterns: Character Limits Character limits are used on text fields to indicate the maximum amount of characters that can be entered into that field. Here is a link to a Codepen Snippet that shows this UI & its interaction Looking To Existing Design Patterns To See What Works Twitter has a good example of a character limit UI. text/html 2021-08-19T12:45:15+00:00 Anonymous (anonymous@undisclosed.example.com) http://3.86.49.49/doku.php?id=design:clear_reset_buttons&rev=1629373515&do=diff Clear + Reset Buttons Clear and reset buttons (mostly reset buttons) are used across our apps to remove selected filters on a form and effectively start from scratch. An example of the Clear button in use is in the Support Request application on the My Tickets page: text/html 2021-06-25T10:09:56+00:00 Anonymous (anonymous@undisclosed.example.com) http://3.86.49.49/doku.php?id=design:design_-_patterns&rev=1624612196&do=diff Design Patterns Author: Michelle McCausland This page contains the notes taken from the UX training course “UX Foundation Online” provided by UXTraining.com ---------- Chunking * Technique that helps us process data faster * Makes large data sets easier to manage text/html 2021-06-25T10:09:56+00:00 Anonymous (anonymous@undisclosed.example.com) http://3.86.49.49/doku.php?id=design:design_-_principles&rev=1624612196&do=diff Design Principles Author: Michelle McCausland This page contains the notes taken from the UX training course “UX Foundation Online” provided by UXTraining.com ---------- * Design principles & patterns - high level guidelines Perceivable * Should be understood by viewing text/html 2021-06-25T10:09:56+00:00 Anonymous (anonymous@undisclosed.example.com) http://3.86.49.49/doku.php?id=design:design_resources&rev=1624612196&do=diff Design Resources Design Software * Figma - Prototype/Mockup Creation Tool * Adobe XD - Prototype/Mockup Creation Tool * Balsamiq - Wireframe Creation Tool * Canva - Easy tool for posters/flyers etc. Graphics & Stock Images * My Stock Photos - stock photos * Unsplash Design Framework Documentation * Font Awesome Icon Cheat Sheet * Ionic Framework Documentation * Bootstrap Documentation * Semantic UI Documentation * Angular Gauge Library * CSS Icon Library * Materia… text/html 2021-08-24T14:04:30+00:00 Anonymous (anonymous@undisclosed.example.com) http://3.86.49.49/doku.php?id=design:design_usability_jira_project&rev=1629810270&do=diff Design + Usability Jira Project This Jira project is for design and usability related items. In most cases these tickets are created from items noted on the Snags Sheet. These tickets are worked through by Michelle and when a resolution/proposed design has been created, the ticket is moved to Ready for Dev. Tickets in this state can then be moved to an appropriate development sprint to be worked on by a developer. text/html 2021-06-25T10:09:56+00:00 Anonymous (anonymous@undisclosed.example.com) http://3.86.49.49/doku.php?id=design:disabled_or_non-editable_components&rev=1624612196&do=diff Disabled/Non-Editable Components Disabled Vs Readonly Attributes The properties of the disabled attribute: * the input will NOT have a tab stop * the input will NOT be focusable * the input value CANNOT be changed without JavaScript * the input CANNOT be submitted in a form text/html 2021-06-25T10:09:56+00:00 Anonymous (anonymous@undisclosed.example.com) http://3.86.49.49/doku.php?id=design:dropdowns&rev=1624612196&do=diff UI Patterns - Dropdowns Author: Michelle Dropdown Menu Anatomy * Label: Inform users on what should be selected. * Field Icon (Optional): Supports the label by indicating the type of information required. * Search Bar (Optional): Used to help users easily find their intended option — for menus that consist of 20 or more options. text/html 2021-06-25T10:09:56+00:00 Anonymous (anonymous@undisclosed.example.com) http://3.86.49.49/doku.php?id=design:elements_principles_of_design&rev=1624612196&do=diff Elements & Principles of Design Author: Michelle McCausland TLDR; Elements of Design * Color (Hue) * Value (Tone) * Texture * Shape * Form * Space (whitespace) * Line * Type Principles of Design * Contrast * Emphasis * Balance text/html 2023-01-31T12:30:35+00:00 Anonymous (anonymous@undisclosed.example.com) http://3.86.49.49/doku.php?id=design:errigal_style_guide&rev=1675168235&do=diff Errigal Style Guide Author: Michelle McCausland Last Updated: Sep 2020 A Note About Color Contrast When adding colors to text and the background behind text, ensure the font has enough contrast to be read easily. A good way to verify this is to use this text/html 2021-06-25T10:09:56+00:00 Anonymous (anonymous@undisclosed.example.com) http://3.86.49.49/doku.php?id=design:error_messages&rev=1624612196&do=diff How To Write Effective Error Messages Error Messages Should Be Clearly Visible * If a user makes a mistake i.e. an error occurs, they should get feedback on screen informing them of this. * A good example of this is saying in an email that you'll attach a file but don't. text/html 2021-06-25T10:09:56+00:00 Anonymous (anonymous@undisclosed.example.com) http://3.86.49.49/doku.php?id=design:modals_on_mobile_devices&rev=1624612196&do=diff How To Use Modals On Mobile Devices What Are Modals? A modal is a screen that pops up in order to prompt a user to complete an action before returning to the main window. This can be for example save or cancel. Modals should be used for short dialogs with the user, not long complex decision making tasks. text/html 2021-06-25T10:09:56+00:00 Anonymous (anonymous@undisclosed.example.com) http://3.86.49.49/doku.php?id=design:notifications&rev=1624612196&do=diff UI Patterns - Notifications Author: Michelle What Are Notifications? * Notifications must assist (not impede) people to perform tasks. * Addressing notification design early in the product design process will produce better results. * All copy on notifications must be clear, concise, and useful text/html 2021-06-25T10:09:56+00:00 Anonymous (anonymous@undisclosed.example.com) http://3.86.49.49/doku.php?id=design:search_filter&rev=1624612196&do=diff Search & Filter Author: Michelle Searching What Is Search? * When you search, you start from a blank screen (like Google) and enter a search term to return a list of results based on that search term. * This is a more general way of finding data as the results returned will display all data that match your search query. text/html 2021-06-25T10:09:56+00:00 Anonymous (anonymous@undisclosed.example.com) http://3.86.49.49/doku.php?id=design:selection_controls&rev=1624612196&do=diff UI Patterns - Selection Controls Author: Michelle Examples Checkboxes Used when there are one or many options where more than 1 can be selected Radio Buttons * Used when there are 2 or more options where 1 must be selected. * If possible, use radio buttons rather than drop-down menus - Making all options permanently visible so that users can easily compare them reduces cognitive load text/html 2021-08-24T13:57:12+00:00 Anonymous (anonymous@undisclosed.example.com) http://3.86.49.49/doku.php?id=design:start&rev=1629809832&do=diff DESIGN Process * Design + Usability Jira Project Errigal UI * Errigal Style Guide * Usability Snagging Usability & Design Guidelines * Usability Heuristics for User Interface Design * Elements & Principles of Design * Design Resources UI Patterns * Dropdowns * Selection Controls * Notifications * Tooltips Guidelines * Web Form Guidelines * Search & Filter * Disabled or Non-Editable Components * Modals On Mobile Devices * Error Messages * Character Limits *… text/html 2021-06-25T10:09:56+00:00 Anonymous (anonymous@undisclosed.example.com) http://3.86.49.49/doku.php?id=design:tooltips_guidelines&rev=1624612196&do=diff Tooltips Guidelines The following post is summarized from the article Tooltip Guidelines from the Nielsen Norman Group website. What is a tooltip? Definition: A tooltip is a brief, informative message that appears when a user interacts with an element in a graphical user interface ( text/html 2021-06-25T10:09:56+00:00 Anonymous (anonymous@undisclosed.example.com) http://3.86.49.49/doku.php?id=design:usability_-_analysis&rev=1624612196&do=diff Usability - Heuristics Author: Michelle McCausland This page contains the notes taken from the UX training course “UX Foundation Online” provided by UXTraining.com ---------- Triangulation * using multiple datasources to retrieve more accurate data / results text/html 2021-06-25T10:09:56+00:00 Anonymous (anonymous@undisclosed.example.com) http://3.86.49.49/doku.php?id=design:usability_-_design&rev=1624612196&do=diff Usability - Design Author: Michelle McCausland This page contains the notes taken from the UX training course “UX Foundation Online” provided by UXTraining.com ---------- Information Architecture * Like a skeleton * Determines where content lives and is organised text/html 2021-06-25T10:09:56+00:00 Anonymous (anonymous@undisclosed.example.com) http://3.86.49.49/doku.php?id=design:usability_-_heuristics&rev=1624612196&do=diff Usability - Heuristics Author: Michelle McCausland This page contains the notes taken from the UX training course “UX Foundation Online” provided by UXTraining.com Introduction to Heuristics * Heuristics are a way to assess if software adheres to UX best practices. text/html 2021-06-25T10:09:56+00:00 Anonymous (anonymous@undisclosed.example.com) http://3.86.49.49/doku.php?id=design:usability_-_research&rev=1624612196&do=diff Usability - Research Author: Michelle McCausland This page contains the notes taken from the UX training course “UX Foundation Online” provided by UXTraining.com Types of Research Research can be categorized in 2 ways: 1. Qualitative * Unstructured * text/html 2021-06-25T10:09:56+00:00 Anonymous (anonymous@undisclosed.example.com) http://3.86.49.49/doku.php?id=design:usability_design_-_theory&rev=1624612196&do=diff Usability/User Experience Design - Theory Author: Michelle McCausland This page contains the notes taken from the UX training course “UX Foundation Online” provided by UXTraining.com ---------- UX Theory - What is UX What is user experience: * What it feels like to use a product or service text/html 2021-06-25T10:09:56+00:00 Anonymous (anonymous@undisclosed.example.com) http://3.86.49.49/doku.php?id=design:usability_heuristics_for_user_interface_design&rev=1624612196&do=diff 10 Usability Heuristics for User Interface Design Author: Michelle McCausland ## 1. Visibility of System Status - The system should always keep users informed about what is going on, through appropriate feedback within a reasonable time. ## 2. Match between system and the real world text/html 2021-06-25T10:09:56+00:00 Anonymous (anonymous@undisclosed.example.com) http://3.86.49.49/doku.php?id=design:usability_snagging&rev=1624612196&do=diff Design & Usability Snagging Author: Michelle McCausland Design & Usability snags, i.e. issues noted with the design or usability of Errigal IDMS applications can be added to the following sheet: Design & Usability Snags Sheet It is important to check that the snag does not already exist on the sheet before adding a new entry. text/html 2021-06-25T10:09:56+00:00 Anonymous (anonymous@undisclosed.example.com) http://3.86.49.49/doku.php?id=design:web_form_guidelines&rev=1624612196&do=diff Web Form Guidelines UX For Web Forms Best Practices for Web Form Design The following post is summarized from the article Website Forms Usability: Top 10 Recommendations from the Nielsen Norman Group website. Careful form design has a huge impact on the speed with which users can understand and accurately complete a form.