Brian Dys

Category: Information Architecture

  • Information Ecology

    Users

    • Audience
    • Tasks
    • Needs
    • Information-seeking behavior
    • Experience

    Content

    • Content objectives
    • Document and data types
    • Volume
    • Existing structure
    • Governance and ownership

    Context

    • Business goals
    • Funding
    • Politics
    • Culture
    • Technology
    • Resources
    • Constraints

    References

  • Framed Up

    I still could not wrap my head around the whole idea of frames. However, I did like the structure that was described in relation to linguistics.

    • Surface Syntactic Frames – verb and noun structures
    • Surface Semantic Frames – action–centered meaning of words
    • Thematic Frames – settings
    • Narrative Frames – stories

    We could notice the structure—from the detail towards the bigger picture. Patterns like these are also relevant to Information Architecture.

  • Defining Elements in a User Interface

    There could be two approaches in defining elements in a User Interface (UI):

    • Sentence
    • Label

    Say, for example, we have a blog post that has a date. In order to define what kind of date it is, we could either define it in a sentence:

    • Published on 1 January 2020.
    • This blog post was published on January 1, 2020.

    or we could define it thru a label:

    • Date Published: 1 January 2020
    • Publishing Date: January 1, 2020

    Please note that in order to create an effective description that communicates its purpose, we have to identify the context in which the element is in. (more…)

  • Introduction to Information Architecture

    Introduction to Information Architecture 1

    How spaces and structures are designed in the information level.

    Purpose

    To empower designers in working in the Interaction Design stage.

    Outline

    • Intro
      • Information Architecture
        • Information, Data, Content
        • Definition
    • Main
      • Ontology
        • Definition
        • Framework
          • Nouns and Verbs
          • Controlled Vocabulary
      • Taxonomy
        • Definition
        • Facets
        • Types of Relationships
        • Diagrams
      • Choreography
        • Definition
        • Placemaking
    Glash Half Empty or Full?

    Content

    • Things that are present

    Data

    • Facts, Observations, Questions

    Information

    • Interpretations
    • Information is not Content

    Information Architecture

    The arrangement of the parts to make sense of the whole.

    Ontology

    The language that we use and the meaning that we intend.

    Nouns and Verbs

    Where to look for Nouns?

    • People – who are involved?
    • Features – what are the distinguishing aspects of the thing?
    • Paths – what do people look to accomplish?

    Controlled Vocabulary

    Parts of a Controlled Vocabulary

    • Approved Terms
    • Definition
    • Approved Synonyms
    • History of Term
    • Words We Don’t Say
    • Relationship Between Terms

    Exercise: Ontology Framework

    Digital Drop Game

    Taxonomy

    Definition

    • Classification, organization of things
    • Structure is a rhetorical tool
    • Taxonomy should depend on intentions (e.g., we want people to call us, we want people to refer other people)

    Facets

    In order to begin organizing, use facets:

    • Personality – what is it about?
    • Matter – what is it made or or not made of?
    • Energy – what are the related activities?
    • Space – where does it exist?
    • Time – when does it exist?

    Types of Relationships

    These are the common taxonomic patterns:

    • Equivalence – is the same as
    • Hierarchy – is a part of; is a type of
    • Sequential – is a predecessor or; is a successor of
    • Associative – is related to; is used with (not necessarily within the same family)

    5 Ways to Organize things:

    • Location
    • Alphabetical
    • Time
    • Category
    • Hierarchy

    Diagrams

    • Block Diagram (wire framing)
    • Association Diagram (mind mapping)
    • Swim Lane (shows different responsibilities within the same process)

    Choreography

    Definition

    • Steps user can or can not take across contexts and channels
    • Setting the rules for realizing intentions
    • Different UX in desktop and mobile
    • User access based on role
    • Different UX for novice user and expert user

    How does the language (ontology) change based on the context and channel?

    How does the structure (taxonomy) change based on the context and channel?

    Placemaking

    • Communicating intentions to users in a holistic manner
    • Considering the ecosystem to objects

    Deciding meaningful differences of taxonomy and ontology across contexts and channels

    The ability to zoom in and out of an experience to ensure you are serving your users

    IA is collaborative.

    IA is not a process, it is a result.

  • List or Group?

    In finding the best term for separating a collection of items, which to use—list or group?

    Brain dump:

    List implies linearity, structure.

    Group implies randomness.

    —

    In generalizing the semantics of all items in a collection—in an HTML document—go for group.

    <ul class="list group">…</ul>

<div class="group">…</div>

<dl class="list group">…</dl>

    —

    It is important to note that the all HTML elements in the examples could express hierarchy by nesting other elements—but it is in the collection of items that list or group provides semantics.

    To recap:

    Use list for collection of items that implies order (yes, even for <ul>).

    Use group for collection of items that does not imply order.

  • Exploring Name—Description—Purpose (NDP)

    But I know every rock and tree and creature
    Has a life, has a spirit, has a name
    Colors of the Wind

    In terms of User Interface Design, every element must serve its purpose—its reason for being. In able to be identified, it must have a name and a description of what it does.

    The Name—Description—Purpose Information Structure or NDP becomes a tool in identifying any UI element within a system. The Designer would have a glimpse of what it is called (Name), what it does (Description), and why it exists (Purpose). (more…)

  • The Outline: That Thing Before the Wire Frame

    As UI designers, it’s easy to jump into sketching UIs through wire frames. Afterall, UIs are commonly visual. But taking a careful step of planning before sketching is a rewarding way of ensuring that the information embedded into the UI is well-thought of.

    The Outline
    An example of the Outline used in PinoyHoops App

    Just like it making speeches or writing articles, the writer may create an outline. For UI designers, the Outline may be accomplished by these simple steps:

    • Step 1: What do you want to show the users
      Or what do the users want to see? Based on personas, list down the things that will help them achieve their goals or accomplish tasks.
    • Step 2: Content / component inventory
      Using the list in Step 1, break down each piece of content that will be put into the UI. You may also start with bigger groups thru components.
    • Step 3: Information architecture
      Now, rank the content and components based on the user’s task flows and based on importance
    • Step 4: Interaction
      Plot down connections between content and components. Ask yourself “what will happen if the user interacts with a component?”

    Each step, in general, is a task of prioritization – which is appears first? Which comes first? Which is not important enough to be the last?

    After having a list bearing the interaction of content and components, it will now be easier to sketch its corresponding user interface or the Wire Frame.

  • Component Master List: Elements of Information Structure

    Component Master List Illustration

    In this post, we will discuss Elements of Information Structure. We’ll use google.com as an example to demonstrate how information is structured in such a way that all its elements are identifiable in singles and in groups.

    Elements of Information Structure - google.com
    A screenshot of google.com’s home page.

    Elements of Information Structure

    Contents of web sites and apps can be called “information” – these are words, phrases, symbols, and any representations of elements that give meaning to the user. All information, to be effective, must be properly structured. Imagine a web site that does not show easily the information the user needs – that web site might need to restructure its information by prioritizing the more important ones or what the users usually need.

    Object

    An object is a singular element.

    Elements of Information Structure - Object
    Illustration 1. Objects are highlighted on google.com screenshot.

    Note: Some Objects are generalized like in the Navigation Items above. There are several components there (e.g., Apps, Notifications, Social, and Admin) which are listed generally as “Navigation Items”. Ideally, another illustration could show these interactions but for this post, we won’t go into that level.

    Component

    A component is a combination of more than one object.

    Elements of Information Structure - Component
    Illustration 2. Components are highlighted on google.com screenshot.

    Note: Name is considered a Component due to its HTML markup grouping wherein the Name Component could also contain taglines and other objects related to the name of the web site.

    Container

    A container is a UI element that contains objects and components. Examples of containers are pages or screens, dialog boxes, pop-overs, and panels to say the least. Container is very useful during interaction because it defines the confinements of the information that will be shown or hidden from the user’s view.

    Elements of Information Structure - Container
    Illustration 3. Container type is page.

    Constructor

    A constructor is a default section in a web site or app. Generally, these three constructors apply to all web products: Masthead, Content, and Colophon. The Masthead contains the name of the web product, the main navigation and search functionality; the Content, well, contains the main content; the Colophon contains additional information of the web product.

    Elements of Information Structure - Constructor
    Illustration 4. Constructors are highlighted on google.com screenshot.

    Sub-Constructor

    Updated
    One example of a sub-constructor is a sidebar which attaches to any of the three constructors. Sidebars are denoted by the HTML tag <aside>. It contains and supplementary information, widgets, and plug-ins.

    View

    A view is an instance of the web site or app. Usually this is also the name of the current page or screen container the user is in. It basically answers, “What page or screen is the user currently viewing?”

    Elements of Information Structure - View
    Illustration 5. View is highlighted on google.com screenshot.

    Conclusion

    Each red label in the illustrations above can be used as official names of the objects and components. Team members working on the same project will now have a standard name for components and this could lessen the confusion when referring to the said components.