User interfaces abstract away the messy stuff to just give us what we care about.
User Interface Timeline
- Punchcard Interface
- Command Line Interface
- Graphical User Interface
- Gap between input and output is decreased
- Much more direct and less cryptic
- Natural User Interface
- Content is becoming the interface
- If you want to see something, just click on it
- Gestures are used to make the interface more natural and intuitive
- Less visual representation of things that we already know
- Make use of skills learned through a lifetime of living
- Guessable, physical and realistic gestures
- Can basically make anything into an interface
- First Person User Interfaces
- Allow people to digitally interact with the world as they are currently experiencing it
- Interaction through always-on sensors
- Instant, relevant output based on current position or based on who or what is near you
- Use cases:
- Navigate the space around you (think navigation)
- Rearrange your grocery list based on the store you are in
- Put yourself into a building using your phone’s sensors
- Collect a list of all the places you were in a day and tell you how long they were there
- Augment your immediate surroundings
- Interact with nearby objects or people
- Make contacts
- Check deposit
- Barcode scanning to buy (ShopSmart)
- Flow by Amazon (whoa…)
- Translation (word lens… whoa again…)
- card.io (scans credit card to quickly add it to payment info)
- Facial recognition and facial detection
- Ok cool… but this sucks on phones. Small screen and you look like a geek
- NFC makes it so you don’t have to have your phone out and up
- HUDs in a car
- Google Glass
- Need design help
Jason McConnell – Microsoft
- Testing on IE is not easy
- XP is still 40%
- IE8 is the highest browser on XP
- Some companies need IE7
- Windows 7 can run 8,9 and 10 but only one version can be installed
- IE6 is almost gone, but you still need to test that.
- The developer environment has completely changed
- Developers have been excluding IE
- How can we reduce the burden of testing on IE?
- Provide a single place to guide Front end developers
What is it?
- Site scanning tool
- Code analysis of compatibility issues
- Check for framework and library issues
- Also a local scanning version
- Access to virtualized versions of IE
- Partnership with Browserstack.com
- 3 months of service
- All browsers available on their Windows Servers
- Refreshed and increased platform support of VMs
- Parrallels, VM Ware, VirtualBox: Mac, Linux and Windows
- Special offers with partners like Parallels
- Best practices and guidance
Jason Lengstorf – Copter Labs
- If we are not using realtime, our app is already too slow
- Social media has spoiled us. We want our information as it is happening.
- This still isn’t good enough. We need it to be instant. Realtime.
- Zero latency (as close as possible)
- On the web
- Browser refresh
- Requires the user to know there is new information and physically click
- Not realtime
- Same thing as browser refresh, but doesn’t require a whole page reload.
- Not realtime either
- Automated AJAX refresh on a loop
- Not efficient
- No need for user-triggered event
- High overhead
- Closer, but still not realtime
- Keeps the request open longer
- Reduced overhead
- Still not realtime
- HTTP won’t cut it
- Requires full duplex client-server communication
- No asking on the client side for new data
- Virtually no overhead.
- Imperceptible latency
- This is realtime
How Do WebSockets Work?
- Client performs handshake
- Client requests upgrade to websocket communication
- Server sends closing handshake to let the client know they are connected via websockets
- Browser support
- All modern browsers support, but not legacy browsers
- Lack of support does not cause HTTP error.
- Can use modernizer to detect WebSocket support
- Polyfills can add support for most browsers
- Flash is a good fallback for WebSockets
What is available?
- Node.js + socket.io
- Steep learning curve
- Difficult maintenance
- Cannot use other server side languages
- Platform as a service
- Take care of fallbacks for you
- Don’t have to worry about maintenance
- Simple to implement
- Supports exists for multiple programming languages
How Can We Use This?
- Tracking active visitors
- Managing inventory for ecommerce
- Collaborative editing
- Social media
- Shared to-do list management
Bruce Lawson – Opera Software
The web is responsive. The first website was responsive. We chose to make the web unresponsive. We chose as an industry to limit the responsiveness of the web.
It is more expensive to make a site responsive after the fact. Much cheaper to build it responsive from the ground up.
- Problem to control presentation with HTML
- It’s a blunt instrument
- Solution from W3C in CSS3: css device adaptation @viewport
- Can also give it a min and max width
- Display: flex
- flex-flow: row (or column)
- flex – ratio of the item to the total flex number of all the items (basic grid model)
- Justification options
- Can set an order without changing the order in the markup
- Beware of the 2009, 2011 syntaxes
Media Queries Level 4
- Hover media query – does this browser support hover
- Pointer media query – detect if the point is coarse, fine, or none (for targeting touch screen vs. mouse vs. speech/keyboard input)
- primary pointer is the least capable pointing device, so it will be difficult with a touch screen laptop with a mouse
- Hardware agnostic representation of input devices
- Pointerdown, pointermove, pointerup, pointerover, etc. Mimics the mouse events. Easy migration from mouse events to pointer events.
- No representation for multiple pointers
- Abstract user inputs regardless of hardware device.
- Example: control+z on windows, command+z on mac, shake on mobile, sends an “undo” event
- Scalable Vector Graphics
- You can embed media queries inside of the SVG file
- New image format that is 26% smaller than a PNG
- Not supported in any browser but Chrome and Opera
- background images fallback
- Example: background-image: image(“wavy.webp”,”wavy.png”)
- Example: background-image: image(“whatever.webp” format (‘webp’), “whatever.jpg”);
- Cannot do it yet with content images (should be something in the HTML spec like they have for the video tag)
- HTML5 Video element allows for media queries embedded in it
- Responsive Images Community Group – responsiveimages.org and @respimg
Jason Lengstorf – Copter Labs
- The way you are using your data is probably not the only way the data can be used. Others may have awesome ideas of how to use that data.
- If other apps use your APIs, you have a broader reach and more exposure.
- Take you from “the [blank] app” to “the company that owns [blank]”
App + API
- Main offering is an app
- Users interact directly with the company
- Revenue is driven by app purchases, subscriptions and ads.
Create a Platform
- Calls SaaS or PaaS
- Skip the app all together and provide a service
- Users don’t know
- Revenue is driven by companies who use the service via subscription or other usage fees
What is an API?
- Exposes methods for developers to read, create, modify and/or delete data from within their projects.
- Abstracts data from the presentation
What is Rest?
- Architectural style – All REST APIs follow the same architecture
- Provides access to resources via a URL
- Stateless – server does not remember anything. Send all the data in each request.
- Layered System – Must pass through many servers
- Code on Demand (optional)
- Uniform Interface
- Identification of resources
- All exposed resources must have URL
- Manipulation of resources
- Enough info is given in the response to allow the client to modify or delete a resource
- Self-description messages
- Message includes information that allows the client to identify how to interpret the response
- Hypermedia as the Engine of Application State (HATEOAS)
- All responses include hypertext to allow navigation
- clients should be able to navigate the API without documentation
- Most don’t do this
Follow the basics
- Choose simple, easy to read identifiers
- Use the correct HTTP method for requests
- GET – get something
- POST – add something new
- PUT – update/modify (but not exactly). Completely rewrites existing resource
- DELETE – delete something
- HEAD – get header
- OPTIONS – get options
- TRACE – traceroute
- CONNECT – SSL (won’t be used in an API)
- Return the correct status codes
- 100 range: informational
- 200 range: something went right
- 300 range: multiple choices
- 400 range: client error
- 500 range: server error
- Provide links to explore the API further
- Write documentation as part of the API building process
In the past 2 years, people have become more accepting of online learning, as opposed to (or in conjunction with) traditional classroom learning
Technology has finally started to catch up and the content delivery is finally up to standards.
Content of courses are driven by a mix between what the consumers/subscribers want and what the authors/experts think is relevant.
Online education is complementary to higher education. Online resources can be used in between classes in higher ed to keep the student learning while they are not in class.
Study groups have started to spontaneously spring up around online learning classes. They want to try to leverage this social aspect of their members in the future.
Ryan McGinty – EffectiveUI
Suanne Hall – EffectiveUI
Why Experience-Driven Development?
- Can never guess how users will interpret products based on your own assumptions and experiences
- Measurable returns
- Reduce development costs and inefficiencies
- Long lasting and loyal customer relationships
- Generate more conversions
- Make more money
- Cannot be only “user-friendly”. Must also be
- etc. etc.
- Users measure success by emotional response to the design
- Rare to give a feel that real people, with emotions, created a site, but it is very effective
Contract-First Development & Wireframe Deconstruction
- Design is implemented with continuous input from development
- User needs, budget, business needs and system constraints all come into play
- Contracts are used to further describe rules
- Contracts provide baseline for testing
- Contracts can be used for code generation and validation
Balancing Software Contracts with Experience-Driven Development
- Create a dialog around the sample responses coming from the back-end server. Start asking questions about the data that need to be answered for the front-end design.
- Design isn’t simply “chucking over the fence” to development, but involving them in the process of designing from the beginning to make technology decisions early in the design process.
Molly Holzschlag – Knowbility, Inc. – molly.com
- HSL color
- Color is not the same in web as it is in print. Additive color vs. subtractive color.
- Color is subjective across different machines.
- Never rely on color alone.
- Perception of color based on:
- Culture influences including:
- “Color is a mix of science and art, technology and human emotion.”
- 4 times more likely to buy from a site that is in native language
- 100 million people access Internet in language other than English
- over 50% of web users speak a native language other than English
- Users stay on site twice as long if a website is in native language
- Takes a user 9 seconds or less to determine if he/she will stay on your site
Persuasive Web Design
- Requires understanding of “Place”
- Context is everything
- Content requires context