Zecco Presentation

47
Sean Patrick Coon User Experience Director .Strategy .Research .Information Architecture .Interaction Design .User Interface Design seanpatrickcoon.com | [email protected]

Transcript of Zecco Presentation

Sean Patrick Coon User Experience Director .Strategy

.Research

.Information Architecture

.Interaction Design

.User Interface Design

seanpatrickcoon.com | [email protected]

Under The Hood

The Financial Industry, Information Architecture

and Web 2.0

How She Handles & Moves

The Behavior and Design of the Interface

Discussion

Under The Hood

The Financial Industry, Information Architecture and Web 2.0

The Financial Industry Is A 2.0 Challenge

Under The Hood

Structure - How the parts of a thing relate to each other; how it is "put together".

Construct - A concept that describes and includes a number of characteristics or attributes. The concepts are often unobservable ideas or abstractions.

Under The Hood

“There are three orders of order. In the first, we organize the things themselves (hierarchy & equivalence). In the second, we separate the metadata from the things and organize them (associative). In the third, everything is digital and that changes everything because the first two orders are constrained by the physical. In the third, a leaf can (and should) hang on more than one branch; messiness becomes a virtue; everything is metadata; the owners of the information no longer own the organization of that information.”

“Everything is Miscellaneous”

Under The Hood

-David Weinberger, co-author The Cluetrain Manifesto

Traditional Language Relationships Hierarchical Equivalent Associative

Under The Hood

Hierarchy DowJones Technology

Internet Software & Services amazon.com

Under The Hood

Equivalence (Dow, Big Board) DowJones

(IT, Tech) Technology (Internet Apps) Internet Software & Services

(Amazon, A9) amazon.com

Under The Hood

Associative (Dow, Big Board) DowJones (S&P 500) (IT, Tech) Technology (Biotechnology)

(Internet Apps) Internet Software & Services (Technical & System Software) (Amazon, A9) amazon.com (BN.com, ebay, Apple)

Under The Hood

Relational Data (Dow, Big Board) DowJones (S&P 500) (IT, Tech) Technology (Biotechnology)

(Internet Apps) Internet Software & Services (Technical & System Software) (Amazon, A9) amazon.com (BN.com, ebay, Apple)

Under The Hood

Language Drives Everything…

Under The Hood

Architects Attempt To Make Order Out Of Chaos

Under The Hood

[…] “the interesting part of the equation is that the client is using (and just purchased an enterprise wide license for) a Vignette CMA to publish content. all templates (minus search results) are already in play. we're only coming in for the "taxonomy" angle. so i'm now retro-fitting meta-data solutions (driven from the CV) into existing content templates. now they have explicit relationships established in theory (breadcrumb, related topics, etc.), but in practice? it's explicit, but the publishing process and results are more manual and static and therefore does not leverage key relationships that support the business objectives of the client. i know it's just as much (if not more of) a manual process to publish AND index with these parameters, but it's a long-term solution approach. how they ultimately "build" their solution down the road? governance, politics and culture shock will determine that. right now i'm just holding on for the eight count and trying not to get "bucked."

i have four weeks to index a solid portion of the existing objects to the CV (heh heh... ugh), so a thesauri dev/management tool is priority number one. i'm fully aware that there is no "off the shelf" product for the ultimate development and deployment of the CV/CMA "type" solution. if there was?... hmm. life in general would be pretty sweet, no?” […]

http://www.info-arch.org/lists/sigia-l/0102/0167.html

03/2001Web 1.0: A Piecemeal of Brand & Data

Under The Hood

“Metadata becomes what you already know that you use to find out what you don't yet know. The content of the book now can be metadata to find the author's name. But, since metadata is a lever that increases knowledge, when everything is metadata, knowledge increases dramatically. And the point about mess: In the first two orders, a mess is inefficient. In the third order, you clean up a mess by arranging metadata, without ever touching the stuff itself. So, there can be as many ways of ordering it as we want.”

Under The Hood

“Everything is Miscellaneous”

-David Weinberger, co-author The Cluetrain Manifesto

Web 2.0: An Instant Relational Database

Under The Hood › My Personal CMS With Dynamic Controlled Vocabulary

Web 2.0: An Instant Relational Database

Under The Hood › Resulting Domain Tag Cloud

Web 2.0: An Instant Relational Database

Under The Hood › Resulting Domain Tag Cloud

Web 2.0: An Instant Relational Database

Under The Hood › Resulting Cross-Domain Tag Cloud

Web 2.0: An Instant Relational Database

Under The Hood › Personalized Tag Cloud

Web 2.0: An Instant Relational Database

Under The Hood › Image Object Tagging

Web 2.0: An Instant Relational Database

Under The Hood › Image Object Tag Clusters

Web 2.0: An Instant Relational Database

Under The Hood › Image Object Discovery Via Tagging

Hierarchy has questionable usefulness • It forces business jargon and constructs onto people

• It is limiting in terms of extending navigation

• People don’t browse for information; they search for information

Equivalence can be automated • The more searches performed in total, the more synonyms can be presented

• Clusters driven by co-occurance is a powerful information retrieval technique

Associative relationships are personal, yet absolute • Pre-programmed associations have bias (to constructs within hierarchy, business and personal objectives, etc.)

• Other forms of associations are absolute (x = x), therefore don’t need preparation, only implementation

Web 1.0 to 2.0: An Important Shift In Thinking

Under The Hood › Moving From Manual To Automatic

Applied To Data Visualizations: Repurposing Structure

Under The Hood › Endless Visualization Opportunities

Begin!

How She Handles & Moves

The Behavior and Design of the Interface

Behavior & Interface Review 1. Community Trading 2. Platform Account 3. Signup

How She Handles And Moves

Overuse of Tab Navigation - Confusing when navigating deeper into the interface - Better interaction affordance will provide clarity

Top Blog Posts - Organization doesn’t read like a blog - RSS feed isn’t particular to a section

How She Handles And Moves ›› Community

Blog Needs Personality The blog should represent the Zecco brand, but more importantly, it should represent the knowledgeable people who are doing the blogging

How She Handles And Moves ›› Community

Personalize To Create Trust & Establish Brand - Let bloggers/members upload a personal icon - Provide a clear link to their own blogs/profiles - Build meta-data schemes (portfolio) into the icon object

How She Handles And Moves ›› Community

Make the blog… a blog

- If editorials exist, present them within the midst - Separating content by type reduces community - Community then begins to look like a magazine

How She Handles And Moves ›› Community

Blog posts need meta-data

- RSS and specific interfaces will rely on meta-data - Imagine tags as pulling interfaces and people together

How She Handles And Moves ›› Community

Under The Hood Of Content Creation

- Posts need to be prepped in order to be picked up by various templates, providing contextual navigation to a permalink with related, topical information

- The miscellaneous nature of language can allow for precision, but it has a difficult time producing exacting degrees of associative relationships.

- If a post is about Apple and Google, yet only mentions Microsoft in passing, the miscellaneous nature of language might confuse a system by giving equal prominence to Microsoft. This creates higher site visitor bounce rates.

- If the user were to tag a post explicitly with “Apple” and “Google,” leaving off Microsoft, then code can use that priority to develop associative relationships between content & navigation by populating particular interface templates.

How She Handles And Moves ›› Community

How She Handles And Moves ›› Community

How She Handles And Moves ›› Community

How She Handles And Moves ›› Community

Global Navigation

- Very confusing categorization and navigation design - “Reference” and “About Us” are apples compared to the oranges of “Zecco

Trading” and “Community” - “Go Trade” is a key path for trading, while the remainder of same-level tabs

are edge cases. They do not belong together - Recommendation would be to have no tabs under “Zecco Trading,” default

to the trading environment and provide different affordance for supporting trading interfaces

How She Handles And Moves ›› Trading Platform

Who’s Using The Platform

- Active Trader vs. Long-Term Investor - Good context for the former, yet limiting for the latter

How She Handles And Moves ›› Trading Platform

Priorities

Instant availability of a trading interface and context to open orders means that timely trading is of the essence to the primary design persona. Is that true?

Form behaviors

Do not allow for avoidable errors. In this case, the preview order and quote buttons should be grayed out until all pertinent fields have a character assigned. On submit, then perform a validation check (good symbol? No bad characters in quantity? Etc.)

How She Handles And Moves ›› Trading Platform

Introduce Community To Equation Community + Trading platform = High Value Social Network

How She Handles And Moves ›› Trading Platform

Create a simple form; larger fields, no clip-art

How She Handles And Moves ›› Account Opening

Be wary of redundant interfaces. Work steps into signup interface to set user expectations of process.

How She Handles And Moves ›› Account Opening

The save application feature is a great idea. But after I gave my application a name, on submit it took me to a confirmation page with no way back.

How She Handles And Moves ›› Account Opening

- The application needs to be broken down into sub-steps.

- During data entry, javascript check for errors

- After each page submission, check remaining fields for errors.

- More precise error language needs to be implemented (I can’t tell what’s wrong with my address)

How She Handles And Moves ›› Account Opening

Once I received the confirmation screen, I saw the “Go Trade” button, so I clicked on it and it took me back to the account application screen.

The site needs to be smarter; the interface needs to react conditionally based on the current account state and/or user input.

How She Handles And Moves ›› Account Opening

Takeaways - Revisit requirements for primary and secondary personae - Develop interface scenarios around user goals - Less is more; prioritize in the interface - Craft interface that value participation with community - Move from hierarchical to relational constructs - Context creates meaning, so use meta-data wisely