Tag: Design Drive Thru

This site’s main goal is to provide important project update status to concerned teams. It al serves as a repository of design artifacts such as wireframes and mock-ups.

  • Component Master List: Elements of Interaction

    Elements of Interaction

    An action and a reaction that goes back and forth between entities is interaction. Here are simple examples of interaction between a user and computer:

    • you press the power button of your mobile phone and it causes the screen to light up, showing a pass code input screen
    • you input a pass code and the mobile phone unlocks, showing the home screen
    • you tap a particular app icon and you are shown its information

    It is worth noting that the last item is one of the simplest forms of interaction in web sites and apps – you tap an app icon and it opens or you go to a URL and the web site appears; it presents information and you consume it. Think of link surfing in Wikipedia – you simply activate link after link and consume the information available in the articles.

    Of course, added web site or app features provide for more interactions other than purely presenting and digesting information. Take for example 9GAG – instead of textual information, the user could consume textual and visual information, upvote, downvote, comment, and share memes.

    Elements of Interaction

    The Elements of Interaction aims to categorize the actions of the user while interacting with web sites and apps.

    Task

    A task is a work done by the user. It is usually direct to the point. For example searching for the keyword “alpaca”. Given that you are already on google.com, this entails inputting the word “alpaca” into the search bar and activating the search button.

    Alpaca Search
    Screenshots of google.com showing a task of searching for the term “alpaca”.

    Activity

    An activity is composed of several tasks. For example, contacting the best alpaca coat maker on the internet. Now, apart from doing the task of searching for the keyword “alpaca coat maker”, there are several tasks entailed in this activity such as reviewing the descriptions of top search results, looking for ratings, trying to visit all top five search results, picking the “best” according to your criteria, and finally, getting hold of them thru any communication channel available (contact form, chat, email, or phone).

    Best Alpaca Coat Search
    Screenshots of google.com and logcabinfarm.com showing the process of searching for the terms “alpaca coat maker” and visiting the top search result.

    Behavior

    A behavior is a user’s particular pattern of usage of a web site or app. This particular element of interaction creates a space for special cases that varies from user to user.

    From a low-level perspective, a user might have a peculiar way of accomplishing tasks or activities. From the example above, a user’s behavior in searching might be to go directly to the top result by activating the “I’m Feeling Lucky” button.

    Feeling Lucky
    A screenshot of google.com showing the button “I’m Feeling Lucky”.

    From a high-level perspective, the user might have a peculiar way of using a web site or app which could be not the main purpose of the web product itself. For example, some users use Instagram only for editing pictures but not posting them to Instagram.

    Instagram Alpaca
    A screenshot of Instagram Android app showing the Edit Screen with a handsome alpaca as the image being edited.

    Conclusion

    The Elements of Interaction puts the context in Elements of Information Structure. It puts the connections among the objects and components in a user interface based on how users might use the web site or app.

  • Mini-FFC #16 – Thoughts

    1st Topic: Dealing with Clients

    Speaker: Rina Malonzo

    • Listen to client needs – identify the real problem
    • Charge with eyes open – learn the product life cycle and the work involved
    • Set expections – be realistic, under promise and over deliver
    • Build trust – tell the truth, don’t disappear, failure isn’t an option
    • Tell clients if they are “wrong” – listen to why they don’t like a design, design for the customer, have an intelligent conversation – don’t simply say “OK”
    • Get a downpayment before starting a project
    • Get repeat business

    Showcasing Your Portfolio

    • Show your future – showcase the projects you want to attract
    • Show your best works in the first 5 items
    • Show at most 20 samples

    2nd Topic: PhoneGap

    Speaker: Chard Gonzales

    PhoneGap is a free and open source framework that allows you to create mobile apps using standardized web APIs for the platforms you care about.

    Source: http://phonegap.com/

    3rd Topic: RCSS

    Speaker: JP De Guzman

    RCSS (‘Recess’ / Narcissistic name – ‘Rain CSS’) is a PHP-based CSS Processor. Popularized by known CSS pre-processors such as LESS and SCSS, RCSS aims to bring the joy and fun back in writing CSS with nifty features straight out-of-the-box. Aside from the core feature built under its hood, it can be extended via plugins that anyone can easily write and share.

    Source: http://www.raincreativelab.com/rcss/

  • 2014 Resolute Resolution #2

    In meetings, only involve persons who can say a thing or two about your agenda.

  • The Two Pizza Rule by Jeff Bezos

    If a team couldn’t be fed with two pizzas, it was too big.

    https://buffer.com/resources/small-teams-why-startups-often-win-against-google-and-facebook-the-science-behind-why-smaller-teams-get-more-done