Samy El Ghoul

Experienced in Chief Creative Officer (CCO)Senior Product Design UX | UI Design

What is User Experience?

User Experience (UX) involves all interactions that a user has with a particular product, system or service. It is the process of enhancing user satisfaction by improving the usability, ease of use, and pleasure provided in the interaction between the user and the product. It is human-centered, data-informed design that assists both the users and the business in achieving their goals. Web UX involves the strategy, research, analysis, design, implementation, measurement, and iteration of a website.

 

  1. The design is based upon an explicit understanding of users, tasks and environments
  2. Users are involved throughout design and development
  3. The design is driven and refined by user-centered evaluation
  4. The process is iterative
  5. The design addresses the whole user experience
  6. The design team includes multidisciplinary skills and perspectives

  • Useful. Your content should be original and fulfill a need.
  • Usable. The design must be easy to use.
  • Desirable. Image, identity, brand, and other design elements are used to evoke emotion and appreciation.
  • Findable. Content needs to be navigable and locatable onsite and offsite.
  • Accessible. Content needs to be accessible to people with disabilities.
  • Credible. Users must trust and believe what you tell them.

  • User Research. Understanding user behaviors, needs, and motivations through observation techniques, task analyses, etc.
  • Usability. Measuring, understanding, and optimizing the extent to which users can achieve goals with effectiveness, efficiency, and satisfaction.
  • Information Architecture. Structuring and organizing information, supporting usability and findability.
  • User Interface Design. Anticipating what users might need to do and ensuring that the interface has elements that are easy to access, understand, and use to facilitate those actions.
  • Interaction Design. Interface layout (wireframe), incorporating user needs collected during user research / testing, defining interface behavior, maintaining consistency throughout ecosystem, etc.

  • Visual Design. The aesthetics or look-and-feel of the user interface.
  • Content Strategy. Writing and curating useful content by planning the creation, delivery, and governance behind it.
  • Accessibility. Incorporating ways for disabled individuals to accesses or benefit from the design (legally governed by Section 508).
  • Analytics. The collection, reporting, and analysis of data on the design.
  • Project Management. Planning and organizing a project and its resources.

 

 

 

User Experience Basics

In this comprehensive online resource, Usability.gov gives an introduction to the fundamentals of UX and what they entail.

VIEW THE GUIDE

What is User Experience?

In this video, the Google Android team gives a high level introduction to UX Design

WATCH THE VIDEO

 

 

 

Information and Guides

 

 


Publications

Nielsen Norman Group

Original research from one of the most respected authorities in UX.

Luke W

Very short, straightforward, and visual articles from a Product Design veteran.

Smashing Magazine

High quality, vetted design content from a collection of experts.

UX Magazine

Large collection of articles about virtually every UX subset.

UX Matters

Evergreen articles dating back to before UX was a thing.

Usability Geek

Wide range of usability and tech related articles and guides.

UX Mastery

A giant guide covering all of the basics for getting started in UX.

52 Weeks of UX

Thought-provoking niche UX topics from Josh Porter and Josh Brewer.

InVision Blog

High quality design articles, guides, and interviews.


 

 

Tools And Resources

 

Quantitative

 

 


Quantitative

Google Analytics

Free, standard yet robust web analytics with wide adoption.

HubSpot

In-depth analytics, A/B testing, SEO, CRO, and more.

Mixpanel

Free, fully custom and integrated mobile & web analytics platform.

Heap

Automated analytics platform that captures every action.

Crazy Egg

Heat mapping, click mapping, scroll mapping, and more.

KISSmetrics

Easily configured funnels and reports based on user behavior.

Optimizely

Javascript-based A/B testing and multivariate testing platform.

Google Optimize

Free A/B testing platform that’s integrated with Google Analytics.


 

 

Qualitative

 

 


Qualitative

UserTesting.com

Fully integrated user testing platform with a participant panel.

UserZoom

All-in-one qualitative research and user testing platform.

Try My UI

Remote unmoderated usability testing panel and platform.

Silverback

Screen recording software for remote moderated and in-person testing.

Screencastify

Free Chrome plugin with screen, tab, and webcam recording.

Google Hangouts

Free and easy way to connect to users and record feedback sessions.

Ethnio

Quickly test where users would click in wireframes and mockups.

Knowbility

Recruit participants with specific disabilities for accessibility testing.

Hotjar

Remote test wireframes, prototypes, and live sites in short sessions.

Usabilla

Collect live user feedback on-site with ratings and forms.

Qualaroo

Quickly test where users would click in wireframes and mockups.

Survey Monkey

Collect live user feedback on-site with ratings and forms.

Optimal Workshop

Remote card sorting, tree testing, and first click analysis with participants.

Usability Hub

Remote test wireframes, prototypes, and live sites in short sessions.

Verify App

Quickly test where the users would click in wireframes and mockups.

Lookback

User research platform with live testing and collaboration features.

Validately

Platform for recruiting users, running tests, and analyzing results.

Loop11

Platform for testing wireframes and prototypes, usability, and accessibility.


 

 

Diagrams

 

 


Diagrams

Gliffy

Free Chrome plugin for drawing diagrams, flowcharts, and more.

Google Drawings

Create, share, and collaborate on drawings in your Google Drive.

Coggle.it

Visually map out concepts during brainstorming sessions.

XMind

Free tool for quick and easy to edit Mind Mapping.

Keynote

Great for creating personas, task and competitive analyses, etc.


 

 

Wireframes

 

 


Wireframes

Balsamiq

Basic, straightforward wireframe tool with web and desktop versions.

Axure

Robust interactive wireframe tool with prototyping functionality.

Omnigraffle

Robust diagram and stencil tool that can be used for wireframes


 

 

Mockups

 

 


Mockups

Sketch

Streamlined, flexible interface design tool that is optimized for web.

Photoshop

Bitmap editing tool that can be used for image and interface editing.

Illustrator

Vector-based design tool that is ideal for scalable elements like icons.


 

 

Prototype

 

 

Prototypes

InVision

Prototyping, collaboration, and management tool for teams.

Adobe XD

Design, interaction, and prototyping tool from Adobe.

UXPin

Wireframe, prototyping, and collaboration tool in the browser.

Framer

Code-based prototyping with interactions and animations.

Marvel

Prototyping, collaboration, feedback, and design tool.

Webflow

Visual, responsive design tool that produces code.

Flinto

Lightweight prototyping tool for Mac and iOS devices.

Origami

Free prototyping tool that is used and developed by Facebook.

Avocado

An open source prototyping toolbox, built by IDEO on top of Origami.


 

Accessibility

 

 


Accessibility

Sim Daltonism

Simulate different forms of color blindness while designing.

Tota11y

A toolkit for simulating how a site works with assistive technologies.

aXe

A plugin for evaluating the accessibility of any web site page.

Web Accessibility Toolbar

A toolbar for evaluating various aspects of accessibility.

Accessibility Inspector

Accessibility testing tool that is pre-installed on all Macs.

W3C Evaluation Tools

A list of tools for evaluating accessibility, from the W3C.