UX experience for Developers
0 likes49 views
The document discusses user experience (UX) for developers. It outlines that UX involves the overall experience a person has using a product, including all aspects of interacting with a company's services and products. It notes there are three key factors that influence UX - the user, business needs, and technology. The document provides guidance for developers on how to improve UX, such as optimizing loading times, supporting different people through accessibility, and cooperating with UX designers. It emphasizes the importance of high quality, semantic code that supports all browsers and devices users may use.
UX experience for Developers
- 1. UX experience for Developers by Tomasz Abramski (@tomabr) 1
- 2. User Experience the overall experience of a person using a product such as a website or computer application all aspects of the end-user's interaction with the company, its services, and its products. 2
- 3. 3 factors of UX User Business Technology UX Context 3
- 4. People !== Computer How do they think? How does it calculate? 4
- 5. Usability “the extent to which a product can be used by specified users to achieve specified goals with effectiveness, efficiency and satisfaction in a specified context of use” ISO 9241-11 5
- 6. Accessibility Accessibility defines users’ ability to use products/ services, but not the extent to which they can attain goals (usability) Also users 6 WCAG 2.1 Section 508 European Accessibility Act
- 7. What developers can do? 7
- 8. Time optimisation Loading Time Quick Server Responses Light code 8
- 10. Good quality code Support for different people (accessibility) Support all browsers which users use Support for all devices which users use 10
- 11. How? 11
- 12. Cooperation with UX designer 12
- 13. Front-End and WAI standards <figure> <img src=“krakow_src.jpg” alt=“Krakow”> <figcaption>Fig.1 - Krakow, Poland.</figcaption> </figure> Minification, Concatenation, @font-face Image/Media Optimisation, Image/Media Caption, Image Format, Lazy Loads, Sprites, ARIA in HTML, CSS techniques for Accessibility (ex. opacity for h1) Support old browser and webpages on different devices (Modernizr) Semantic tags, HTML tree, H1…H6, H1 and title, meta tag Responsive/Adaptive Web <title> Title of the document</title> … <h1>Title of the document</h1> <a role=“button”>…</a> h1 { opacity:0, position: absolute, left:-10000px} 13
- 14. Best coding practices The best quality and code in computer’s calculations but supported users in context of usage 14
- 15. Animation & Microinteractions Use animation plugins and libraries to support 15
- 16. Remember and feel User Business Technology UX As developer you are also responsible for users experience 16