Web Interface Design Patterns

Slides:

Advertisements

Similar presentations

Behzad Samin 0 An End-to-End Overview of a RESTful Web Service.

Advertisements

Centre for the Enhancement of Learning and Teaching Supporting & Enhancing Online Teaching & Learning by Catherine Ogilvie Centre for the Enhancement of.

Chapter 11 Designing the User Interface

Alternate Software Development Methodologies

AN OVERVIEW BY JAMIE STARKE The Role of Prototyping.

Redesigning the Graphical Interface of the CreativeEDU Web Application By Ulysses Lamont Cannon & Hínár György Polczer INLS S ummer 2006.

Using LibGuides as a Web 2.0 Content Management System & Collaboration Tool for Engineering Librarians Richard Bernier – ASEE Annual Conference & Exposition.

Law Enforcement Resource Allocation (LERA) Visualization System Michael Welsman-Dinelle April Webster.

Notion of a Project Notes from OOSE Slides - modified.

COMP1007 Introduction to Requirements Analysis © Copyright De Montfort University 2002 All Rights Reserved COMP1007 Introduction to Requirements Analysis.

The Co-op Database Project Who It's For At Northeastern University cooperative education is an integral part of the education experience. There is a continuous.

Web Design and Patterns CMPT 281. Outline Motivation: customer-centred design Web design introduction Design patterns.

TECHNOLOGICAL ENABLERS TO ASSIST YOUR LIBRARY'S MARKETING STRATEGIES: THE POWER OF SOCIAL MEDIA PRESENTED BY MS MOSHIANE RAMAUBE MS MANDISA LAKHENI.

Forms and Applications Web Design Professor Frank.

By: Toms Linnes Mrunal Patel.  Universal  With qooxdoo you build rich, interactive applications, native-like apps for mobile devices light weight single.

MOOD FOOD. PROMOTIONAL WEBSITE Front end of a cross-module project between Advanced Rich Internet Applications and Advanced Client Side Scripting. Promotional.

10 Usability Heuristics for User Interface Design.

Kaitlyn Crawford Marco Lawrence Joanne Marston Supervised by: Hussein Suleman Heritage and Learning: An Online Rock Art Education Tool.

R & D in Continuing Education ALISE Conference, 2005 Fiona Black and Judy Dunn.

Technovation Incorporating Feedback Week 4. Check-in: paper prototype By now, your paper prototype should be complete, so that you can begin creating.

The Collaborative Reference Database Project of the National Diet Library of Japan By Kiyoko MURAKAMI Assistant Director Domestic Materials Acquisition.

Incorporating Feedback Lesson 5 0. Check-in: paper prototype By now, your paper prototype should be complete, so that you can begin creating your app.

Libraries and APIs CMPT 281. Overview Basics of libraries and APIs Rich internet applications Examples – Scriptaculous – JQuery.

1 Human-Computer Interaction Web Interface & Natural Language.

The Web-based Training Library and Lawson Learning Paula Cartwright Training Manager March, 2002.

Mary Ganesan and Lora Strother Campus Tours Using a Mobile Device.

TESTING AND MAINTAINING A WEB SITE Presented by: Robert O'Neill student number:8 Acknowledgement: This information is primarily gathered from: Web Design,

PARTNER SUMMIT 2014 CrownPeak Customer Success and Product Teams

Microsoft Cortana for App Developers

Summon® 2.0 Discovery Reinvented

Global Forest Information Service

Understanding how MIT faculty, students, and researchers work

Suggestions for Next Steps

Digital media & interaction design

System Design Ashima Wadhwa.

Introduction to Redux Header Eric W. Greene Microsoft Virtual Academy

Survey of Web Design Tools

User Interface Design and Usability jQuery, jQuery UI & jQuery Plugins

Web Development A Visual-Spatial Approach

JavaScript is a language that is used on any website to add tags, improve the function of the website and allow users to interact. When the development.

Portals for Microsoft Dynamics 365

Migrating Oracle Forms Using Oracle Application Express

Enhancing the student learning experience with a slice of Piazza

User Interface / User Experience Demo

Dilbert Scott Adams Manage It! Your Guide to Modern, Pragmatic Project Management. Johanna Rothman.

Medium-Fi Prototype Inclusive Design.

SOCIAL MEDIA MARKETING

THE CURRENT STATE OF ICT WEB 2.0. The term "Web 2.0" was first used in January 1999 by Darcy DiNucci describes World Wide Web sites that emphasize user-

Welcome: How to use this presentation

Chapter 14 Human Technology Interface

Good Teaching Principles

Modern web applications

2018 Product Roadmap 2018 Q Q Q Q4 Features: • New login screen • Multi-user UI Features: • New login screen • Multi-user UI Features:

Enhancing the student learning experience with a slice of Piazza

The Role of Prototyping

Information Storage and Retrieval

7.2.1 Formative Performance Task 1 SUBSTITUTION

Prototype using PowerPoint

Next-Gen GUI for Web Services John D

Introduction UI designer stands for User Interface designer. UI designing is a type of process that is used for making interfaces in the software or the.

Modern web applications

IESBA Meeting New York, NY December 3-5, 2018

ASP.NET MVC Web Development

Team #3: Interactive Medium-Fi Prototype

Pife:Med-Fi Prototyping

User Interface Design In Windows using Blend.

transforming living spaces

Shane B., Esther K., Curtis S., Jennifer W.

CMPE 280 Web UI Design and Development April 16 Class Meeting

UML Design for an Automated Registration System

Presentation transcript:

Web Interface Design Patterns CSCI 577b Individual Research Presentation Mark Villanueva April 25, 2012

Overview What are User Interface Design Patterns? 6 Guiding Principles and Examples UI Design Patterns in Action – LEMA Web App

User Interface Design Patterns Good design for the modern web is difficult UI Design Patterns address web usability problems: Navigation Organization Interaction Patterns provide a springboard for rapid prototyping rich internet applications

Six Principles of User Interaction 1. Make it direct 2. Keep it lightweight 3. Stay on the page 4. Provide an invitation 5. Use transitions 6. React immediately To that end Designing Web Interfaces

1. Make it direct Respond to direct user input Perform operations within the context of the page Object Selection

2. Keep it lightweight Make it easy for the user to perform actions Tools are readily available Always Visible Tools

Maintain user flow Limit page refreshes Input Overlay 3. Stay on the page Maintain user flow Limit page refreshes Input Overlay

Guide the user to features Give instant feedback Hover Invitation 4. Provide an invitation Guide the user to features Give instant feedback Hover Invitation

5. Use transitions Communicate relationships between objects and actions Focus user attention Lightbox Effect

6. React immediately Lively response enhances user experience Lack of responsiveness can be perceived as sluggish or broken Live Suggest

Putting it all together LEMA Course Profile List Live Search Always Visible Tools Virtual Paging Dynamic Invitation Implementation jQuery jQuery Datatables plug-in Twitter Bootstrap libraries

In closing… Patterns are not the final answer for UI Template still requires implementation Use with caution Consider rapid prototyping and stakeholder feedback Formalizing these patterns promotes dialogue among all stakeholders Growing field, check it out or contribute

Sources http://developer.yahoo.com/ypatterns/everything.html http://designingwebinterfaces.com/ http://www.flickr.com/photos/designingwebinterfaces/ http://greenbay.usc.edu/csci577/spring2012/projects/team12/Symfony/web/app_dev.php/Scheduler/CourseProfileList/ B. Scott and T. Neil, Designing Web Interfaces: Principles and Patterns for Rich Interactions, O’Reilly, 2009. http://jquery.com/ http://datatables.net/ http://twitter.github.com/bootstrap/