Please enable JavaScript.

Coggle requires JavaScript to display documents.

CAMD A304F (Lecture 1 (Interactive Design (Roles of Interactive Design…

- - - - Providing a promotional Web presence for a business
      - Providing a service that will be paid
    - - Management
      - Creative
        
        Art base
        
        Copy Base
      - Project Manager
      - Account Service
      - Strategy Planner
      - Web developer
  - - - Time and space;
      - 2.Input and output.
    - - Electronic, ease of using and understandable
    - - consumer relies on the ability of the
        producer, editor, etc. to structure how content is presented
      - Input is something put into a system or expended in its operation to achieve output
      - Output is the information produced by a system or process from a specific input.
    - - Blogs
      - Podcasts
      - Vlogs
      - YouTube
      - MySpace
      - Facebook
      - Forums
      - Message boards
      - User generated content/citizen journalism
      - Social recommendation website
      - reveals an important aspect of interactivity
  - - - By using specialized software and sensors, the experience becomes your reality, filling your vision
    - - AR takes your view of the real world and adds digital information and/or data on top of it.
    - - Mixed reality lets the user see the real world (like AR) while also seeing believable, virtual objects (like VR).
- - - - allow them to share an opinion
    - - many
        others who prefer to do that via the art of photography or drawing.
    - - watching a video online is very easy and
        available to everyone.
    - - refer to computer software designed to help the user to perform
        specific tasks.
    - - may incorporate elements from
      - optionally employ encryption to provide security and
        privacy
      - Subscription website
        
        News website
        
        Academic website
        
        Gaming website
        
        File-sharing website
        
        Message board
        
        Web-based email
        
        Social networking website
    - - renders the page content
    - - Represent the evolution of the forum, something
        between a public diary and a tribune
    - - The website owner can now communicate with people who likes it
      - also get all the traditional analytics tools
  - - - Texts
      - Images
      - Video
      - Audio
  - - - Reaching the right person at the right place and time has been the brands’ goal
        from day 1.
    - - Users allow the app to track their locations throughout the day
      - When other Highlight users are nearby
      - Itshows both parties the nearby user’s info
    - - convenient
  - - - Sites of Zalora show
  - - - Google is developing augmented reality glasses
      - Condition One makes iPad video apps that let the tablet holder move
        around a faraway scene,
  - - - Example : Louis Vuitton
        By: Kokokaka (Sweden)
        
        Allows users to explore play with the merchandise whilst
        creating a custom soundtrack
- - - - neutral
      - warm
      - cold
    - - circles
      - rings
      - lines
      - curves
      - triangles
      - square
  - - - shape
      - size
      - colour
    - - objects that are recognisable
    - - positive and negative space
      - illusion of depth
  - - - usable experience and an enjoyable one
      - key principle to create user experience
      - have a purpose
      - eases the load on the user’s
        memory and attention
    - - fun and leisure
        
        desires challenge and growth
        as well as order and security
      - fun and discovery
        
        recognising something unusual, and follow it with our understanding of the rules of a system
    - - sustained and informed business strategy
      - create an attitude in the mind of
        the consumer
      - will deliver recognisable and consistent values
      - gain insigts
    - - Subtle changes in the design can make big changes
      - In every area of human life there are different ways to approach tasks and achieve objectives
      - efficiency of a particular
        approach to a task
    - - highly subjective part of an experience
      - a highly motivating force
      - Satisfying experience is supported by the recognisation and accommodation on the evolving skill of the user
- - - - Study
        
        ‘Why does this game work whereas another in the same genre falls flat?’
        
        ‘How does the art direction inform the story and experience?’
        
        ‘What differentiates this game from its peers?’
      - communicate the quality of their ideas
      - mentally agile and lateral thinkers
    - - The Osbournes by Specialmoves
        
        quirky and fin to reflect the tone
        of the TV show
        
        promote the reality TV series
    - - 4 basic elements of a game
        
        mechanics
        
        how players try to achieve prescribed goals and what
        happens to then when they try
        
        unique to the video game medium
        
        story
        
        gives the mechanics meaning
        
        Narratives
        
        Pre-scripted linear narratives
        
        does not alter in reaction to the player’s choices
        
        one ending
        
        Non-linear or branching
        
        players' choices make directly affect the outcome and ending
        
        Emergent narrative
        
        changes dependent on the players’ interaction.
        
        aesthetics
        
        the look and feel of the game,
        
        generate the emotional experience and connection
        
        technology
        
        expression of any materials that make the
        game work
  - - - the use of games to advertise or launch products
      - launching a game along
        with a product or campaign
    - - more focused on training and
        education over selling a brand
      - involve religious games, political
        games, simulation and educatio
      - Example
        
        America’s Army
        
        educates the player on the goals and principles of being a US Soldier
    - - smaller in scope than regular video games
      - Facebook
        
        medium for casual games
        
        players can share content or high scores with their friends
      - work in ‘bite-sized’ chunks
      - example
        
        Farm Ville
    - - the commercial ARG
        
        Ilovebees Halo 2 ARG
        
        coerce fans away from computer screens and to
        actively engage them with the world
        
        real-life treasure hunt
      - art ARGs
        
        investigation into the process
        and understanding of gaming itself
        
        Reality Ends Here
        
        foster creativity and
        collaboration amongst incoming students
        
        ARG for use in an educational context and uses game mechanics
      - design principles
        
        Storytelling as archaeology
        
        allow players to
        reassemble it, supply connective tissue and determine
        
        Platformless narrative
        
        Designing for a hive mind
        
        a collective of players
        
        whisper is sometimes louder than a shout
        
        Real life as a medium
        
        Collaborative storytelling
    - - Prove new technology
        
        Unity3D
        
        appeal to aspirational,
      - Client Coordination
        
        high levels of communication between client and creative team
        
        show to the client what they were designed, what was a prototype and what was fixed in the game
    - - successful
        combination of fun gameplay, comical style, and low price
- - - - Age range
      - Ethnicity
      - Experience
      - Gender
      - Income level
      - Language
      - Level of educational attainment
      - Location
      - Occupation or professional
      - Religion
    - - System requirements
        
        Compactness
        
        Ease of reading and learning
        
        Low error frequencies
        
        Consistency
      - User aim
    - - Surveys
      - Interviews and focus groups
      - Field studies
      - Generative approaches
      - Visual Reference e.g. Pinterest
  - - - Visceral
      - Behavioural
      - Reflective
    - - Short-term vs. long-term
      - Mnemonics
      - Metaphors
    - - Feedback
      - Close connections with users
      - Consistency
    - - Extrinsic vs. intrinsic motivation
  - - - Designer can ask users to envisage a journey to help shape an early navigational design
      - Insights can be derived by observing users making journeys through prototypes of the design
      - Designs analysis to reveal data about actual user journeys. This live analysis is done by tracking user interactions
    - - Preparation
      - Step 1: create a scenario
      - Step 2: ask the user to envisage the journey
      - Step 3: visualise the journey
      - Step 4: make the journey
      - Step 5: observe users making the journey
      - Outcomes
- - - - What are Scenario building
        
        Scenario
        
        Components
        
        a setting(s)
        
        a plot(s)
        
        agents or actors
        
        Styles
        
        Template
        
        Thirty Panels
        
        Subjective
        
        Upstairs
        
        Retrograde
        
        Memory
        
        Monologue
        
        A Refrigerator with a View
      - Why use scenario building
      - Considerations for building scenario
      - Designing personas
    - - Production process
        
        Developer (programmers)
        
        To produce site based on appropriate design guidelines
        
        Use of appropriate programming languages
        
        Designers
        
        Conduct QC (quality check) during production
        
        To organize and manage sources files and webpages
        
        To prepare images and content for production
      - Design for the contents
      - Applying online branding
      - Reflect the brand and design values
      - Developing the Look & feel
        
        Reflection of the site and design sample
      - Human Interface Design
        
        Components
        
        Animation: Enhance interactivity
        
        Buttons & icons: HTML
        
        Buttons & icons: Enhance functionality
        
        How to design Human Interface?
      - Flowcharts and Site Maps
      - Graphic Interface design
      - Documentation & Porotype
      - The Technology of the Web
        
        Glossy
        
        Splash page
        
        Landing page
        
        Combo box
        
        Front-end development
        
        Back-end development
- - - - delight in the process of exploring and discovering what they need to do
      - learn the language and controls of the interface and
        unconsciously commit this knowledge to memory
      - know what they need to do
        without further needs on exploration
    - - High-end Graphics with Meaning
      - Strong Layout with efficient Information architecture
      - Subtle interactivity element
  - - - harmonious placement of type, image, line, shape, tone, colour, imagery and space
        
        Create attractive visual relationships
        
        Organise (group/separate) visual information
        
        Create emphasis
        
        Focus information
        
        Create direction
        
        encounter information in the correct order
      - Grids
        
        unified and consistent
      - Responsive design
        
        Web as a replacement for print media
        
        web pages can be changed to any shape or size.
        
        wide adoption of many more types of devices
        
        smart phones, tablet computers
        
        visual design can be dynamically
        adjusted to provide appropriate content
        
        page elements reshuffle as the viewport grows or shrinks
        
        A three-column desktop design may reshuffle to two columns for a tablet and a single column for a smartphone.
    - - Typography
        
        art of selecting, combining, and arranging different typefaces in order to create structure and meaning.
        
        Type in Web/interface
        
        create a visual hierarchy
        and organisation
        
        giving emphasis to particular pieces of text sand encouraging users to interact with specific elements
        
        Users identify very strongly with different categories of type.
        
        generic font family types
        
        Serif fonts
        
        high legibility
        
        Sans serif fonts
        
        highest legibility
        
        Some are specially designed for screen
        
        Cursive fonts
        
        work relatively better on screen in large size work
        
        can present human touch
        
        Fantasy fonts
        
        for display type or highlights
        
        Monospace fonts
        
        like typewriter typeface.
        
        Size Properties and Values
        
        Weights, styles, variants, and decorations
    - - influence user’s judgement on a site
      - color scheme
        
        define the mood, educate the user about
        navigation
        
        reinforce the site‟s
        identity, or brand image
      - value
      - Brightness
      - Contrast
      - Saturation
      - Colour Combinations
        
        pick the base or central color
        
        Positive and negative traits
      - Cultures and Color
        
        Localisation
        
        Different cultures associate
        different meanings with colors
    - - fit within graphic systems
    - - enhance memory and understanding
      - shape user expectations
      - illustrate the preferred mode of interaction
- - - - the tend to look in
        the same direction as the person
      - Knowing where users are looking on a page or screen is a useful way of directing them towards important content.
      - attracted to looking
        at faces
    - - People are more likely to engage with a well-designed site because a good- looking site equates to credibility in the mind of consumers.
    - - The rule of odds creates interest or focus for any image or content that is
        surrounded by an uneven number of other content
  - - - Use shortcuts for frequent users
        
        content that people return to often
        
        pre-show some options to users
      - Design informative feedback
      - be consistent
      - Reduce any overload
        
        Don’t have too many windows opening
      - Design navigation or dialogue with conclusions
      - Design an ‘undo’ option
        
        always be able to get back to a previous page
      - Design for individuality
        
        find easy to use.
        
        easy to navigate
      - Design informative errors
    - - The inverted pyramid
        
        dominance
        
        hierarchy
        
        details
      - Baby duck syndrome
        
        they struggle to change their
        habits
        
        users to ‘imprint’ on the design
        
        Users get used to and learn how to interact with a website or software in acertain way
      - The Zeigarnik effect
        
        is used in media as a
        form of marketing
    - - The three-click rule principle
        
        content should be within easy reach of the user
        
        the need for clear, concise and streamlined interactions
      - The two-second rule
      - Magic Number Seven, Plus or Minus Two principle
        
        comes from
        psychological study
        
        if users are given too many option in a navigation menu it’s confusing and unusable
- - - - Accessibility standard and guidelines
      - screen reader testing guidelines
      - Mobile accessibility standards and guidelines
        
        Guidelines
        
        color constrast
        
        color and meaning
        
        content order
        
        structure
        
        containers and landmarks
        
        spacing
        
        touch target size
        
        duplicate links
        
        zoom
        
        actionable elements
      - UX Principles
        
        Give users control over the page
        
        Provide responsive features
        
        Observe users interaction with web
        
        Give users choices
        
        user research and feedback indicated
        
        not making any assumption
        
        allow users to choose want they want
        
        Design with familiarity in mind
        
        consistence labels for headings, links and buttons
        
        alternatives for screen reader users
        
        Integrate accessibility into annotated UX and style guides
        
        Annotated UX
        
        color constrast
        
        Containers
        
        Alternatives to color and meaning
        
        Heading
        
        Visible focus
        
        Keyboard and input interaction
        
        Content order
        
        Prioritise features that add value for disabled users
        
        Help everyone gains access to a richer and easier experieence
        
        Design with choice in mind
        
        Make no assumptions
        
        Test ideas and concepts
  - - - convert design to grayscale
      - simulate color blindness conditions
    - - Gradient background in high color contrast radio
      - Both shape and content provide context for the infomation
    - - Identify the age group
      - Let people adjust text size
      - Contrast ratios with text
      - Avoid blue for important interface element
      - Use screen readier to test the product
    - - Example of university
        
        Top10 Design guideline
        
        Clearly show the application deadlines
        
        Offer a step-by-step description of the application process
        
        Make it easy for users to view a list of majors and programs
        
        Follow the user journey
        
        Check the main tasks for each of your audiences
        
        Make your About Us page count
        
        Beware the perils of "making your website cool"
        
        Appeal to young adults and speak their language
        
        Use images that reflect your university's value and priorities
        
        Be prepared for users to search for info about your university on external sites
        
        Clearly identify your university on every page
        
        Emphasise your strengths and achevements
        
        Provide info about job placement
        
        Link to the alumni section of the websites
- - - - An application is a software program that's designed to perform a specific function directly for the users
      - App is an abbreviated form of the word "application"
    - - context is king
      - consider the customers’ situation
      - ideally you should observe behaviors using a realistic prototype
    - - Small phones, large phones, small tablets, mid-size tablets, and large tablets
      - ergonomics, form factors, and general patterns of use
      - understand how our consumers control their phone first
    - - full range of these new modes of interaction with the devices
  - - - Welcome Animation
        
        is a way to set the atmosphere for a fun experience, not only for games, but also for serious apps
        
        is an excellent way to pass the time when you have a slow transition
    - - acts as a hub that presents a bunch of links or icons of primary functions or popular views that can be obtained with the app
      - cataloging various aspects of the app’s functionality
    - - makes audio input a great alternative to text
      - enables voice-driven question-and-answer interactivity
    - - to select suitable data to the in the mobile for further steps
      - Multiple select check boxes
      - drill-down refinement
      - most powerful missing results recovery pattern
        
        Did You Mean?
    - - Slider
        
        single
        
        double
      - Forms
        
        Inline Error Message
        
        two components
        
        a general error message
        
        a field- level error indicator
        
        The Calendar app
        
        eBay app’s registration form
    - - Toast Alert
        
        the original implementation the alert layer would pop up from the bottom of the screen
      - Pop-up Alert
        
        as a warning about the system state
    - - enables accelerated mobile login
    - - the most intuitive and obvious choice
    - - complex, emotional, or valuable transactional
    - - Carousel
        
        an attractive and still fairly unusual control for presenting visual information
- - - - HTML consists of content—the words, references that pull in images to be displayed, and other data found on a web page
      - The Structure of an HTML Document
        
        starts with a document type definition or DOCTYPE
        
        <html> element
        
        <head> element
        
        <title> element
        
        <body> element
        
        single header element <h1>
      - Generic containers: <div> and <span>
        
        Semantics
        
        the meaning of a word, phrase, sentence, etc
        
        <div> is kind of specific coding that affect the layout of the website, the location of the content as well as the visual elements
        
        is used to include all those block-level elements within the page layout. Block-level elements
        
        <span> is kind of specific coding that affect the content of the website and the style of the content
        
        is used to include all data within the page
    - - a rule-based language that applies styling to your HTML elements
      - The parts
        
        The selector
        
        The selector identifies the HTML elements that the rule will be applied to
        
        The curly braces
        
        contain the properties
        
        The property/value pairs
        
        are separated from each other by semicolons
    - - Bit Depth
        
        A bit refers to computer languages made up of zeroes and ones. One bit can store either a zero or a one
        
        Increasing the number of bits of information within an image format allows for more color information
        
        Dithering Vs. Posterization
      - GIF (Graphics Image Format)
        
        an indexed bitmap format, meaning that it uses a fixed list of colors
        
        Compression Scheme
        
        the image does not lose quality when it is compressed
        
        smaller file sizes can help a web page load faster
      - JPEG (Joint Photographic Experts Group)
        
        is highly compressed, which means that a photograph saved as a JPEG will have a relatively small file size
        
        Artifacts at Low Compression
        
        result in fuzzy edges
        
        intentionally for artistic effect
      - PNG (Portable Network Graphics)
        
        is a lossless format, which means that file compression retains image quality
        
        more processing power to read and write PNG files
        
        file size is substantially larger
      - SVG (Scalable Vector Graphics)
        
        is a unique image file format that has been around for a while, but has recently been widely adopted by browser vendors
        
        text editor or drawing program
        
        Compression Scheme
        
        lossless compression
        
        zip algorithm
        
        Benefits
        
        quality and search ability
        
        can be expanded or reduced without affecting how the picture appears
    - - fluid grids, fluid images
      - prepare graphic or images in a suitable format for the layout
      - Raster Image Formats
- - - - Context: Where Will The Product Be Used?
      - Persona: Who Is the Target Customer?
      - Field Research And Contextual Interviews
      - to understand the who, where, how, and how much questions, otherwise known as context, persona, vision, and budget
      - Vision: How Will The Product Be Used?
      - Budget: How Much Time And Money Do You Plan To Spend On Design And Development?
    - - shared team-wide understanding and buy-in by developing use-case scenarios and a beefed-up vision statement
    - - based on the storyboard and the brand messages
    - - base on the storyboard to present and record the "User Experience‟ step
      - Using a pack of sticky notes
    - - show to a complete stranger on the street or in the coffee shop and asking him some questions about your app
    - - The goal was to convey an idea and lay out the core functionality without wasting too much effort. We knew we want to make it easy for anyone to use