👋 Oi, mga repapips, Brian Dys here! I love music, photography, and creative stuff like UX design and art. This is a place where I collect my thoughts and works. Apart all these, I’m Jaycelle’s better half and Bryce’s dad. 🥰
About Snippet
0
Comment
In our team, we have something called an Interaction Diagram integrated into our Design Process.
Basically it is a collection of wireframes in context – whether of the whole web product or of a simple task or activity. The diagram shows the layout of components as well as their interaction with other components.
We’re using it consistently as part of our communication with web and app developers. It has proven to be very useful since its inception a year ago (October 3, 2013).
Jesse James Garrett’s Visual Vocabulary for Information Architecture is one of our main references in establishing the Interaction Diagram.
—
Authors of the Interaction Diagram:
- Michelle Villanueva
- Brian Dys Sahagun
Consider this scenario:
- you are the product owner of Siete Baracos (a tool that helps people with coffee measurements and ingredients)
- how will you inform the designers, developers, testers about the basic technical information of the product?
- thru a Technical Document, of course!
So here’s the basic format of the document:
Name: Siete Baracos
Description: Siete Baracos is a tool that helps people in making coffee thru measurements and ingredients.
- Website URL: http://sietebaracosapp.com
- Google Play URL: https://play.google.com/store/apps/details?id=com.siete.baracos
Platform: Web
- Purpose: Brochure
Browser
- Primary Device: Desktop Computer
- Secondary Device: iPad
- Lowest Browser Version Supported: IE 8
- Mobile Response: 768 px
Framework
- Bootstrap
Other examples:
- Template System (Python, PHP)
- CMS (WordPress)
- HTML (Bootstrap, Foundation, Web Starter Kit)
- None (Plain HTML)
Platform: Android
Device
- Primary Device: Samsung Galaxy Y
- Secondary Device: Any
- Lowest Version Supported: Froyo (2.3)
—
These basic information of the product acts as guideline and sets the context in which the product revolves around.
Now, team members will not blindly test the app using a device lower than the version stated.
Categories
October 2008
It was a very early morning at 10 a.m. I was half asleep, half awake when a phone call jolted me from sleepiness. The signal inside the apartment was so weak that I went outside to answer the call. It was an invitation from Chikka for an interview.
A mere seven months ago, I resigned from a night-shift job and ventured onto the mountains – equivalent to working freelance without a clear business plan. The offer from the other line was a real wake-up call for me to set focus once again into designing for the web. The position being offered was quite new to me – User Interface Designer. I said that as long as it’s on a senior level, I was interested.
Web products need to be supplied with a Technocal Document. Its content are the basic specifications of a mobile app or website in the following aspects:
Filled-up by developer
- Programming Language
Filled-up by product developer
- Browser Version Support
- Mobile Version Support
Filled-up by front-end designer
- Mobile Response
This document aids all team members involved in the project by providing with a preview of each team’s specifications. It also puts in context the capabilities and limitations of the product.
Consider this scenario:
- the mobile app is in its Behavioral Testing stage
- the tester is informed that the mobile app is supported under a very old version of Android
- the tester ensures that the mobile app is tested on all key versions of Android
The same goes for websites wherein each team member knows that the product will not be supported in IE versions 8 and below.
User Research
- Input – research and requirements; output – design artifacts, actual product
- How did we come up with the problem and solution?
- Have one solution and validate with users
- Set target users; create personas
- Continuous user research
- Improve the product for both the business and the users
UI Review/Usability Testing
- Refer to Components Masterlist
- Refer to Usability heuristics
- Create metrics
- Create activities and tasks
- Create directions on how to assume a persona
I’m in the process of letting go/disposing of/getting rid of/selling stuff that I no longer need around the house. In line with this activity, I signed up for two online shops, namely: OLX and Tackthis. Both offer free registration so I went on to set up my online shops.
Just a disclaimer, this blog post does not intend to rigorously compare the two services – I would simply like to document my experience as a user/seller – specifically the noticeable stuff whether positive or negative. Also, this could be an ongoing piece of “review” as I go along with this new adventure of garage selling on the internet.