o—n @karimsaif UI/UX | Terms You Should Know as a UI/UX Designer Z > Some concepts that help you in our field in order to be constantly evolving. Wait for the second part =| Free E-book £ Follow Me For More https://znap.link/karimsaif (OharaEnjoy © Introduction Hey Everyone! I'm Karim Saif, | will help you to develop your skills in the field UI/ UX Design. Before we get started | am very happy to download this E-book and | hope after reading it any reviews on Twitter or Linkedin if possible This E- book shows us some of the concepts that we must know and be familiar with, and there are some examples and tips HB term El Definition Hi Tip IntroductionEnjoy © 1: Ul terms y : These components are familiar to users and help them orient themselves within a site or app, improving the overall user experience. You'll add to the positive experience your users have. And you can exercise your own creativity in exactly how they're implemented and styled. Ul Terms 41: Ul Terms 1: Accordions y r are stacks of collapsed content blocks that reveal hidden content when clicked. They're commonly used for things like FAQs. + What is Accordions? > What is Accordions? are stacks of collapsed content blocks that reveal hidden content when clicked. They're commonly used for things like FAQs Use different icons to indicate open and closed sections. Ul Terms 51: Ul Terms 2: Breadcrumbs y 5 refers to a secondary navigation element that looks like a row of links. Just like in the tale of Hansel and Grete. Home > All Categories > Karim Saif The current page should always be the last crumb in the trail. Ul Terms1: Ul Terms 3: Pagination y ‘ is a fundamental part of information architecture. It is prevalent in web design, appearing on many web applications. <{1]23 45> The top and the bottom of a page are the most common places for pagination. Ul Terms 71: Ul Terms 4: Tags/ Chips | 4 7 in the design world, tags,or chips, are compact text elements that can serve many functions. They allow us to label, categorize, select, filter, or trigger actions. @@ Tags are compact text elements that can serve many functions. Ul Terms 81: Ul Terms 5: Progress trackers Cy . show users how many steps they've already taken and how many are still left to go. 00 © O Personal Contact. + Payment —_-Perview info info info info Avoid journeys with more than 5/7 (Miller's law) steps. Ul Terms1: Ul Terms 6: Button y Y is to encourage users to act. Button labels are as important as their design. Use action verbs to tell users what the button does so they can act without reading supporting text. Follow me Use the imperative form in an active voice for labels to minimize the number of words and make them easier to scan. Ul Terms 101: Ul Terms 7: Checkbox y Y are commonly found in forms. They allow for multiple options to be selected by users simultaneously, and also let them enable or disable an option. UI UX Design Use checkboxes when your users can pick multiple options, like ice cream toppings at a sundae bar. Ul Terms N1: Ul Terms 8: Radio button 3 ~ se are commonly found on forms, just like checkboxes. While checkboxes allow for multiple options to be selected, radio buttons only allow one. They're used in groups, where the options available are mutually exclusive (such as "yes" or no"). © UI Design UI UX Design Radio buttons are named after the pushbuttons found on old-fashioned radios. Ul Terms 121: Ul Terms 9: Toggle switch Y > are most often seen in things like settings screens in apps. A switch allows users to toggle between two mutually exclusive options, typically on and off states, for an element. — @ UlDesign @ > UIUX Design Make sure the on and off states for your toggle switches are immediately apparent. Ul Terms 131: Ul Terms 10: Form 2 i are arguably one of the most important Ul components you'll encounter. An effective form can increase conversions, while a poorly designed one can turn users away. Email Enter your ema Password 2 ®@ The lower the friction, the higher are the chances of users completing the form successfully. Ul Terms 141: Ul Terms Tl: Text input y s are the most common form input type. They can take many shapes and forms, depending on the situation and type of data being input. Email 1 etoryourem Create text inputs that recognize certain types of data, such as phone numbers or email addresses, so that the data is properly formatted Ul Terms 151: Ul Terms 12: Artboards / Frame 4 is an on-screen surface in a drawing application like Figma, Sketch, Balsamiq, Adobe XD, etc Artboard(aoose xo), Frame (Figma) In Figma, artboards are called frames. Ul Terms 161: Ul Terms 13: Artboards / Frame y ¥ is probably the most delicious UI component of all. It consists of 3 parallel horizontal strokes resembling top and bottom buns with a meat patty in between — that's where the icon's name comes from. . the hamburger menu is a navigation element that helps save space by unfolding into a side menu or navigation drawer. Ul Terms 71: Ul Terms 13: Hyperlinks y Y is a link that takes users directly from one point to another within the same or a different website. Hyperlinks can take any form: text, images, illustrations, or icons. Traditionally, hyperlinks look like blue underlined text that changes its color after being clicked on. Karim Saif #uikarim However, don't confuse a hyperlink with a link. A link is simply a URL address that refers to a particular web resource users want to access. Ul Terms 181: Ul Terms 14: Menus y Y are navigational elements that open after tapping on a dropdown menu or right-clicking to display a list of contextual choices. Navigation menus include navigation bars, hamburger menus, and other types. The advantage of using menus is that they provide many additional action choices without taking up a lot of screen space. Ul Terms 191: Ul Terms 15: Sliders y Y re an off-the-shelf solution for selecting a value or a range of values. By dragging the handle (also called the "thumb") horizontally, users can set a price range or select a number. Keep in mind that sliders might be considerably hard to control for people with motor disabilities. Ul Terms 201: Ul Terms 16: Loaders 2 r are elements that inform users about the loading process. Progress bars, spinners, and skeletons are the most common ways to indicate to users that there's a delay. Loading. —__—_— To reduce frustration, add an explanation of why users need to wait and indicate how long it may take. Ul Terms 211: Ul Terms 17: Modal Z r are pop-ups that disable the rest of the elements on the page while keeping them visible. File shared Any time a modal is triggered indirectly, it interrupts the flow of whatever the user was doing. Only use them when the benefit outweighs that interruption. Ul Terms 221: Ul Terms \/ 18: Cursors y . / are essential for usability since they reduce ambiguity for how users can interact with content. yr bOo@EQAQAOG beter N At bh I+ © 9 Various types of cursors give users immediate feedback on what they can do with an element in the interface. Ul Terms 231: Ul Terms 19: Tooltips 2 are short, informative messages that can't stand alone — they're always paired with interactive elements such as icons, buttons, or text links. |= & A good tooltip is short, concise, and helpful. The best tooltip is the one you never actually need. Ul Terms 241: Ul Terms 20: Color Wheel y > It’s a circular representation of color hues, showing the relationships between primary, secondary, and tertiary colors. the color wheel contains 12 hues — 3 primary colors, 3 secondary colors, and 6 tertiary colors. Ul Terms 25Enjoy © 2: UX terms 2 The UI/UX Glossary For Designers is a valuable bag of tricks that will teach you to speak the same language as designers. Ready? Let's go! UX Terms 262: UX Terms 1: WCAG . make web content more accessible to people with a wide variety of disabilities. WCAG is based on four principles — major things that web content must be to be considered accessible. W3C Accessibility Guidelines 3 Web Content Accessibility Guidelines. WCAG are used to evaluate whether a website meets specific criteria. UX Terms 272: UX Terms 2: Hick’s law y ¥ The time it takes to make a decision increases with the number and complexity of choices. or Make Choose Easier UX Terms 282: UX Terms 3: Fitts’s Law 4 The time to acquire a target is a function of the distance to and size of the target. Time to Action UX Terms 292: UX Terms 4: Miller’s Law y s The average person can only keep 7 (plus or minus 2) items in their working memory. 7+-2 UX Terms 302: UX Terms a 5— ~ 5: 3-click Rule e The theory that users will abandon a website if they are unable to complete their task within 3 mouse clicks. Home page Page Page One of the main design implications of the 3-click rule is that navigation menus should not require users to click through multiple levels in order to find the information they care about. UX Terms2: UX Terms \/ 6: 5-Second Test y is a user research method that helps you gauge users’ first impressions of a design “Five-second testing is a great way to sanity-check what's most noticeable about your website. | recommend five-second tests for live sites so that you can observe the impression the user takes away from all the calls-to-action they are bombarded with. ” Sinéad Davis Cochrane, UX Manager at Workday UX Terms 322: UX Terms 7: Priming Effect y ¥ Exposure to a stimulus influences behavior in subsequent, possibly unrelated tasks. This is called priming; priming effects abound in usability and web design. Use photos and videos that clearly indicate the usefulness of your product or service. UX Terms 332: UX Terms 8: Cognitive LOA sromsicesiaw y imposed by a user interface is the amount of mental resources that is required to operate the system Make Choose Easier UX Terms 342: UX Terms 9: Aesthetic and minimalist design y : means interfaces should not contain irrelevant information or elements which don't add value. lean up interfaces by getting rid of everything that doesn't help users complete their tasks UX Terms 352: UX Terms 10: Progressive disclosure y Y defers advanced or rarely used features to a secondary screen, making applications easier to learn and less error-prone. Run a usability test to assess time, accuracy success and satisfaction. UX Terms 362: UX Terms Tl: Investment loops y ‘ The brain has a unique system that makes us always look for rewards. Habit-forming products collect information about user behavior and preferences with each session to craft an experience based ona loop of trigger, action, reward and investment. Habit lesting Reward the user when they take actions (eg: purchase, share with a friend, etc..) UX Terms 372: UX Terms 12: Social Proof y Y is a psychological phenomenon where people reference the behavior of others to guide their own behavior. Use the reviews of your customers or users who liked your product, preferably in video form, as it is the future of social proof/proof UX Terms 382: UX Terms 13: Mental models y Y is a psychological phenomenon where people reference the behavior of others to guide their own behavior. Mental model mismatch Before launching your digital product, test your prototypes and conduct a beta test to understand whether the new solution matches your customers’ mental model. UX Terms 392: UX Terms 14: Curiosity gap y ¥ The difference between what the user knows and what he needs to know is the necessary incentive for him to fill the knowledge gap. Join millions of happy customers! Select One of Our Plans: People want to feel safe when making a decision. Use sentences containing the words “Like,” “Can,” or “Do” to build confidence in your speech. UX Terms 402: UX Terms \/ 15: Commitment & Consistency 4 Our prior knowledge exists as mental models, or the patterns and behaviors we expect when encountering an interaction or experience that’s similar to one Break big tasks into simple steps to simplify the process. By doing this, you will reduce the cognitive load required to complete the task. UX Terms 42: UX Terms 20: Exit Points Z » Always provide exit points. Invite users to step out at the height of the experience. Exiting too late can harm the entire experience because it is seen as an unnecessary deviation from the user's main goal. @ View post Undo @ View post 3) Bad Include messages when the task is completed successfully. UX Terms 422: UX Terms 21: Peak-End Rule y . People judge an experience largely based on how they felt at its peak and at its end, rather than the total sum or average of every moment of the experience. Password Reset if you stil ned hp contact Spotty Support, Pay close attention to the most intense points and the final moments (the “end”) of the user journey. UX Terms 432: UX Terms 22: Storytelling Effect = ~ : It is our natural impulse to impose order and give meaning to our observations. Stories reveal details about the characters, places, and events that create an empathic bond with our heroes. Meaningful stories can strike a chord and evoke powerful reactions and deep memories. Use storytelling to convey your point of view to stakeholders UX Terms 442: UX Terms 23: Zeigarnik Effect y y People remember uncompleted or interrupted tasks better than completed tasks. Intermediate 3 to showcase what you are great at vith 5 or more skills are 27x more likely to be discovered in search by recrt Invite content discovery by providing clear signifiers of additional content. UX Terms 452: UX Terms 24 : Pareto Principle 2 states that, for many events, roughly 80% of the effects come from 20% of the causes. The law of vital few and Trivial many UX Terms 462: UX Terms 25 : UX Writing y ‘ is the art of crafting the text that appears throughout the UI of websites, mobile apps, and other digital products. The goal of this text is to intuitively guide the user through the interface. Password ® Password (2 =) UX writers work together with other UX professionals to create a seamless user experience. Indeed, a lot of it is writing microcopy, but it's more than just that. UX Terms 472: UX Terms ??: Gestalt Z » Coming soon an e-book containing concepts UX Terms 48The End Of Part! I'm So happy © > \u lam so glad you arrived here and | hope | helped and added information for you. lam very happy with any comments here and on Twitter and Linkedin. Coming soon an e-book 2 containing concepts I'm Karim Saif, | will help you to develop your skills in the field UI/ UX Design. © @karimsaifo ® @karim-saif Follow Me For More https://znap.link/karimsaifReferences https://www.nngroup.com/ https://www.interaction-design.org/ https://app.uxcel.com https://www.uxpin.com/studio/blog/hook-users-habit-forming-ux-design/ UX Terms 50o—n [al @karimsaif UI/UX o Coming soon an e-book 2 containing concepts nn es © @karimsaifo @® @karim-saif S E-book 2 We'll cover more UI/UX Desin. In part 2 of this ebook. So stay tuned! Follow Me For More https://znap.link/karimsaif Sa mea penance ‘ielaboate # vicomidboske