User Experience: A Practical Guide PDF

# User Experience A Practical Guide By Dr. Khaled M. El-Sayed 2022 ## Agenda Scope [Websites and Portals] We will focus on: - Forms and Layout - Navigation - Content - User Psychology - KPIs ## Forms ### Important commands are displayed as buttons, not links Buttons are more Eye catching...

# User Experience A Practical Guide By Dr. Khaled M. El-Sayed 2022 ## Agenda Scope [Websites and Portals] We will focus on: - Forms and Layout - Navigation - Content - User Psychology - KPIs ## Forms ### Important commands are displayed as buttons, not links Buttons are more Eye catching than Links Important: DON'T Display all Commands as BUTTONS | Example | Description | |---|---| | Demo | In today's market, enterprises and service providers need to provide efficient access and automated processes to their employees, external partners and their customers. NTG Clarity provides Smart2Go, a software and technology platform to support quick time-to-market, direct access by internal and external users with on-line transactions | | Build App | In today's market, enterprises and service providers need to provide efficient access and automated processes to their employees, external partners and their customers. NTG Clarity provides Smart2Go, a software and technology platform to support quick time-to-market, direct access by internal and external users with on-line transactions | | Features | | | How To | | | Subscribe | | | Contact Us | | ### Breadcrumbs vs Progress bars #### Breadcrumbs: where users are. There is Multiple choices for user <br> | Example | Description | |---|---| | Women Apparels Casual Topwear Shirts | | | 1 ECMAScript 2) HTML5 3 Node.js 4 Docker | | | Home About About our company Vision | | #### Progress bars where users are, and what's left to do. For a Predefined Unique Path | Example | Description | |---|---| | Browse Compare Order Confirmation Checkout | | | 1 Login 2 Shipping & Billing 3 Shipping Options 4 Review & Payment 5 Complete | | | Cart Billing Shipping Payment | | | 1 Cart 2 Billing 3 Shipping 4 Payment | | ### Successful form submission is confirmed with a confirmation page | Example | Description | |---|---| | Congratulation Password will be sent to your Email OK | | | Three Records are added to the pool OK | | | Selected records are successfully deleted OK | | ### Error messages are displayed next to the input field where the error occurred Preferred to change Field border color (e.g. red border) | Example | Description | |---|---| | Name Ahmed Mohamed Password ********** Password Must Contain 3 digits Confirm ********** Password Register | | ### Text boxes provide plenty of space for the answer | Example | Description | |---|---| | Name Ahmed Mohamed Address X Phone | | | Name Ahmed Mohamed Address Phone cancel Register | | ### Fields contain hints, examples, or required formats to make the expected input clear | Example | Description | |---|---| | User Name At least 3 characters Password Minimum 9 characters, at least one capital letter, one special char Credit Card XX-XXXX-XXXXXX Service Level BandWidth 128K, 256K, 1M, 4M Register | | ### Remove any repetitive actions Create a system that remembers your customers' preferences | Example | Description | |---|---| | First Name Ahmed Last Name Mohamed User Name AMoh 1 Password ********** Address 5 Morad St - Giza - Egypt. Age 23 Register | | | First Name Last Name User Name Password Password Must Contain 3 digits Address Age Register | | ### Make a clear distinction between primary and secondary Calls-to-action buttons | Example | Description | |---|---| | Premium Version Main Features 1- 2- 3- 4- 5- First Name Ahmed Last Name Mohamed User Name AMoh 1 Password ********** Address 5 Morad St - Giza - Egypt. Age 23 Free Trial Go Pro | | | Continue Upgrade | | | Example | Description | |---|---| | Spotify Free O CAD/month Shuffle play Listen offline No ad interruptions Unlimited skipo High quality audio GET FREE | | | Spotify Premium $9.99 CAD/month Start your 30 day free trial" Play any track Listen offline No ad interruptions Unlimited skips High quality audio GET PREMIUM | | ### Stick to a simple 3-color palette Combining more than 3 primary colors is difficult and it will often confuse your users. | Example | Description | |---|---| | (19) More Plus برنامج ADSL 46 اكتشف انظمة اتصالات حول شبكتك 46 اميرالد تبدأ من ٢٥٠ جنيه / شهر أهلا بك في عالم مميز جدا من أرقى خدمات الاتصالات المختلفة، ومزايا رائعة الضمان مستوى خاص لأعمالك وسفرك اعرف المزيد ← | | | حكاية تبدأ من ٣٥ جنيه / شهر اختار نظام حكاية المناسب ليك و لعيلتك و كلموا بعض ببلاش . و كمان تقدر تجدد باقتك أسبوع واثنين وثلاثة أو الشهر كله. اعرف المزيد . اختار رقمك حكاية co/Static etisalat/pages/plans/hekaya.html | | | Example | Description | |---|---| | crunchbase Q Search Crunc Advanced v START FREE TRIAL Chrome Extension Solutions v Products v Resources V Pricing About ORGANIZATION Vodafone + CONNECT TO CRM Summary Financials People Technology Signals & News Similar Companies Vodafone is a mobile telecommunications company that offers voice, messaging, and data services. Newbury, West Berkshire, United Kingdom 10001+ Private vodafone.com 2 16,304 Highlights Stock Symbol LSE:VOD Acquisitions > 32 Investments Exits > 25 7 Contacts 6,414 Employee Profiles 124 > SAVE *Recent News & Activity News Apr 5, 2022 Telecom Paper Amazon awards satellite launch contracts to Arianespace, Blue Origin, ULA News Apr 5, 2022 Business Standard India Stocks to Watch: Zomato, Vedanta, SBI Cards, Vodafone, RIL, MOIL, BEML News Apr 4, 2022 Forbes-A Vodafone Perspective On Key Market An Technology Trends | | ### Alert messages are consistent across your whole site - Don't use a different color, style or placement as it just becomes confusing | Example | Description | |---|---| | Error message Please contact supe Ok | | | Error X Oops, something went wrong. Please try again later. X An error occurred. Ok Cancel | | | Error! X Are you sure you want to delete? Cancel Delete | | | Hazardous Activity Warning! Hot water is hot! OK | | | Warning Proceeding with the operation 'Delete' will erase the contents of your hard drive. What do you wish to do? Proceed Delete | | | Warning The quantity you have reported exceeds the quantity planned. OK Cancel | | ### Close Button and Cancel Button - If one button Only, it should be "Close" - If there are two Buttons, Action Button and "Cancel" [Not "Close"] | Example | Description | |---|---| | XXXX1111 11/19 CARD CODE BILLING ADDRESS UNITED STATES OF AM adkfsakjfdf asidandt asfdedsf 15184 SAVE CANDEL | | | Login • Email is required Email Password: Submil Cancel | | | howto remove close Rectors Move Sioe Minimge Maximize | | | Jaubisap Save Cancel | | | Admin Add ITEM TIPE CONDITION MAKE | | ### Error Messages - State the encountered problem with the component in the title - Describe very briefly why the error happened under the title. - When possible, have a link to direct users to complete task or return to the previous state. - Give recommendations/solution(s) for the next course of action. | Example | Description | |---|---| | SAP Logon A script is attempting to access SAP GUI. OK Cancel | | | Example | Description | |---|---| | ! Your connection is not private Attackers might be trying to steal your information from example, passwords, messages, or credit cards). Learn more NET ERR CERT AUTHORITY INVALID Help improve Safe Browsing by sending some system information and page content to Google. Privacy policy Advanced Back to safety | | | ! The site's security certificate is not trusted! You attempted to reach secure.nal.com, but the server presented a certificate issued by an entity that is not trusted by your computer's operating system. This may mean that the sener has generated its own securty credentials, which Google Chrome cannot rely on for identity information, er an attacker may be trying to intercept your communications You should not proceed, especially if you have never seen this warning before for this site Proceed anyway Hala me understand | | | You've found a page that doesn't exist Breathe in, and on the out breath, go hack and try again | | ### System Notice "Action" Button, "remind me later" button and "don't show again" box. | Example | Description | |---|---| | Important notice The following required driver update is critical to ensuring the stability of the system Acer recommends that this update is applied at your earliest convenience, preferably at the first boot. The update will take up to 20 minutes to completed started. Before you begin this update please follow these important steps 1. Save and backup your data 2. Close all applications 3. Plug in your AC Adapter 4. Leave the system powered on for the duration of this update Please dick install now when you are ready, otherwise the Remind me later button will set a neminde for this update to display again in 3 Imlal now Remind me later | | | You're not receiving security updates Your version of Windows 10 has reached the end of service and isn't receiving security updates. These updates help protect your PC from viruses, spyware, and malware. To maintain the security of your device and data, we recommend you update to a newer version of Windows 10. Select "Learn more' for info on how to get this free update. Learn more Remind me later Don't show again | | | Notice messages should not be lengthy, should not be generic | | | Adobe Photoshop For the Photoshop Ul to display correctly, open System Preferences, click Appearance, and turn off text smoothing for font sizes & and smaller. Don't show again OK | | | Security Notice "Public Access may be enabled on the following MOBOTIX camera: "Dirk-$168" (172.22.1.235) For this reason and to maintain system security, the camera is accessed using only guest credentials (secure connection). If this is not intended and you want to login with your own user credentials and use the corresponding rights, the application needs to establish an unsecure connection first. Next, use "Secure System" in the "Wizards & Tools view to disable public access. Do not show this message again. Secure Connection Unsecure Connection | | ## Layout ### The most important information is above the fold (the part of the page visible without scrolling) <br> | Example | Description | |---|---| | | Scroll to view Visible by Default | ### Related information is clearly grouped together <br> | Example | Description | |---|---| | | Groping by frame Groping by separator | ### Color is used to group and structure items on the page <br> | Example | Description | |---|---| | | HR related Name Address Age DB Prog Salary Bonus Technical related Payroll related | ### Related Items are Logically Ordered <br> | Example | Description | |---|---| | First Name Middle Name Last Name Start Date End Date Origin Destination First Name Middle Name Last Name Start Date End Date Origin Destination | | ### Your logo is in the same place on every page <br> | Example | Description | |---|---| | | Screen 1 NTG NTG Screen 3 X Screen 1 NTG X Screen NTG No shift | ### Fonts are used consistently across all pages <br> | Example | Description | |---|---| | | Font face Name NTG First NTG Address Second Order Date NTG Label size For Example: All Labels are of Same font, Same Size May Change to get more focus | ### The background isn't complicated and doesn't distract from the content <br> | Example | Description | |---|---| | | Name Address Age DB Prog Name Address Age DB Prog Payroll related | ## Navigation ### There's a clear call-to-action telling user what to do next <br> - Call-to-Action is a aya-catch Button for Most Common- - next step in current scenario | The example is a form with inputs labeled Name, Address, Age, DB, and Prog. There is a button at the bottom that says "Verify Information" and another button labeled "Cancel." At the bottom right of the screen, there is a button that says "Confirm Vacation." | | ### It's clear to users where they are on the site for example using breadcrumbs <br> | Example | Description | |---|---| | | Name Address Age DB Prog Help Cancel Verify Information Home HR Employee | ### There are clear links to the Home Page and categories on every page <br> | Example | Description | |---|---| | | Home page Categories Name Address Technology Age Sales Prices DB Prog Salary Bonus Technology Sales Prices Demos References Technology Sales Prices Demos References Name Address Age DB Prog Cancel Verify Information Search | ### Navigation tabs are located at the top of the page <br> | Example | Description | |---|---| | | Tab 1 Tab 2 Tab 3 Tab 4 Tab 1 Tab 2 Tab 3 Tab 4 Tab 1 Tab 2 Tab 3 Tab 4 Tab 1 Tab 2 Tab 3 Tab 4 | ### There's an obvious change when the user hovers the mouse over something 'clickable' <br> | Example | Description | |---|---| | | Tab 1 Tab 2 Tab 3 Tab 4 Tab 1 Tab 2 Tab 3 Tab 4 You can click here to start Demo Or click on Home Icon to go back You can click here to start Demo Or click on Home Icon to go back | ### The company logo links to the homepage of the company <br> | Example | Description | |---|---| | | www.ntgclarity.com NTG Name Address |