Obesity Stats

• More than one-third (34.9% or 78.6 million) of U.S. adults are obese
• The estimated annual medical cost of obesity in the U.S. was $147 billion in 2008 U.S. dollars; the medical costs for people who are obese were $1,429 higher than those of normal weight
• Percent of adolescents age 12-19 years who are obese: 18.4% (2009-2010)
• Percent of children age 6-11 years who are obese: 18.0% (2009-2010)
• Percent of children age 2-5 years who are obese: 12.1% (2009-2010)
• Childhood obesity has more than doubled in children and quadrupled in adolescents in the past 30 years
• In 2012, more than one third of children and adolescents were overweight or obese
• Obese youth are more likely to have risk factors for cardiovascular disease, such as high cholesterol or high blood pressure. In a population-based sample of 5- to 17-year-olds, 70% of obese youth had at least one risk factor for cardiovascular disease.
• Obese adolescents are more likely to have prediabetes, a condition in which blood glucose levels indicate a high risk for development of diabetes
• Children and adolescents who are obese are at greater risk for bone and joint problems, sleep apnea, and social and psychological problems such as stigmatization and poor self-esteem
• Overweight and obesity are associated with increased risk for many types of cancer, including cancer of the breast, colon, endometrium, esophagus, kidney, pancreas, gall bladder, thyroid, ovary, cervix, and prostate, as well as multiple myeloma and Hodgkin’s lymphoma

Interface Design Chapter 6

Chapter 6: Augmenting Human Capabilities Through Interfaces

• The three technologies that will be discussed are QR codes, mobile augmented reality, and touch screen

QR CODES - PRINT MEETS INTERACTION

• The QR code is a barcode with the capacity to hold tens of thousands of bits of information, and acts as a shortcut to web-based content from the physical world
• The data types that a QR code can connect to include calendars, v- or e-cards, email addresses, geo-locations, phone numbers, URLs, e-tickets, and surveys
• The QR code has a direct relevance to graphic designers, as it acts like a bridge between print and digital
• These QR codes may be sculptural or carved, and yet remain readable to a QR app interfacing with web-based content specific to the relevant geographic location. This development makes a connection between the QR code and augmented reality

AUGMENTED INTERACTION

• AF is a technology that blurs the digital world wight he real world by digitally overlaying a level of additional information onto what can be seen
• AR, using the camera in a smartphone and an app, essentially augments (increases) the real-world environment of the user by superimposing digital detail in real time.
• AR needs three components to successfully function:
• a marker to trigger the AR layered information
• software to process the marker and deliver the content
• an interface to bring the three components of marker, software and content together to be accessed by the user
• Too much information overlaid at any one time will reduce the communication, not enough and the user will miss out.

THE TOUCH SCREEN WORLD

• We as human beings, evolve far more slowly than technology. Therefore, the capabilities of humans remains the same, they just need to adapt to a new way of working with a new tool.
• We only really sense the feel of glass when we swipe or press the screen. It can therefore be said that the UI is "under glass"; whereas with desktops we were separated from the content by the mouse and pointer. With touch screens we're now that bit closer to the interaction, but tantalizingly still not quite "in" the interaction.
• What is still missing from the interaction while the interface remains "under glass" is the sensation of texture.
• Already, scientists are prototyping texture touch screens.
• The non-digital design processes and skill sets learned at art college and on design degrees that focus on physical materials, such as packaging design, will be very useful for future UI design

The Future Interface: Design to Make Technology Human

• Charles Babbage designed the first computer between 1833 and 1871.
• Then came Apple in 1984
• We forgot that information exists across systems, not just within them. And because we are so addicted to what happens inside screens, we forgot how to be human.
• New interfaces are increasingly designed with human habits in mind.
• When we can design across systems, devices will evolve or disappear. We will not stop consuming content, rather consume it in a way that suits human behavior, not the other way around.
• Blind people can now read with their finger, an example of the human body as an interface, assisted by technology.
• Audio is an exciting medium to deliver content because unlike visual information, it doesn’t take up space.
• Not only should the interface be part of our existing environment, the content should react or be generated by our environment. Welcome to contextual content.

Beyond the Button Notes

• An issue with the top and bottom bars is that they fill almost 20% of the screen. 
• When designing for a tiny canvas, we should use every available pixel to focus on the content
• A great way to start designing a more gesture-driven interface is to use your main screen only as a viewport to the main content. Don’t feel obliged to make important navigation always visible on the main screen
• consider giving it a place of its own
• The rise of touch and gesture-driven devices dramatically changes the way we design interaction. Instead of thinking in terms of screens and pages, we are thinking more in terms of time, dimension and animation

Week 8 Reading Notes

Type on a Screen - Chapter 4 - Type and Interface

• an interface expresses the internal structure of a document (its heads and subheads, tables and lists) as well as the framework of menus, buttons, and links that guides users through it
• interactive media projects are built in layers, yielding a complex three-dimensional space that allows content to move in and out of visibility 
• the principle of hide and reveal allows designers to display more data at larger sizes - within the limited window of a browser or device

WIREFRAMES

• also referred to as a page schematic or a screen blueprint, a wireframe uses simplified elements to represent basic content areas and the elements of page navigation

TYPE AS NAVIGATION

• in a website, a path is a consistent, predictable route that connects content
• a path can emerge from the user's own habits or it can be created by a designer through explicit text-based navigation elements
• Some examples are:
• text links - word or phrase surrounded by <a href> tags. These can be styled with color, underlines, mouseover states, and other means
• breadcrumbs - a string of text shows the user their position within a path or sequence
• anchor links - named anchors take the user to a specific place on a page. These are usually styled like other text links
• tags - popular on blogs, tags apply categories to an article or entry, creating a kind of page-by-page index for the sit. Tags are usually separated by commas and appear in simple lists

DROP SHADOWS AND GRADIENTS

• interface designers use drop shadows and gradients to achieve an illusion of three-dimensionality on screen, calling attention to objects that the user can interact with and suggesting the layering of elements in depth

HIDE AND REVEAL

• the principle of hide and reveal is at work in numerous contexts within interface design
• the ability to display massive amounts of data in a small space by burying information and then bringing it to the surface is a fundamental feature of interactive media

TYPOGRAPHY AND DATA DISPLAY

• visual representations of numerical data can communicate complex information in a clear, expressive, and illuminating manner, revealing patters and relationships that would otherwise remain hidden in lists of numbers

INTERFACE DESIGN

CONSIDERING THE SCREEN

• the UI elements to be placed in he grid are defined as modules
• these are repeatable components defined from image sizes, video player sizes, and so on, on both their x-axis and y-axis
• to avoid losing information in the bleeds, designers need to ensure that navigation and content modules are placed within the defined action safe area for the chosen screen ratio

GRIDDING: BESPOKE OR DYNAMICALLY FLUID?

• having tablets and smartphones that rotate views puts strain on effective designs, as the underlying grid needs to structure the page in two orientations at once
• these problems are being solved through the intersection of clever coding and clear layout, achieved through collaboration between the graphic designer and developer
• the design team will either design the UI to fit each platform, or use jQuery code to define which platform is being used

TYPOGRAPHY FOR UIs

• the complete control a graphic designer has over static type in print is not the same with UI design, as user-control makes UI typography more dynamic
• the leading on a tablet device needs to accommodate input via a fingertip; and on a smartphone, some input is made using a thumb
• a UI on a smartphone, as opposed to a PC, is likely to have fewer available links, increased leading and reduced type size

TYPE ON A SCREEN

• a reader's tolerance to reading and understanding text on a screen is variable
• people read around 10% more slowly on a screen than with printed matter, and in reality scan more than they actually read
• text on a UI can take different forms; navigation, calls to action, captions, headings and blocks of textual content
• serif typefaces are fine as headers, but sans serif typefaces are safer fro body copy as they work consistently at any scale

COLORING THE SCREEN

• graphic design for print and screen use two different color space models
• print uses a CMYK color space of four colors: cyan, magenta, yellow, and black
• screens use an RGB color space of red, green, and blue
• modern screens can display 65,000 colors per pixel, depending upon resolution and the graphics card of the device
• traditionally, there are only 216 colors that are deemed 'web-safe'
• in other UIs, such as apps, BD/DVD and game interfaces, the RGB color values are selected either in the UI authoring software or directly referenced in the programming language by the developer

THE MEANING OF COLOR

• on a basic level, color affects our perceptions
• it can help determine how a user will perceive the UI design, its navigation, and its content
• warm colors pull forward, expanding and popping out from their backgrounds
• cold colors do the opposite and rush backwards
• neutral colors have less impact, emotionally and perceptively
• although color is useful in UI design for conveying personality, tone, information, and calls to action, it should be used in conjunction with image and text to maximize communication and minimize potential misunderstandings

APPLYING COLOR

• colors are always relative to the context in which they are viewed
• by grouping two or three colors together into a scheme, combinations can be found that work eel for the UI design
• complementary colors sit opposite each other on the color wheel
• analogous colors sit next to each other and work well together
• by selecting a three-color scheme, a triadic relationship can be established
• in triadic relationships, colors need to be balanced to ensure the UI will be usable, as some color combinations are problematic

IMAGERY AND THE PIXEL

• in UI design, images can function as content, decoration and, crucially, as navigation
• digital image files fall into two categories: vectors and bitmaps
• vectors have very small file sizes and are created mathematically, whereas bitmaps are created through coloring each pixel in the image
• when shrinking a bitmap, the image will lose quality because pixels are being removed
• vector images, on the other hand, do not lose image integrity in resizing, as the integrity of vectors is mathematically controlled and infinitely scalable without loss of quality

IMAGES AS NAVIGATION

• navigation can be represented in various metaphorical visual forms (tabs, menus, hypertext, buttons, etc.)
• by creating a visual environment for the interface to work through, an image can indicate interaction whilst still maintaining the visual metaphor
• one way to understand 'image as navigation' is to consider the UI as a visually represented environment instead of it being a container of images, text, animation, and navigation in an obvious gridded layout

ICONOGRAPHY

• the benefit of using an image as a visual context is its coherence to the user as a metaphor
• as humans, we make subconscious connections to the UI interactive functions through the use of such metaphors
• the use of icons in a UI makes it easy to differentiate interactive elements from more static content

The Skeptics Guide to Low-Fidelity Prototyping Notes

• Low-fidelity prototypes, in particular, are rough representations of concepts that help us to validate those concepts early on in the design process
• Designing without introducing potential users to raw versions of our ideas is unsafe, uncomfortable and wasteful
• Low-fidelity prototyping helps us to find the middle ground between overspending and overthinking, between too little investment and too much user validation
• A prototype’s level of fidelity answers the question, How precisely does this represent the final solution?
• Low-fidelity prototyping has become popular because of:
• Design thinking advocates for “thinking with your hands” as a way to build empathetic solutions
• Lean startup relies on early validation and the development of a minimum viable product to iterate on
• User-centered design calls for a collaborative design process where users deliver continual feedback based on their reactions to a product’s prototype
• Prototypes have the following advantages:
• Detect and fix major problems early
• Build cheaply and easily
• Draw feedback that focuses on high-level concepts, rather than execution
• Iterate more willingly
• Carry and show them easily
• Types of prototypes:
• Paper based 2D
• 3D
• Quick-start guide:
• Define your goals: What will you show?
• Define the method: How will you show it?
• The level of detail will depend on what type of user will be exposed to your prototype and what resources are accessible
• Execute: Show it
• Test: How will you evaluate what you are showing?
• Learn: We've shown. Now what?

Week 6 Outside of Class

Megan and I went to Aaron Draplin on Thursday night. This was by far, the best speaker I have ever been to. I absolutely loved it. I loved how down to earth he was and talked to us like we were equals. The way he gave the presentation was very successful. He didn’t just focus on one or two case studies – instead he went through a ton of different logos and designs that he created (and also had it paired to music). Then he focused on 3 or 4 big projects. He talked about the logo that he created for Obama, the hats that he created that the U.S. soccer team ended up being photographed wearing, and the logo he created for a friends hot dog company. I really liked how he said that the projects that will make you a lot of money are not always the important ones that you will remember forever and get the most pleasure out of.