Transcript: nobody! it was always there... "It doesn't matter what you think, it matters what your users think" time for a little bit of theory... what are the elements of User Experience? mockups / wireframes What you really need to know about UX Design 1. UX Design Is Not One Size Fits All 2. Can’t Be Directly Assessed With Traditional Metrics 3. Not the Same Thing as Usability Ok, but do we really need UX designers? Thank you information design question? site map Old YouTube high fidelity 2. User centered design YouTube 2010 User experience design won’t work in every situation. We are all different. What works for one person might have the opposite effect on another. but... low fidelity Agenda: What do human limitations mean for systems design? How can systems be designed to help aid these limitations? interface design 3. ux designers vs ui developers interaction design how a person feels about using a system user needs better code editors "USER EXPERIENCE" How can systems be designed to help aid human limitations? The Human Factors field began to emerge around World War II as researchers began to realize that humans interacting with technical systems was no trivial endeavor. Operators using technical systems, even when their lives depended upon accurate and reliable results, eventually hit obvious human limitations. Who invented UX? Don Norman, Apple inc. 1. What does UX stand for? UX addresses how a user feels when using a system, while usability is about the user-friendliness and efficiency of the interface. and then in the 1990s The Elements of User Experience navigation design What does UX stand for? saltshaker or peppershaker? use case You can’t determine the effectiveness of a user experience design based solely on statistics such as page views, bounce rates and conversion rates. information architecture Tomasz Rupik, UX Team visual design UX = User eXperience user friendly operating systems interacting with technical systems became a matter of life and death during II world war. army helped to promote it easier to undestand Blood and heart disease test results requirements 4. examples of web front-end technologies
Transcript: NICE TO HAVE VISUAL DESIGN AGENDA REMOVE ACCESSIBILITY www.synchromind.eu NICE TO HAVE ACTION POINTS MUST HAVE CONTENT STRUCTURE IDEAS NAVIGATION MUST HAVE www.synchromind.eu 2019 READABILITY REMOVE AGENDA VISUAL ASPECTS CONTENT STRUCTURE USER INTERACTION AGENDA VISUAL ASPECTS CONTENT STRUCTURE USER INTERACTION AGENDA CONTENT STRUCTURE CONTENT STRUCTURE CONTENT STRUCTURE The content is laid out in one column. Make the components smaller and arrange them in two columns. The content is laid out in one column. Make the components smaller and arrange them in two columns. Reduce the white space between content. The white space gives an impression of missing content. The white space gives an impression of missing content. Reduce the white space between content. Align the headers and make sure to use the same font size, type and either small or capital letters. The headers are not aligned. The headers are not aligned. Align the headers and make sure to use the same font size, type and either small or capital letters. THE CONTENT'S ORDER THE CONTENT'S ORDER Rearrange the content's structure in SERVICES section. Rearrange the content's structure in SERVICES section. THE CONTENT'S STRUCTURE THE CONTENT'S STRUCTURE Separate the therapy work information from the general appointment in CONTACT US section. Separate the therapy work information from the general appointment in CONTACT US section. 1 Move the text to the left side next to the animation. 2 Move the animation below the text. The animation is on top of the text and it may distract the user. The animation is on top of the text and it may distract the user. 1 Move the text to the left side next to the animation. 2 Move the animation below the text. Adjust the space between each section. Make it even. Adjust the space between each section. Make it even. An equal space between different sections improves the content's readability. An equal space between different sections improves the content's readability. Display each position separately and switch them horizontally every few seconds. SERVICES OPTION 1 Display each position separately and switch them horizontally every few seconds. SERVICES OPTION 1 Display each position in a separate line. SERVICES OPTION 2 SERVICES OPTION 2 Display each position in a separate line. UX CTO As A Service HR Change Security Scale-up Meditation & Healthy Work Project Start-up IP Sales & Marketing NAVIGATION NAVIGATION NAVIGATION The option to access the menu allows users to easily navigate through the website. Add humburger menu option. The option to access the menu allows users to easily navigate through the website. Add humburger menu option. 2 On the bottom of the page add a button to go back to the top. 1 At the beginning of every section add arrow down to go to the next section. Visual cues help users to deter their next step while navigating through the website. Visual cues help users to deter their next step while navigating through the website. 2 On the bottom of the page add a button to go back to the top. 1 At the beginning of every section add arrow down to go to the next section. "Add your email address" In the CONTACT section add placeholder tag. email@example.com firstname.lastname@example.org email@example.com "Add your email address" In the CONTACT section add placeholder tag. MENU 1 Freeze the menu to keep it visible through scrolling down the page. 2 Add an icon/image above each position in the menu. 3 Increase the font size. 1 Freeze the menu to keep it visible through scrolling down the page. 3 Increase the font size. MENU 2 Add an icon/image above each position in the menu. + A carousel slider shows the progress while scrolling through the page. - Only 1% of the users use carousel slides. Recommendation: Keep it! + A carousel slider shows the progress while scrolling through the page. - Only 1% of the users use carousel slides. Recommendation: Keep it! VISUAL DESIGN VISUAL DESIGN VISUAL DESIGN www.synchromind.eu - LAYOUT - - LAYOUT - www.synchromind.eu 1 Make a smooth transition between different background sections. 2 Merge background sections with each other by preserving the color scheme. 1 Make a smooth transition between different background sections. 2 Merge background sections with each other by preserving the color scheme. Break the background border with small curves on both sides of the page. Break the background border with small curves on both sides of the page. Or place the borders with a small angle. Or place the borders with a small angle. Instead of numbers use images/icons related to individual section. IMAGES/ICONS Instead of numbers use images/icons related to individual section. IMAGES/ICONS DIRECT WAYS OF INTERACTION DIRECT WAYS OF INTERACTION Use standard design elements (buttons) that suggest and encourage interaction. Use standard design elements (buttons) that suggest and encourage interaction. view all view all Add a visual cue to encourage users to interaction. (click for more or view all) Reduce the amount
Transcript: huddle Mrs. Rossi huddle to crowd together crowd huddle separate
Transcript: ADMINISTRATION SYSTEM FOR A NEWS BLOG Introduction 1 BLOOM 2 3 NEWS AND UPDATES AUTHORS PRINT NEWSPAPER/DIGITAL NEWSPAPER GOALS GOALS OF THE STUDY EFFICIENT, EFFECTIVE, AND SAFE INTERACTION WITH SYSTEM ACHIEVE ACHIEVE AUTHORS AND READERS ATTRACT ATTRACT A USER FRIENDLY AND EASY TO NAVIGATE WEBSITE DEVELOP DEVELOP USABILITY EFFICIENCY PORTABILITY NON-FUNCTIONAL REQUIREMENTS NON-FUNCTIONAL REQUIREMENTS RESEARCH QUESTIONS RESEARCH QUESTIONS LOSTNESS LOSTNESS RESEARCH QUESTION: Which alternative use case is the best in lostness? KLM KLM RESEARCH QUESTIOON: Which alternative use case is the best in KLM? RESEARCH QUESTION: HEURISTIC HEURISTIC Which alternative use case is the best in heuristic? RESEARCH QUESTION: SUS SUS Which alternative use case is the best in SUS? USE CASES: USE CASE SELECTION ADMINISTRATION ATICLE MANAGEMENT PROCESS MANAGE ARTICLES, VIEW STATISTICS AND RESPOND TO COMMENTS SUBSCRIBE RESULTS RESULTS USE CASE 1 = ADMINISTRATION ATICLE MANAGEMENT PROCESS USE CASE 2 = MANAGE ARTICLES, VIEW STATISTICS AND RESPOND TO COMMENTS USE CASE 3 = SUBSCRIBE LOSTNESS KLM ALTERNATIVE 1: 2,46 ALTERNATIVE 2: 2,47 ALTERNATIVE 3: 3 HEURISTIC HEURISTIC ALTERNATIVE 1: 84,16 ALTERNATIVE 2: 75 ALTERNATIVE 3: 73,3 SUS SUS THANK YOU!!! ALTERNATIVE 1!!! WINNER
Transcript: Name: Danielle Brown Age: 35 Marital Status: Married Location: Hong Kong Frustrations Personal information She wants to buy things that fit her body better She wants to be able to find clothes in different styles She wish that she can save the hassle of returning clothes when it doesn't fit She wants to slim down eventually Goals She has a iphone 6 which she uses all the time She uses a PC at work Macbook at home Tech level - Computer use only for go social media and sometimes youtube and news Work long hours with high focus Used shop online for almost all her clothes but now no time She likes to socialise with friends and go out after work She cannot find clothes in Hong Kong most of the time She has less time nowadays to shop and lost interests in shopping She can hardly find clothes that fit She dislike returning clothes that doesn't fit from shopping online Danielle is a grade school teacher with over 10 years of experience. She is of Sri Lankan descent, born and raised in Hong Kong. She went to international school in Hong Kong and for university in the UK and US. After her study in education she moved back to Hong Kong and has been living in Hong Kong since. She is now married to her English husband Chris whom is also a teacher. Danielle and her husband work together and get up very early in the morning, and her day usually ends around 4pm. She enjoys team sport activities and is in a netball team with some of her colleagues Danielle is a US size 20 and has difficulties looking for clothes in her size in Hong Kong. She has family and friends in the UK and US so when she buys online, it is usually to be sent to them, and they will bring the goods back to Hong Kong for her. Key Attributes "I just want to buy clothes that fit, even it's from online" Personal Profile Computer Use
Transcript: UX In Design What is User Experience Design? What is User Experience Design? User experience design is a human-first way of designing products. As is found on Wikipedia: User experience design (UXD ) : is the process of enhancing customer satisfaction and loyalty by improving the usability, ease of use, and pleasure provided in the interaction between the customer and the product. What is the purpose of UX? In other words, UX design is the process of designing (digital or physical) products that are useful, easy to use, and delightful to interact with. It's about enhancing the experience that people have while interacting with your product, and making sure they find value in what you're providing. What is the purpose of UX? Why is UX design important? Why UX design is so important in agile software development. The objective of UX design is to create a frictionless and enjoyable experience for the user. UX designers boost customer satisfaction by providing better usability, accessibility and pleasure in the interaction with every aspect of a product. Why is UX design important? Are UX designers in demand? Demand for UX professionals has never been greater. The number one in-demand role for 2018 is a UX designer, according to the Onward Search Digital, Creative and Marketing Professionals Salary Guide. ... “And that's why demand is consistently on the rise for UX designers and other professionals in this field.” Are UX designers in demand? Design Thinking Process Empathise Design Thinking Process Define (the Problem) Ideate Prototype Test
Transcript: QC276 - File lock issues with IIS and post-build event (access denied on copy) QC282 – Add KO.Mapping to UX template QC284 – Model with relationships results in incorrect controller generation QC285 – Wijmo themes and images paths (now at Wijmo 2.3.9 - excel filter fixed) web service reference including WFContextInjection and WSCF.red & setup app. config initialize DbContextAdapter and bootstrap model in WebApi & global asa config(s) Refactoring Fixed UX Template Guidance Automation UX Template Updates Sprint 2 QC281 - Model Action Validation filter enhancement QC281(side effect) - If the above issue is corrected, the hope is that while using Data Annotations (such as required) a related error will not occur in WebApi UX Template Refactored to use GAX Proposed QC(s)
Description: The sky’s the limit. Boost your new sales initiative into orbit with an engaging and compelling SKO presentation. This template features a effective sales kickoff theme that makes it easy to be engaging. Like all Prezi SKO templates, it’s fully customizable with your own information.
Description: Storytelling is at the heart of great service. Use this stunning, customizable business presentation template to highlight employees who do exceptional work or position your customers as the heroes of your business.
Description: Add some color to your quarterly business review with this vibrant business presentation template. The bold visuals in this business template will make your next QBR a memorable one.
Description: Catch the eye and engage the imagination with this cool-looking Prezi proposal template. The bold, bright design and highly dynamic theme all but guarantee success for your next sales or marketing proposal. All Prezi presentation templates are easily customized.
Now you can make any subject more engaging and memorable