Information Design

Assigned By:
Mam Kalsoom Safdar

Assigned To:
Jawad Hassan
183022-Mcs2nd
 Information Design
Information design is the practice of
presenting information in a way that makes it
most accessible and easily understood by
users. Information design is targeted to
specific audiences in specific situations to
meet defined objectives. In its most
sophisticated forms, it helps users understand
complex data by organizing and simplifying
data and information in ways they can quickly
grasp
 Information Design’s Issues
There are really only three key
issues that should be considered
when a WebE team performs
information design:
• Content: What content is
available?
• Composition: What views on
that content do you wish to
provide users?
• Navigation: How do the users
gain access to those views?
 Information Architecture
The overall goal of information design is to
translate content requirements, usually in the
form of a detailed set of content objects, into
a specific information design for the WebApp
Example
 Approaches
The overall strategy for information design
usually combines both a bottom-up approach
and a top-down approach.
 IA Characteristics
• Composition with multiple, dynamic data: The model must
support the ability to group different information items
(modes) into a presentation and the expression of
constraints among these items.
• Higher-level presentation specification: The model should
be able to specify constraints across multiple information
items (modes).
• Temporal relations: Certain information items may have
time-based relationships, which can be important to their
presentation.
• Context for links and link semantics: The ability to control
the presentation depending upon which links are followed.
 Characteristics of Information
• Relevance (in the context)
• Accuracy
• Currency
• Frequency of change
• Format(s)
• Dependency
• Others?
 Wireframe Models
• Conceptual layout of pages
• Captures core information and navigational
elements.
• Supports both information design and interaction
design.
• Wireframes can be pencil drawings or sketches on a
whiteboard.
• Wireframes are generally created by business
analysts, developers, visual designers, and by those
with expertise in information architecture.
Wireframes focus on:
• The range of functions available
• The relative priorities of the information and functions
• The rules for displaying certain kinds of information
• The effect of different scenarios on the display[
• Wireframes focus on:
• The range of functions available
• The relative priorities of the information and functions
• The rules for displaying certain kinds of information
• The effect of different scenarios on the display
 Tools

• Denim :
Free, limited use tool
Watch the video
• Axure:
Full-featured, popular wireframe /
rapid prototyping tool
• Others:
Balsamiq
OmniGraffle (Mac) Tools
 Navigation Design

• The Relationship Management Methodology (RMM) is an

early navigation design approach – useful for illustrating
concepts.
• ER modeling defines the information domain of the
application by identifying content (data) objects, attributes,
relationships, and various type indicators that comprise the
WebApp information space.
• Slice design determines detailed information structure and
access mechanisms by grouping content from the domain
• Navigation design establishes the links between the various
slices and creates the information units.
• Ultimately, these information units are transformed into
Web pages.
Symbols
Examples
 Other Approaches
A more recently developed, and richer, notation
than RMM is the Web Modeling Language
(WebML)
• incorporates robust support for aspects such as
workflow modeling, presentation and content
adaptation, personalization, and design patterns
• visual notation and a methodology for designing
complex data-intensive Web applications. It
provides graphical, yet formal, specifications,
embodied in a complete design process, which
can be assisted by visual design tools.
 WAE
Web Application Extension for UML (WAE) is a design
approach that links the informational perspective with
functional WebApp components.
• indicates how functional components generate and/or
provide information and how the information (through
aspects such as link activation or form submission)
triggers functional components.
• models the connection between client-side content
and behavior, and server-side functionality.