The document discusses information architecture and workflow diagramming as important parts of the user experience design process. It provides examples of different types of workflow diagrams that can be used to map out tasks and interactions. It also discusses creating information architecture diagrams to structure and classify content in a way that supports users' mental models and business objectives. The document emphasizes that designing information architecture and mapping workflows are necessary first steps before visual interface design.
Design and Implementation in Software EngineeringKourosh Sajjadi
These slides were presented to the software engineering class held in IAUN. The main context is provided from the "Software Engineering" book authored by Sommerville.
Most of the icons used in the slides are provided in the flaticon.com website.
Thanks to our professor Habib Seifzadeh.
A cooperation with Mohammad Mostajeran.
Design and Implementation in Software EngineeringKourosh Sajjadi
These slides were presented to the software engineering class held in IAUN. The main context is provided from the "Software Engineering" book authored by Sommerville.
Most of the icons used in the slides are provided in the flaticon.com website.
Thanks to our professor Habib Seifzadeh.
A cooperation with Mohammad Mostajeran.
Software architecture and software design are two aspects of the same topic. Both are about how software is structured in order to perform its tasks. The term "software architecture" typically refers to the bigger structures of a software system, whereas "software design" typically refers to the smaller structures.
Software Architecture: views and viewpointsHenry Muccini
This is an introductory lecture to Software Architecture Views and Viewpoints, part of the Advanced Software Engineering course, at the University of L'Aquila, Italy (www.di.univaq.it/muccini/SE+/2012)
Software Architecture and Design - An OverviewOliver Stadie
about “Software Architecture and Design”
what it is, what it isn’t
giving a basic idea about the terms
detailed comments and annotations for each slide can be found here: https://docs.google.com/presentation/d/1U8zNQ5YQ2562yQzotVQ5cLxsPKu44lD3_L9jdSPKk4g/edit?usp=sharing
Systems Analysis,
Systems Design,
Systems Modelling,
Systems Architecture,
System Development and Testing,
System Maintenance and Evolution,
SDLC example (Cloud Service life cycle)
Software architecture and software design are two aspects of the same topic. Both are about how software is structured in order to perform its tasks. The term "software architecture" typically refers to the bigger structures of a software system, whereas "software design" typically refers to the smaller structures.
Software Architecture: views and viewpointsHenry Muccini
This is an introductory lecture to Software Architecture Views and Viewpoints, part of the Advanced Software Engineering course, at the University of L'Aquila, Italy (www.di.univaq.it/muccini/SE+/2012)
Software Architecture and Design - An OverviewOliver Stadie
about “Software Architecture and Design”
what it is, what it isn’t
giving a basic idea about the terms
detailed comments and annotations for each slide can be found here: https://docs.google.com/presentation/d/1U8zNQ5YQ2562yQzotVQ5cLxsPKu44lD3_L9jdSPKk4g/edit?usp=sharing
Systems Analysis,
Systems Design,
Systems Modelling,
Systems Architecture,
System Development and Testing,
System Maintenance and Evolution,
SDLC example (Cloud Service life cycle)
Web UI Design Patterns and best-practices guide from http://www.uxpin.com -- the best online wireframing, UX & product management suite available anywhere.
Anyone who is a ux designer and is or will be working in the design field related to user experience (which should be pretty much everything), should be able to refresh their memory and vocab regarding the process and techniques of UX design through this slide.
There are key things that will give you a much better chance at success. While these are well documented in numerous books, articles, and videos - there are still many stakeholders that don't subscribe to some basic truths, like: product decisions should be based on evidence, or having dedicated UX Designers on product teams.
Jeremy will go over his top ten questions to ask any team to see if they're heading toward launching a great product experience.
This presentation was originally given @ Refresh Dallas on 2/12/15
Dive into the innovative world of smart garages with our insightful presentation, "Exploring the Future of Smart Garages." This comprehensive guide covers the latest advancements in garage technology, including automated systems, smart security features, energy efficiency solutions, and seamless integration with smart home ecosystems. Learn how these technologies are transforming traditional garages into high-tech, efficient spaces that enhance convenience, safety, and sustainability.
Ideal for homeowners, tech enthusiasts, and industry professionals, this presentation provides valuable insights into the trends, benefits, and future developments in smart garage technology. Stay ahead of the curve with our expert analysis and practical tips on implementing smart garage solutions.
White wonder, Work developed by Eva TschoppMansi Shah
White Wonder by Eva Tschopp
A tale about our culture around the use of fertilizers and pesticides visiting small farms around Ahmedabad in Matar and Shilaj.
You could be a professional graphic designer and still make mistakes. There is always the possibility of human error. On the other hand if you’re not a designer, the chances of making some common graphic design mistakes are even higher. Because you don’t know what you don’t know. That’s where this blog comes in. To make your job easier and help you create better designs, we have put together a list of common graphic design mistakes that you need to avoid.
Transforming Brand Perception and Boosting Profitabilityaaryangarg12
In today's digital era, the dynamics of brand perception, consumer behavior, and profitability have been profoundly reshaped by the synergy of branding, social media, and website design. This research paper investigates the transformative power of these elements in influencing how individuals perceive brands and products and how this transformation can be harnessed to drive sales and profitability for businesses.
Through an exploration of brand psychology and consumer behavior, this study sheds light on the intricate ways in which effective branding strategies, strategic social media engagement, and user-centric website design contribute to altering consumers' perceptions. We delve into the principles that underlie successful brand transformations, examining how visual identity, messaging, and storytelling can captivate and resonate with target audiences.
Methodologically, this research employs a comprehensive approach, combining qualitative and quantitative analyses. Real-world case studies illustrate the impact of branding, social media campaigns, and website redesigns on consumer perception, sales figures, and profitability. We assess the various metrics, including brand awareness, customer engagement, conversion rates, and revenue growth, to measure the effectiveness of these strategies.
The results underscore the pivotal role of cohesive branding, social media influence, and website usability in shaping positive brand perceptions, influencing consumer decisions, and ultimately bolstering sales and profitability. This paper provides actionable insights and strategic recommendations for businesses seeking to leverage branding, social media, and website design as potent tools to enhance their market position and financial success.
Expert Accessory Dwelling Unit (ADU) Drafting ServicesResDraft
Whether you’re looking to create a guest house, a rental unit, or a private retreat, our experienced team will design a space that complements your existing home and maximizes your investment. We provide personalized, comprehensive expert accessory dwelling unit (ADU)drafting solutions tailored to your needs, ensuring a seamless process from concept to completion.
2. The UX (interaction) design of a screen-based digital product or service is made up
of three, parallel creative problem solving activities: interaction design, information
architecture, and visual interface design.
Before designing the interface (which consists of visual layout, styling, micro-
interactions and animations, and navigation), we must first figure out
1. The flow of activities > diagramming workflow processes
2. The structure of information > developing the information architecture
3. UX Designers sketch in terms of Design Frameworks.
We make many maps and diagrams to iteratively sketch and communicate our ideas.
4. To design an application so that many different people can use it and software
developers can code it, we have to start with the big picture: what are the main tasks
that users want to be able to do easily (goal-directed task). These main tasks are
called primary use cases. Additional tasks are called secondary use cases and
rarely performed, but important tasks are called edge cases.
Computer programmers must code in terms of inputs (user or system actions) and
outputs (responses from the system), so we must consider and communicate to
them what people will do and how the system will respond.
The Interaction Design Step: Workflow Diagramming
5. THINK ABOUT LEVELS OF FOCUS FOR COMPLEX INTERACTIONS
3. Microinteractions
It is faster and easier to track and build out your interface when
you have workflow and IA diagrams to use as your roadmap.
Because development teams work iteratively, we use these maps
with programmers to collaborate on adjustments to the design.
1. Macro interaction
You created a Contextual Scenario last week to sketch the story
of the user’s intention and how your digital product will help
them achieve it through a series of goal-directed tasks.
2. Tasks = workflows
Look at your scenario. Identify each discrete task the user must
do in order to achieve their goal. Before you start to wireframe
your interface, create a workflow diagram for each task (be sure
to title the task with a verb phrase at the top of each workflow!)
You will also create an IA (Information Architecture) diagram to
structure your content. More on this later in the deck.
Wireframes show content and interaction. We
don’t spend time on high-fidelity graphic style in
the first iteration of digital product because we
know there will be changes to make after testing
its usability.
6. Look at examples of Workflows here on Pinterest.
These simple flows describe a
use case: how a user might
approach a goal-directed
activity.
Notice that the verb is inside
the shape.
This is good for basic
communication in a business
slide deck, but doesn’t work
as well when the diagram is
more detailed.
7. These flows are more
detailed.
Notice the title of the primary
use case at the top: it has a
heading and is phrased as an
action (starts with a verb).
There are verbs inside the
shapes, but these shapes
denote a SCREEN or
FUNCTION on a screen that
has many functions. Each is
labeled with the action the
user will take by using that
widget or page.
The diamond shape indicates
a decision point. It should
always ask a question that
can be answered yes or no.
These types of flow diagrams
are easiest to read when you
label the ARROWS with
actions (verbs)—either the
user’s action or the system’s
action.
8. Instead of indicating the
action in each widget or
screen-view in words only,
like this:
…some designers will
hand-sketch or use a
wireframing feature in a tool
like Axure, Visio, or Miro to
show the presence of
necessary elements or
components (sometimes
called widgets) on the
screen.
This is a great
way to start thinking about
the design of the screen
views. In this example, there
is a problem: the
reader doesn’t know
what the user is trying to
do in this flow. The flow
should be labeled with goal-
directed task labeled at top.
9. Flows can show exchanges between individuals, devices,
or organizations during the work flow. Divide using swim lanes.
10. Flow of in-person interactions using swim lanes at a macro-interaction level:
11. This is an annotated
wireframe that shows
successive views
on-click (follow the arrows).
A better option is to build an
interactive wireframe (“click-
thru”) instead. This will be your
next step.
Wireframing programs let
you add notes to click-thru
prototypes so programmers
can see the intended
components and their
behaviors to figure out how to
code how them.
15. The Information Architecture Step (IA)
IAs are the maps that show classifications of data or the structure of information that
allows others to find their own paths to knowledge to or to complete a task.
“IA” can also refer to the person who does the work, the Information Architect.
Depending on the company you work for, the role of Information Architect may be
part of a “Content Strategy” team, the group that structures the text, graphic, audio,
and video information for a digital product or service.
When we design an application, we must be able to explain how information should
be organized so that it (1) resembles the mental models of the people using our
system and (2) supports business/marketing objectives. Our goal is to make
comprehension and decision-making clear to others.
17. Information Architecture for finding a cookie recipe:
Cookies — Chocolate —
Nuts
Citrus
Spice
Chocolate Chip —
Checkerboard
Double Chocolate
Snowcaps
Recipe —
Title
Ingredients
Method
Yield
This type of IA is also called a content hierarchy.
18. Things to consider and document
User-facing
Name, Title
Content
Description
Content
Classification
Know what you are working with: define your content and IA before
designing navigation!
“Super Guru”
Support managers
who can solve
escalated
problems
“Super Helper”
Support staff in
the store and on
the phone with in-
depth product
knowledge.
“Guest”
In-store or online
Customers
Public Employee Employee
19. WHO WHAT WHEN WHERE WHY HOW
Roles Data Event type Geo-location Goal lists Instructions
Orgs or
groups
Entities,
objects,
concept type
Event details
Location
diagrams
Goal
relationships
Process, task
lists
(Role)
relationships
Materials
Event
structures
Location
details
Rules format
Process
detail
Role or
Group details
Specifications
Event
durations
Distances Rules details
Relationships
to tools
Examples of content to classify:
23. Example IA:
This is part of a specification from a UX designer to a programming team
showing “classes” for different areas of a website.
In database design:
ENTITY = a distinguishable real-world
object, tangible or intangible, that exists.
ATTRIBUTE = describes the elementary
feature, quality, characteristic of an entity.
Entity = Customer
Attributes = Name, Gender, Phone, Email
Entity = Car Model
Attributes = Year, Trim Package, Interior
Color, Exterior Color