Web Development
Usability, Aesthetics,
and Good Practices
Sawood Alam | @ibnesayeed
Computer Science Department
Old Dominion University
Norfolk, Virginia - 23508
March 2, 2015
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.
Poor Design
Intuitive Design
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