Exam 2 (04/18/19)

Design Thinking: A 5 Stage process

1. Empathize 2. Define 3. Ideate 4. Prototype 5. Test

Design Fidelity Process

1. Start with a simple sketch on a blank piece of paper. 2. Then, make a wireframe that organizes the content and features of your app. 3. Add colors, icons, pictures and logos to your wireframe for the mockup. 4. Finish by bringing your mockups to life with interactive elements into a prototype

"Miracle" States

A miracle state is one that has transitions out of it but none into it.

Time

A sequence diagram describes the order in which the interactions take place, so time is an important factor. Time on a sequence diagram is all about ordering, not duration. Time runs down the page on a sequence diagram in keeping with the participant lifeline. When objects continue to exist in the system after they are used in the sequence diagram, then the lifeline continues to the bottom of the diagram Sometimes an object creates a temporary object; in this case an X is placed at the end of the lifeline at the point where the object is destroyed (e.g shopping cart).

State

Describes its values and relationships at a point in time

Information Architecture

Design process that tells you where you are headed Blueprint of a website Process by which the website's content is broken down into chunks - organizing those chunks of information - hierarchically - in relation to one another in a logical way Usually each chunk is information living on a single page Related to navigation

State Machines (Continued)

Diagram to represent the different states an object passes through during its life, in response to events Not used for every object- but for complex ones to further define them and help simplify the design/ Shows the events/triggers that cause the change Focus is on a single class and its instance (OBJECT) changing over time Elements - State - Event - Transition

Custom Development

Pros - Allows for meeting highly specialized requirements - Allows flexibility and creativity in solving problems - Control over the way system looks and functions - Flexible and creative ways to solve business problem. - Easier to change components that make use of technology - Builds personnel skills: - Builds technical skills and functional knowledge within the company - Align IS and Business goals. Cons - May excessively burden the IT staff: - Dedicated effort involving long hours and hard work with a staff that is already overcommitted - Skills required are varied (technical, interpersonal, project management, modeling etc). IT turnover is high. - May add significant risk - users, timelines, technical obstacles

Packaged Software

Pros - Business needs are not unique so no need to reinvent the wheel - Buy programs that are already created, tested and proven. Plus expertise and experience of the vendor - Bought and installed in relatively short time - Range from small, reusable components to all encompassing systems like ERP Cons - Technology drives business processes - No perfect fit for functionality even with customization Workaround, "Customization": Custom built add on programs to interface with the package

Pros and Cons of Outsourcing

Pros: - Expertise in technology, have more resources, and domain specific knowledge - Reduce cost/Add value Cons: - Requires extensive two-way coordination, information exchange and trust - Disadvantages include loss of control, compromise confidential information, transfer of expertise - Compromise confidential information - Offshore : cultural, language, time zone differences

Design Fidelity

Refers to the level of details and functionality built into a prototype. There are three levels of fidelity: low, mid and high. - Low fidelity prototypes consist of sticky notes and sketches, which is great for high-level brainstorming and collaboration. - Mid fidelity prototypes are often called wireframes. - High fidelity prototypes almost represent the finished product and include mock ups and prototypes. The common trait of wireframes, prototypes and mockups - all these documents are forms of representation of the final product.

Responsive Web Design

Responsive web design (RWD) is an approach to web design aimed at allowing desktop webpages to be viewed in response to the size of the device one is viewing with

Healthcare.gov Mission

The mission of this website was to provide a single point of access to the health insurance market for individuals

Pictures

Use pictures: A picture really is worth a thousand words. Pictures and ideas with at least some emotional content that which causes you to feel something is more likely to be remembered People: Brain pays more attention to people than things. Studies show web designs that include people are more persuasive than those without

Self-delegation

When an object sends a message to itself

Inheritance

Common sets of attributes and methods are superclasses Subclasses inherit the attributes and methods Abstract and concrete class

Messages

information sent to an object to trigger a method (procedure call)

"Black Hole" States

A black hole state is one that has transitions into it but none out.

Guard Condition

A guard is a Boolean condition that permits or blocks the transition.

Benefits of OOSAD

- Break a complex system into smaller, more manageable modules - Work on modules individually

Logical View

- Describes the abstract descriptions of a system's parts. - Used to model what a system is made up of and how the parts interact with each other. - The types of UML diagrams that typically make up this view include class, object, state machine, and interaction diagrams.

Architecture Centric

- Functional (external) view: focuses on the user's perspective - Static (structural) view: focuses on attributes, methods, classes & relationships - Dynamic (behavioral) view: focuses on messages between classes and resulting behaviors

Encapsulation

- Process and data are combined together - All one needs to know is the set of operations/methods that can be performed and what messages can trigger them - Use the objects by calling the methods

Use-Case Driven

- Use-cases define the behavior of a system - Each use-case focuses on one business process/functionality

Recap on Object Oriented Concepts

An object is an instantiation of a class, that is, an actual person, place, or thing about which we want to capture information. Each object has attributes that describe information about the object, such as a patient's name, birth date, address, and phone number. Each object also has behaviors described by operations. An operation is nothing more than an action that an object can perform. Each object also can send and receive messages. Messages are information sent to objects to tell an object to execute one of its behaviors.

Design

Analysis focus: What should the system do? - Functional Requirements Design focus: How will the system be built? - Non-functional requirements. Design activities focus on how to build the system - Major activity is to evolve the analysis models into design models - Goal is to create a blueprint for the design that makes sense to implement - Determine how and where data will be stored - Determine how the user will interface with the system (user interface, inputs and outputs) - Decide on the physical architecture: hardware, and networks.

Behavioral Modeling

Behavioral models describe the internal behavior of a system, and it is dynamic. Behavioral model types: 1. Representations of changes in the data: behavioral state machines 2. Representations of the details of a business process identified by use-cases - how actors and objects collaborate to provide the functionality defined in a use case through sequence diagrams

System Integration

Building a new system by combining packages, legacy systems, and new software to integrate these. - Not uncommon to purchase off the shelf software and outsource its integration to existing systems Key challenge is integrating data - May require data transformations - New package may need to write data in the same format as a legacy system Develop "object wrappers" - Wraps the legacy system with an API to allow newer systems to communicate with it - Protects the investment in the legacy system

Icons

By linking abstract information to a concrete concept, it becomes easier for people to understand the information. - the lens means the search; - floppy disc is a general notion of the "Save" function; - generally accepted notion for a folder; Know your user Understand their tasks Should be familiar to the user; and come from every day experience. Don't forget labeling

Card Layout

Card layout: Pioneered by Pinterest, cards are everywhere on the web because they present information in bite-sized chunks perfect for scanning. Each card represents one unified concept.

Card Sort

Card sort is a user centric design method for system's navigation, menus and taxanomy Card sorting is a cheap and easy way to impose a structure on your site's information. It's also a great way to see how other people (maybe even your potential users) organize your site's information.

Golden Ratio

Clear and intuitive web design using natural sense of order, harmony and balance. Ratio of the longer side to the shorter is the golden ratio. The rationale behind it is the belief that this proportion is organic, universal, harmonic and aesthetically pleasing. 1:1.6

Color

Color metaphors are commonly used in art where red may represent passion, gold hues are flash-backs of the past, blue represents melancholy emotions and so on. Web design - Bright colors for food, activity - Blue for calm

Design Strategies

Custom development—build it in-house from scratch Purchase packaged software - Office suites (e.g., word processors, spreadsheets, etc.) - Enterprise systems (e.g., SAP, PeopleSoft) Hire an external vendor (outsource)

Design Trends: Hamburger Menu

Hamburger menu The idea behind the hamburger menu is that you can use it to hide site navigation on smaller screens, showing it only when the user clicks the icon instead of always showing it (which was the previous norm). Logic of progressive disclosure

Attributes

Information that describes the class

Hero image

Hero Image: A hero image is a large banner image, prominently placed on a web page, generally in the front and center. The hero image is often the first visual a visitor encounters on the site and its purpose is to present an overview of the site's most important content.

Golden Ratio in Web Design

If you divide something into thirds, two of those thirds are perfect for your main content, and the remaining 1/3 is great for sidebars, navigation, blogs

Illustrations and Bold Colors

Illustrations can also be very powerful in bringing more abstract concepts to vivid life

Information Architecture (Continued)

Information architecture (IA) focuses on: - organizing, - structuring, and - labeling content in an effective way. The goal is to help users find information and complete tasks. To do this, you need to understand how the pieces fit together to create the larger picture, how items relate to each other within the system.

Carousel

It facilitates the display of images/blocks in a rotating pattern similar to the large rotating machine with seats for children to ride. - When the content is visual - When you are comparing

Activation Bar

It indicates that the sending participant is busy while it sends the message and the receiving participant is busy after the message has been received

Storyboard step 2:

It's pretty important to add color to your storyboards—color changes everything. Even though your favorite shade of crayola blue might not be web safe, your colors should be close enough to see how they play off of one another when your idea goes digital.

Application

Layout Typography Logo

Outsourcing

Least amount of in-house resources: Hiring an external vendor, developer or service provider Hiring consultants to solve a specific problem, hiring contract programmers to implement a solution, or actually outsourcing the entire IT function to a separate firm. Assess the requirements for the project- company should not outsource what it doesn't understand. Carefully choose the vendor with proven track record. Three types of contract: - Time and arrangement: flexible - Fixed price - Value added contract

Views of the system

Logical View Process View - Use-Case View Physical View Development View View captures a particular facet of the system Kruchten's 4+1 view

Scrolling

Long scroll: The technique works especially well for sites that want to lure users through storytelling, and you can still mimic a multi-page site by breaking the scroll into clear sections.

Messages

Messages on a sequence diagram are specified using an arrow from the participant that wants to pass the message, the Message Caller, to the participant that is to receive the message, the Message Receiver. When a message is passed to a participant, it triggers or invokes the receiving participant into doing something; and the receiving participant is said to be active. To show that a participant is active, an activation/execution occurrence bar is used.

Mock ups

Mockups show overall appearance aspects of a design including type choices, color choices, etc. The goal of a mock up is to show, as close as possible, how all final appearances will be rendered. A well created mockup: - represents the structure of information, - visualizes the content - demonstrates the basic functionalities in a static way - encourages people to actually review the visual side of the project Feedback from user, buy-in from stakeholders

Object Oriented Systems

Objects capture the structure and behavior of IS in little modules containing data and methods

Scannability

People rarely read Web pages word by word; instead, they scan the page, picking out individual words and sentences. - Clearly written headers - Short paragraphs Reduce word count by 50% compared to printed text - Bold and italics to emphasize important words - Lists: ordered and unordered

Polymorphism

Same message interpreted differently by different objects

Consultant Sort

Scramble the cards. Find another group and hand over the list, and the scrambled cards, but not the IA diagram. Explain what your project is about. Gather the same from the other group Sort the cards for the other team. Draw an information architecture for their project. Meet and discuss. Compare your IA diagrams.

Participants

Sequence diagram has a collection of participants—the parts that interact with each other during the sequence. Participants are always arranged horizontally with no two participants overlapping each other Actors and objects that participate in the sequence are placed across the top of the diagram Syntax: 1. object:className Example APatient:Patient 2. :ClassName Example :Patient 3. Participant1 Example APatient

Sequence Diagrams

Sequence diagrams are all about capturing the order of interactions between parts of your system. Using a sequence diagram, you can describe which interactions will be triggered when a particular use case is executed and in what order those interactions will occur. They illustrate the objects that participate in a use case and the messages that pass between them over time for one use case.

Interaction Diagrams

Sequence diagrams are an important member of the group known as interaction diagrams. Interaction diagrams model important runtime interactions between the parts that make up your system and form part of the logical view of your model. - Communication and sequence diagrams The difference between the two approaches is largely personal preference. If you prefer to see the order of the interactions as clearly as possible, then sequence diagram is the best choice.

Redundancy

Several ways to find the same information Scientifically proven that learning abilities improve when people are presented with multiple forms of same information. Navigation - Organize information in multiple ways (category, hierarchy, tags etc) - Breadcrumb navigation -------target.com - Search -------apple.com

Storyboard step 1:

Sketch out your design - Layout - Sketch logos - Replace text with lines or a box that says "text appears here". The point of the storyboard is not to see the actual content-it's to play with and finalize the layout, color scheme and other design elements.

State Machine

State diagrams are useful for modeling an object that behaves differently depending on its state. State machine diagrams are heavily used in special niches of software and hardware systems, including the following: - Real-time/mission-critical systems, such as heart monitoring software - Dedicated devices whose behavior is defined in terms of state, such as ATMs

Elements of a State Machine

State: Value of its attributes and its relationship with other objects - Example: Patient (new, current, former) - Some attributes are affected like location but not others Event is the cause of change in state. A transition, shown with an arrow, represents a change of states from a source state to a target state . A state is active when entered through a transition, and it becomes inactive when exited through a transition.

Sequence Diagrams Steps

Step 1: Context Step 2: Participants Step 3: Timeline Step 4: Message (and optional return message) Step 5: Activation Bar

Methods

The behavior of a class

Return Message and Guard

The return message is an optional piece of notation that you can use at the end of an activation bar to show that the control flow of the activation returns to the participant that passed the original message. You don't have to use return messages —sometimes they can really make your sequence diagram too busy and confusing. At times a message is sent only if a condition is met. In those cases, the condition is placed between a set of brackets, [ ]—for example, [aPatient Exists] LookupBills(). The condition is placed in front of the message name

Message: Arrow

The type of arrowhead that is on a message is also important when understanding what type of message is being passed. The order of messages goes from the top to the bottom of the page, so messages located higher on the diagram represent messages that occur earlier on in the sequence, versus the lower messages that occur later. Operation call messages passed between objects are shown using solid lines connecting two objects with an arrow on the line showing which way the message is being passed.

Visual Metaphor

Theme: What is the website about? - Purpose and content A metaphor is a direct comparison between two or more seemingly unrelated subjects describing one subject as being alike to another subject in some way. A metaphor is a figure of speech that describes an object or action in a way that isn't literally true, but helps explain an idea or make a comparison. Metaphors: Design elements that highlight the theme - Images - Color - Icons - Font

Storyboard

They give you a chance to see - how colors interact with one another, - how interface elements play off one another, - how your navigational system looks, - how your visual metaphor plays out, and - whether content is represented in the best way possible ... without getting into code.

Object (Instance)

instantiation of a class