Web Development

Usability, Aesthetics,
and Good Practices

Sawood Alam | @ibnesayeed

Computer Science Department
Old Dominion University
Norfolk, Virginia - 23508

Usability

“Usability is the ease of use and learnability of a human-made object.” -- Wikipedia

“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

Components

  • Learnability
  • Efficiency
  • Memorability
  • Errors
  • Accessibility
  • Satisfaction

Navigation

  • Menus and sub-menus
  • Breadcrumbs
  • Pagination
  • Section links
  • Cancel/back link in forms and wizards

Guides

  • Quick help
  • Labels and placeholders
  • Validation errors/warnings
  • Progress indicator
  • Highlight asynchronously updated elements

Bite-size

  • Logically group long menus
  • Group long forms or convert into wizards
  • Provide filters/sorters/groupers for long lists

Intuitive Interface

  • Do not misuse elements
  • Use commonly used visual components
  • Meaningful and unambiguous icons
  • Right element in the right place
  • Highlight "call for action" elements
  • Utilize meaningful colors
  • Inspiration from real world objects

User Feedback

  • Use Like/Rate/Vote widgets
  • Avoid asking free-form text entry and provide options to choose from

Accessibility

  • Keyboard navigation
  • Human and machine readable
  • Screen-reader friendly
  • Graceful degradation
  • WAI-ARIA

Adapt

  • Know your audience and their devices
  • Meaningful messages
  • L10N and I18N
  • Natural language for humans
  • Structured language for machines

Aesthetics

Aesthetics in graphic design refers to the visual attractiveness and cohesiveness of work.

Beauty arises when qualities like color, form, and shape are combined by utilizing the elements and principles of design in a way that pleases the aesthetic senses and the intellect.

Simplicity

Poor Design

Intuitive Design

Typography

Size and style

  • Font-size and units
  • Font-weight
  • Text-decoration

Color

  • Texts
  • Links and their states
  • Borders
  • Background
  • Contrast, brightness, opacity
  • Adobe Color CC

Graphics

  • Background image/pattern
  • Icons/sprites
  • Logo/branding
  • Content images

Layout

  • Horizontal and vertical regions
  • Fixed/flex width
  • Columns and grids
  • Postion and z-index
  • Float
  • Alignment

Spacing

  • Margin
  • Padding
  • Indent
  • Line height

Good Practices

Good development practices are proven techniques used by developer community to increase maintainability, collaboration, and ease of development while decreasing the possibility of failures and common mistakes.

Organization

  • Logical directory structure
  • Meaningful file/folder names
  • Follow community conventions
  • Use scaffold generators (if available)
  • Not just files, but organize code inside as well

Track Your Changes

  • Revision control system
  • Feature branches
  • Remotes are life saver
  • Version numbering

Dependency and Build Management

  • Language/framework specific dependency and build management tools
  • Improves portability
  • Easier to setup the environment and collaborate
  • Use preprocessors such as Sass or Coffeescript

Tests

  • Full TDD only if necessary
  • Basic unit/integration/UI tests for complex and extensible features
  • Tests are life savers
  • Use code linting utilities

KISS

  • Keep it simple (at least initially)
  • Flexible to evolve
  • Not too flexible to over-complicate
  • Scale is a problem that a developer would love to have

Naming

  • Meaningful and logical names
  • i, j.. (or ii, jj...) are common iterators
  • Not too short
  • Not too large
  • Consistent letter casing
  • Follow language/framework conventions
  • How To Write Unmaintainable Code

Commenting

  • Good variable naming reduces the need for comments
  • Add only adequate comments
  • Too much commenting makes code hard to read
  • Don't comment obvious operations
  • Always comment tricky bits
  • Use "TODO" comments for deferred implementations
  • Add exhaustive and structured comments when building libraries to generate documentation automatically

Separation of Concerns

  • HTML for document structure
  • CSS for styling
  • JavaScript for interactivity
  • Avoid in-line JavaScript and CSS
  • Use unobtrusive JavaScript
  • Do not mix SQL, markup and business logic in a single file

CSS Selectors

  • IDs for unique elements on the page
  • Classes for elements sharing similar functional or styling nature
  • Consider CSS specificity
  • Avoid deeply nested selectors

Architecture

  • Split application and infrastructure in logical tiers
  • It scales well and components can be reused
  • Easier to maintain and collaborate
  • E.g., Model-View-Controller (MVC)

Abstraction

  • Utilize template system
  • Use nested templates if necessary
  • Utilize phrase system (even if you do not plan to support I18N)
  • Easier to change everywhere reliably
  • Modules encourage/enable reuse
  • Don't Repeat Yourself (DRY)

Convention Over Configuration

  • Have reasonable defaults
  • Included batteries, but replaceable
  • Improves developer productivity
  • Easier to collaborate due to common conventions

OOP and ORM

  • Object Oriented Programming brings logic in the object space
  • Object Relational Mapping (ORM) brings data in the object space
  • Encourages convention over configuration
  • Enables database agnosticism

Data Storage

  • Relational database
  • Porable file based relational database
  • Schemaless database
  • Key-vale store
  • In-memory database

Ajax

  • Asynchronuous JavaScript and XML
  • Imporves user experience
  • Essential for data-rich applications
  • Beware of using resources form other domains (Cross Origin restrictions may apply)

Libraries/Frameworks

  • Client-side libraies/frameworks
  • Server-side libraries/frameworks
  • UI libraries

REST

  • REpresentational State Transfer (REST) is a software architecture
  • Verbs are finite, reuse general verbs as methods (such as GET and POST)
  • Use nouns for resources in the URI, they are infinite
  • RESTful APIs and URIs

Semantic Markup

  • Make your web pages meaningful for machines
  • Describe the resource using semantic markup
  • Encourage Linked Data
  • schema.org

Links

  • Absolute URL
  • Scheme-relative URL
  • Absolute path
  • Relative path
  • Segment links
  • Shebang links

Rule Them All

  • Mobile first
  • Responsive
  • HTML5 Apps
  • Native Apps

Deployement

  • Containers
  • Combine and minify
  • Utilize compression
  • Utilize caching and CDNs

Validation and Escaping

  • Validation and error-checking is necessity not a choice
  • Do not trust anyone (not even your grandma)
  • Client-side validations are quick and help the user, but not reliable
  • Always escape user input

IDE vs Text Editor

  • IDEs increase productivity on the cost of code learning
  • IDEs are heavy and may not be available in every environment
  • Use programming text-editors
  • Avoid using simple text-editors for regular development

Sawood Alam

ibnesayeed@gmail.com