Embed Size (px)
Citation preview
INFM 700: Session 7
Grab Bag: “Real World” IA Software & Business + Responsive Design
Paul JacobsThe iSchoolUniversity of Maryland
Wednesday, Oct. 23, 2013
This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 United StatesSee http://creativecommons.org/licenses/by-nc-sa/3.0/us/ for details
iSchool
Today’s Topics Review of Faceted Navigation
Some Thoughts: Information Architecture in the Real World
Software Tools Content management systems Portals Others (storefronts, personalization, . . .)
Business Issues
Mobile Web/Responsive Design – Survey and Discussion
IA & The Real World
Software Tools
Business Issues
iSchool
Faceted Hierarchies Alternative to single and poly-hierarchies
Basic idea: Describe objects along multiple facets Each facet has its associated hierarchy
Issues: What’s a facet? How do you navigate faceted hierarchies?
iSchool
Faceted Browsing Example
iSchool
Faceted Browsing Example
Issues and Tricks
Deploying Search
iSchool
Faceted Browsing Example
Demo: http://flamenco.berkeley.edu/demos.html
Issues and Tricks
Deploying Search
iSchool
Advantages of Facets Integrates searching and browsing
Easy to build complex queries
Easy to narrow, broaden, shift focus
Helps users avoid getting lost
Helps to prevent “categorization wars”
iSchool
IA in the “Real World” What is the Real World?
Anywhere where our work affects profits, social justice, public service, organizational efficiency, …
Companies, universities, nonprofits, government services, …
Almost anywhere but here! (Not class, not research)
What’s the same (between the Real World and our in-class “textbook” experience) Fundamentals (concepts, web technology) Most of the methods (e.g. organization/navigation, card
sort, blueprints, wireframes, …)
IA & The Real World
Software Tools
Business Issues
iSchool
“In the 21st century, setting up a Web site where people can go on and buy something is not that complicated”
Sen. Marco Rubio, Republican of FloridaFox News Sunday, Oct. 20New York Times, Oct. 21
iSchool
IA in the “Real World” (cont’d) What is different?
Organizational issues (esp., but not limited, to politics) Money (sometimes it’s there, sometimes not) Timelines and time pressures Diversity of backgrounds, views, ages, etc. (with
respect to technology) Scale and stakes (e.g. billions of users, up to $1bs) More emphasis on getting it done, often less on
novelty/leading edgeIA & The Real World
Software Tools
Business Issues
iSchool
How Does This Affect IA? Organizations
Remember “information ecology” – content, users, context
Web sites reflect organizational strategy, culture, and values
Stakeholders need to be identified, included Approval process (e.g. business case, ROI) Legacy systems, predetermined choices
IA & The Real World
Software Tools
Business Issues
iSchool
Refresher (from eBay Study)
IA & The Real World
Software Tools
Business Issues
iSchool
Time & Money Most organizations are highly budget-driven
Skilled labor is a precious commodity
That said, people are sometimes easier to come by than capital (“fixed” cost vs. incremental)
Usually projects involve a mix of vendors, consultants, staff, but mix can be skewed (by budget, politics)
“Twice as long and twice as much” mantra – little reward for optimism in the real world
IA & The Real World
Software Tools
Business Issues
iSchool
Working with Different Groups Explaining technical concepts, benefits to non-
technical people
Embracing marketing
Tolerating “bean counting”
Managing the “FUD” factor (Fear, Uncertainty, Doubt)
IA & The Real World
Software Tools
Business Issues
iSchool
Software Tools: Overview Maybe the most important decision you make
Trends in the industry Increasing complexity Consolidation Interoperability (e.g., objects, XML, mashups)
Key IA software tools Back-end databases Content management systems Portals “Middleware” Personalization, other utilities
IA & The Real World
Software Tools
Business Issues
iSchool
Software Tools (Survey) Note: Updated 2006
IA & The Real World
Software Tools
Business Issues
Software products used to perform IA work:
Automated Categorization (16.2 %)Search Engines (56.4%)Thesaurus Management (19.7%)Portal or Enterprise Knowledge Platform (37.6%)Content Management Systems (65.8%)Web Analytics/Tracking (62.4%)Diagramming Software (79.5%)Prototyping Tools (70.9%)User Research and Testing (not included in survey)
M&R, p. 355, also on line:http://iainstitute.org/en/learn/research/survey_3_software_for_ia.php
iSchool
Software Tools (Survey)
IA & The Real World
Software Tools
Business Issues
Software products used most to perform IA work:
26.5%: Visio 11.0% Excel 10.1% Word 8.0% PowerPoint
http://iainstitute.org/en/learn/research/survey_3_software_for_ia.php
iSchool
Software Tools: Apples & Oranges Tools used “behind the scenes” in IA, site design
Diagramming, prototyping, research, etc. Visio, OmniGraffe, Survey Monkey, Dreamweaver,
Websort, …
Platforms and key components of sites Search engines, thesaurus, categorization Content management, portals Databases (why aren’t they in survey results?)
Other site management tools Analytics (e.g. WebTrends), SEO
IA & The Real World
Software Tools
Business Issues
iSchool
Web Content Management
Helps organize, maintain, deliver web pages Storage, tagging, version control and maintenance Dynamic page creation (usually from a database) Other features, such as advanced layout, user
management and personalization, web services
Products and vendors Interwoven (now part of Autonomy, owned by HP) –
LiveSite, TeamSite, Metatagger EMC Documentum Vignette (now part of OpenText) Microsoft CMS/Sharepoint Open Source (Drupal, Joomla, WordPress, Plone)
IA & The Real World
Software Tools
Business Issues
iSchool
Focus: Web Content Management (CMS) Why use a CMS?
User benefits/features: personalization (constituent management), services integration, search, extensibility, accessibility, community
Client/admin features: theme/template maintenance, ease of control/modification, security
Other features, such as advanced layout, user management and personalization, web services
What CMS to choose/tradeoffs Open Source (esp. Drupal, Joomla, WordPress) Commercial CMS/Portal Roll-your-own (PHP/MySQL/HTML/CSS) What are the tradeoffs?
IA & The Real World
Software Tools
Business Issues
iSchool
Example: OpenText Teaser
“OpenText's Web content management (WCM) products enable you to deliver an engaging online experience for your customers, employees, constituents, and interested visitors. Whether you’re looking for an easy-to-deploy, departmental intranet, a highly dynamic self-service Web site, or a media-rich global Web application, OpenText has the right Web content management product to meet your organization’s unique needs, on premises or in the cloud.”
Example case study: DC Office of the CTO (octo.dc.gov)
“Managing content for 125 agency Web sites with over 200,000 pages of unstructured content”
Improved productivity and efficiency for content producers, site developers.
With Portal, OCTO created a variety of homepage, landing page and listing templates as well as a variety of detailed pages that agencies could pick and choose from to meet their needs. This created a standard look and feel across the sites while allowing customizations to fit each agency’s individual needs
Better customer service and regulation compliance.
Savings of time and development costs.
Mobile site will allow users to access news and services via mobile devices
IA & The Real World
Software Tools
Business Issues
iSchool
iSchool
Portals
Like CMS, also integrates with other functionality Roles, locations, further customization Integration with legacy databases and systems
Products and vendors Microsoft Sharepoint IBM Websphere Oracle Portal (formerly BEA, Plumtree, Weblogic, etc.)
IA & The Real World
Software Tools
Business Issues
iSchool
Example: IBM WebSphere
Teaser: “IBM® WebSphere® Portal Server is the foundation offering of the
WebSphere Portal product family, with enterprise portal capabilities that enable you to quickly consolidate applications and content into role-based applications, complete with search, personalization, and security capabilities. ”
Example case study (see also http://www.demos.ibm.com/solutions/portal/ )
“By adopting the SOA approach using WebSphere Business Modeler, IBM Process Server and IBM WebSphere Integration Developer, there is no application or information that we cannot reach." - Fred Nay, Director of Computing Services, Ball State University
IA & The Real World
Software Tools
Business Issues
iSchool
M&R on Portals
IA & The Real World
Software Tools
Business Issues
“The vision of seamless, intuitive access to all enterprise and third-party content independent of geography, ownership, and format is compelling and completely unrealized. These tools claim to do everything. Make sure you know what they do well.”
M&R, p. 358
iSchool
Other Software
Thesaurus management Help build custom lexicons, taxonomies, controlled
vocabularies Examples: MultiTes, DataHarmony
"I have been searching for a thesaurus management tool that would aid me in the development of multiple taxonomies within a single structure and export in XML. When I researched the market, I saw MultiTes recommended more than any other package. After reviewing its price structure and available tutorial, I was sold." Lydia Bauer Content Librarian H&R Block
“I've been using MultiTes 7.1 for several years to create thesauri for my journal indexes and have found it quite useful. I just started to use the new release, MultiTes 2005 Pro, and everything from data entry to reports, including output in HTML or XML, and importing of text files is much simpler and more intuitive. It's definitely worth checking out if you're in the market for thesaurus software.” Carolyn Weaver Weaver Indexing Service www.weaverindexing.com
Others
IA & The Real World
Software Tools
Business Issues
iSchool
Business Issues (Early On) Many mentioned already (e.g., politics, enlisting
stakeholders, money, existing infrastructure. etc.)
Making the business case: ROI vs. “Columbus and the New World” Budgets and total cost of ownership “Buy in”
Defining the strategy Align actions with business goals Show examples Iterate, and involve users
IA & The Real World
Software Tools
Business Issues
iSchool
Business Issues (What Goes Wrong)
We’re late, and we’re over budget – why? Overly optimistic projections Done in by the vendor/consultant sales team Client doesn’t supply needed input Can’t find the right people (“mythical person month”)
Nothing seems to work – why?
Other vendor/people issues
It looks great to me, but the client doesn’t agree Requirements creep Management changes Business changes
IA & The Real World
Software Tools
Business Issues
iSchool
Recap – Software & Business Issues IA in the “real world” is as we study it, but with
strings attached (time, money, bureaucracy)
Software tools are a necessary ingredient of any technical solution: Must be approached very carefully Often make things much easier Can make this much more complex, especially with
large, disparate sites “Point solutions” are expeditious, “Integrated solutions”
favored by IT can be big wins, or big losers
Long-term business success depends on focus, buy-in, careful vendor selection, constant user & stakeholder involvement
IA & The Real World
Software Tools
Business Issues
iSchool
Responsive design is…
“a web design approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computers monitors to mobile phones).”
Ethan MarcotteCoined term responsiveA List Apart, 2010
iSchool
2013: The Year of Responsive Design
“For those of us who create websites and services, all of this leads to a singular conclusion: A million screens have bloomed, and we need to build for all of them.”
– Pete Cashmore
Pete CashmoreFounder/CEO - Mashable
iSchool
Getting ready for 2014
iSchool
Mobile site
1. Different versions of one site
2. Multiple codebase
Adaptive design
1. Sniffs for specific end device
2. Loads pre-defined layout based on result
What responsive design is not
iSchool
• CSS3: content layout tailored to screen size
• Specify width, height, orientation (landscape/portrait), resolution
1. Media Queries define breakpoints
iSchool
<!-- CSS media query on a link element -->
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />
<!-- CSS media query within a style sheet -->
<style>
@media (max-width: 600px) {
.facet_sidebar {
display: none;
}
}
</style>
Media query code
Consists of1. Media type
• Screen• All
2. Expression• Orientation• Min-width• Max-width• Device-aspect ratio• Device-height• Device-width
iSchool
<link rel="stylesheet" media="screen and (color)" href="example.css" />
Combining expressions
And/Or/Not
1. And = AND
2. Comma = OR
3. Not = NOT@media screen and (color), projection and (color) { … }
<link rel="stylesheet" media="not screen and (color)" href="example.css" />
iSchool
COMMON SIZE BREAKPOINTS/BREAKRANGES
• Breakpoints – based on content/layout
• Not based on device!• # of layouts can range
from 2-5 (ish)• 320 – 480 pixels Phone• 768 – 1025 pixels Tablet• > 1024 Desktop
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) { … }
@media only screen and (min-device-width :768px) and (max-device-width : 1024px) { … }
@media only screen and (min-device-width :768px) and (max-device-width : 1024px) and (orientation: portrait) { … }
@media only screen and (min-device-width :768px) and (max-device-width : 1024px) and (orientation: landscape) { … }
iSchool
• Ability to scale = dependent on fluid design
• No more fixed width; pixels
• Think in percentages and proportion
2. FLUID GRID
Photo credit: Robert Couse-Baker, Creative Commons
iSchool
2. FLUID GRID
iSchool
3. Images & Videos resize Issues:
1. Have to serve largest version of image to cover all scaled amounts OR
2. Use media queries to serve different images per screensize
To start:
1. No width/height attributes on <img> tag
2. Add img {max-width: 100%;} to CSS
iSchool
3. Images & Videos resize - workarounds
Icon fonts
•Scalable font
•Often open source
Adaptive Images
•Add .htaccess, 1 php file, javascript call
•Properly sized images created on the fly
•www.adaptive-images.com
iSchool
4. Remove non essential content
Photo credit: jonasginter, Creative Commons
• Mobile-first mantra
• Focus/concentrate “must” have content for small sizes
• Ask your audience!
• Review analytics to validate
• RD isn’t about mobile!
• It’s about device size.
• What experience is appropriate for small, medium, large?
• Don’t make assumptions that can’t be validated
iSchool
5. Rethink navigation for small screens
• Ask yourself:
• What width is too narrow to tap easily?
• Clue to breakpoint size
iSchool
5. Rethink navigation for small screens – simple padding
Source: http://responsivenavigation.net
iSchool
5. Rethink navigation for small screens – select menu
Source: http://responsivenavigation.net
iSchool
5. Rethink navigation for small screens – simple toggle menu
Source: http://responsivenavigation.net
iSchool
5. Rethink navigation for small screens – multi-toggle menu
Source: http://responsivenavigation.net
iSchool
5. Rethink navigation for small screens – off canvas slide menu
Source: http://responsivenavigation.net
iSchool
EXAMPLES OF RESPONSIVE DESIGN
iSchool
World wildlife fund
www.wildlife.org
Source: http://mediaqueri.es
iSchool
Water.org
www.water.org
Source: http://mediaqueri.es
iSchool
Mercy Corps
www.mercycorps.org
iSchool
The Horizon Foundation
www.thehorizonfoundation.org
iSchool
Boston Globe
www.bostonglobe.com
Source: http://mediaqueri.es
iSchool
New York Times
www.nytimes.com
iSchool
Time
www.time.com
Source: http://mediaqueri.es
iSchool
NY Public library
www.nypl.org
Source: http://mediaqueri.es
iSchool
Barack obama 2012
www.barackobama.org
Source: http://mediaqueri.es
iSchool
St. Paul’s School
http://www.stpaulsschool.org.uk
Source: http://mediaqueri.es
iSchool
GEORGE MASON U SCHOOL OF LAW
www.law.gmu.edu
Source: http://mediaqueri.es
iSchool
Smashing magazine
www.smashingmagazine.com
Source: http://mediaqueri.es
iSchool
Stuff and nonsense
stuffandnonsense.co.uk
Source: http://mediaqueri.es
iSchool
REVIEW OF HOMEWORKAND DISCUSSION
