My portfolio pixeamdesigns.com is live now!
First Look of Allsaints.tv
Allsaints.tv is a Social Networking Website for Prayers. I Was involved in idea formulation, user research, requirements gathering, prototyping, designing and developing the website.
Tools employed were PHP5, Code Igniter, MySQL, Adobe Dreamweaver CS3, CSS, XHTML, Adobe Photoshop CS3 and Adobe Illustrator CS3. At present it is in testing phase and I am currently working on the Mobile App version.
Poster Design for a Picnic
Got a chance to do a real fun poster over the weekend. Check it out and let me know what you all think!
Reorganization of Craigslist.org
As part of my school project for Interaction Design,I had to analyze and reorganize the navigation system of Craigslist.org, an online community that facilitates the exchange of goods, services, and dialogue through posts and responses. In order to accomplish this goal, freelisting, card sorting and analysis were conducted to determine which items users generally buy and sell, and how they group like items together. The intended users for Craigslist.org are those looking to obtain something, give something away, or discuss a certain topic. The audience has a basic level of Internet browsing, especially if creating a post, and those responding to posts are comfortable contacting strangers on the Internet, who they may potentially meet. The participant pool consisted of users with these qualities, all of whom have previously bought or sold an item online. The “For Sale” Category was reorganized.
Craigslist(present design) Hierarchial Diagram
Craigslist’s navigation is hierarchical, divided into categories and subcategories. Once a user clicks on either a category or subcategory on the home page, he/she is directed to the list of posts in chronological order. The user must “pogostick” through the site, referring back to the main category before they may access a different subcategory. In the current organization scheme, information is sorted in an ambiguous fashion. There are nine core categories, eight of which contain sub-categories. Craigslist is considered to be “hyper local” as users can navigate to their specific locale or choose other regions or cities. While the existing alphabetical hierarchy is suitable as it ensures consistency across regions, many of the sub-categories lack clarity.
The site contains contextual links, which transport users to the sub-category page within the local region. The sub-category pages do not provide a listing of all available categories and sub-categories, which ultimately hinders navigability.
The site offers the ability to Search within the desired sub-category as well as search entire category sets from within a standard search function. It should be noted, however, that only several category sets are available for global searches from any page. These are presumably the most frequented sections of the entire site across all regions.
Craigslist(New design) Hierarchial Diagram
Craigslist(New design) Wireframe
The reorganization of the “For Sale” category:
- Hick’s Law: Reduced the number of navigation items so the information is easier to comprehend. Consolidated 37 items to 20 items (46% reduction)
- Reused nearly half of the old categories
- Removed confusing or overly vague categories (i.e., General, Materials, and Free)
- Items are listed in the alphabetical order, making it easier to find the items
The process flow diagrams for some of the typical tasks that can be carried out with the new design are shown below
Concept Map of the Usability Evaluation Methods in HCI
For my class on Interaction Design, I prepared a Concept Map of the various Usability Evaluation Methods. The nodes are boxes which are mainly the different methods. The links are the verbs that connect each of the nodes. The nodes are differentiated by color. The tool used to create this was bubbl.us. Initially a concept matrix was prepared to find the correlation between different elements.
Concept Map
Multichannel Mobile/Telematics Application Prototype
As part of my class project, I had to interactively prototype a web based application (service) called Pocket Realtor with an in-car (mobile) component in Axure that serves as an effective method of sharing information between buyers and sellers in the real estate domain. Pocket Realtor connects home buyers and home sellers with experienced agents, assists buyers in finding their dream home and helps sellers receive the best value for their home.
We divided the entire prototyping process into three phases:
1) Digital Narrative Prototype in PowerPoint.
2) Mid-fi Prototype in Axure for the website and mobile application.
3) Hi-fi Prototype in Axure for the website and mobile application.
Digital Narrative Prototype in PowerPoint.
The main goals of this phase were:
- Build a website that will be complimented by an innovative and easy-to-use mobile application where users can continue their search and schedule appointments with agents while on the go.
- Reach a user population that includes not only home buyers but home owners and real estate agents as well
- Offer comprehensive support and assistance that addresses the unique needs of each user
- Provide services that our competitors do not offer
- Create a design that allows for implementation of additional components in the future
Mid-fi Prototype in Axure for the website and mobile application.
The main goals of this phase were:
- Develop a mid-fi prototype to test the main navigation paths of the website and the mobile app.
- Because of the nature of the project, testing both a seller and an agent was preferred.
Mid-fi Prototype for app available here
Mid-fi Prototype for website available here
Hi-fi Prototype in Axure for the website and mobile application.
The main goals of this phase were:
- Develop a hi-fi prototype based on the results from surveys and evaluation.
- Add the top two requested functionality changes: viewing photos / walkthrough video of properties, and search by location using a mapping feature
- Refine the graphical elements so that this reflects iPhone standards for the app, and website standards /li>
- After speaking with agents, we choose to implement buyer capabilities as well.
- Additional research would be needed to confirm changes
- Cost analysis is needed. From our small sample size of people taking the survey online, 0% of the agents would be interested in additional feature if they needed to pay even a nominal fee. Focus groups may be a more appropriate method of determining whether this is true, or whether the results obtained in the online survey were skewed in some way.
- Initial research indicated that there is a definite need for this product not only for sellers and agents, but for buyers as well. However, focusing on sellers and agents is the best way to differentiate our site and web application in the market place
Hi-fi Prototype for app available here
Hi-fi Prototype for website available here
The main conclusion is as follows
Process Flow Diagram of installing Intel AppUp Client and downloading the “Angry Birds” Application
Process Flow Diagram of installing Intel AppUp Client and downloading the "Angry birds" Application
The Process flow diagram illustrates how to install the Intel AppUp Client on a Netbook or Personal Computing Device. and how to download the “Angry Birds” Application.
The device needs to have Windows XP or Windows 7 Operating System and Internet connection.
The Intel AppUp is a service that allows users to download and purchase applications to be used on netbooks or personal computing devices.
The “Angry Birds” is a paid game application.
The first part of the flow chart deals with installation of Intel AppUp.
The second part is the Login functionality.
Finally the last part deals with downloading the “Angry Birds” Application.
Summary On “PROTOTYPING FOR TINY FINGERS” by Mark Rettig
“Prototyping for Tiny Fingers” by Mark Rettig deals with advantages of using low-fidelity prototyping techniques (paper prototypes) over high-fidelity prototypes (fully functional prototype similar to the final product). He argues that more projects should use low-fidelity prototyping because of the inherent problems associated with high-fidelity prototyping.
The main problems of hi-fi prototypes (high-fidelity) are:
1. They take a long time to be created and changed when compared to low-fidelity prototypes.
2. Reviewers and testers tend to comment on superficial aspects rather than content.
3. Developers are reluctant to change something that they have crafted for hours.
4. Software prototypes can set expectations too high.
5. Just one bug in a high-fidelity prototype can bring the testing to a halt.
Paper prototypes provide a valuable and cost-effective means to evaluate and iterate design options before a team gets committed to coding or implementation. By this method, usability problems can be detected at a very early stage in the design process. They are easy to create and refine. They support iterative design and multiple evaluations. The main steps for creating and testing low-fidelity prototypes are listed below:
Building the Prototype
Simple materials like paper, card, adhesives and markers are required for constructing the prototype. Some means of recording the testing session (like a video camera) is also required. The prototype should be designed to contain the screens or interactive sequences needed to perform a series of tasks. Interface elements such as menus, windows, dialogues and icons need to be sketched on paper and created in advance.
Preparing the Test
Appropriate users within the target population need to be selected for the test. Realistic scenarios should be created for the evaluation. Pilot tests need to be conducted several times before testing with the selected users. The recording facilities need to be functioning at the time of the session.
Testing the Prototype
First, the user is greeted and put at ease by one team member. The test is facilitated by another team member who provides task instructions, encourages the user to express their thoughts and makes sure that everything gets done on time. One more team member sits before the user and ‘plays the computer’ by moving interface elements around in response to the user’s actions. The user makes selections and activates interface elements by using a pointing finger as a mouse. The user’s actions substitute for keyboard entries. Notes and recommendations are quietly taken down by the rest of the team members. A debriefing session will be conducted by the facilitator at the end of the session to ask further questions, gather impressions and express thanks. The information, observations and recommendations need to be analyzed and the prototype needs to be refined. The entire process needs to be repeated.
MY COMMENTS
I agree that paper prototyping is very useful in determining user’s reactions to the information architecture and sequencing of screens. But it does not convey to the user the feeling of interacting with the new system. We need to compromise on the fact that the device does not work. Other disadvantages are that there is limited error checking, navigational and flow limitations and limited usefulness for usability testing. I support a combination of both paper prototyping and software prototyping.
COMPARISON WITH ARNOWITZ APPROACH TO PROTOTYPING
This book proposes prototyping the business, functional, technical and usability requirements. It also suggests that prototypes can be based on assumptions. The assumptions are iteratively tested in a prototype while gradually being turned into solid requirements.
1. The first round of iteration help to visualize and idea to a quick wireframe.
2. The second round of iteration helps in validating or invalidating the assumptions. A wireframe showing more functional assumptions of the product is produced here.
3. In the third round, a storyboard prototype is produced from the wireframe. This helps in getting the end-user-focused requirements.
4. In the fourth round, paper prototypes are produced and requirements are validated quickly with direct user contact.
5. In the fifth round, high-fidelity prototypes similar to the final product and requirements are produced.
6. This is the final step and the assumptions produce solid data to commit to coding and implementation.
The entire series is repeatable. This book advocates the use of both low-fidelity and high-fidelity prototyping during the iterations process. Rettig’s paper describes the usage of only low-fidelity prototypes in the early stages of design and idea exploration phase.
Effective Graph Design Analysis
Android TweetDeck Beta Users Graph
As part of my school project in Interaction Design, I had to analyse a graph based on Kosslyn’s Design Principles. I chose this graph – “Android TweetDeck Beta Users by Phone” Graph which appeared in TheNextWeb.com on 13 October 2010.
Audience and Purpose
The intended audience for the graph are the TweetDeck Application developers. Additionally the graph would appeal to Android smartphone users.
TweetDeck is a Twitter application on mobile devices and desktops and the Beta version of its Android client had been released. During the beta testing period the developers at TweetDeck analyzed the handsets on 36,427 active beta testers’ Android smartphones. They used a pie graph to illustrate the various Android smartphones their testers were using.
Analysis
Design and Aesthetics
This graph has a lot of useful information about the different testers’ handsets. It consolidates the data in a very captivating manner by using different contrasting colors for each handset. This helps viewers and developers to understand the existing market for the application. The color and the handset information are given below the graph. The graph also shows the size of the wedges or portions to increase in the clockwise direction. But the graph has too many handsets which result in many wedges that are not easily identifiable.
Principle of Discriminability
Kosslyn’s Principle of Discriminability explains that visual properties must differ by a large enough proportion to be distinguished. This principle is clearly violated in the section of the image above. The wedges are too thin to be differentiated from each other. The colors at the top right side of the graph are not distinguishable to the users. Since there are so many wedges in the pie graph, the entire pie graph can be split into multiple pie graphs. Each pie graph should contain wedges that do not vary in proportions greatly.
Principle of Relevance
This principle states that “Communication is most effective when neither too much nor too little information is presented”. The TweetDeck Beta Application graph depicts the various handsets that have been used in the testing phase. The pie graph has associated different colors with each phone. But it has not conveyed any statistical information about each slice in the pie graph. This makes it very difficult to compare the portions, considering the fact that most of the portions differ from each other by small amounts. Relative percentages can be listed below the graph for each of the phones to convey more information.
The above image of the graph shows a dark portion which does not convey any information to the viewers. Many colors have been used to differentiate each portion. But some of the colors look very similar and it becomes difficult to identify the portions. In addition to different colors, the portions can be numbered to differentiate the different phones. Another suggestion is to split the pie graph into multiple pie graphs with lesser wedges.
Principle of Compatibility
This principle states that a message is easiest to understand if its form is compatible with its meaning. It means that more lines, wedges, bars etc. on the display should indicate more of the measured substance. This principle is satisfied in this graph. The wedges which show an increase in the number of handsets using the application has been shown by a larger wedge sizes.
Principle of Capacity Limitations
This law states that viewers have a limited capacity to retain and process information. This graph is too cluttered and has a lot of wedges. It conveys information about many handsets, which become difficult for viewers to track.
Principle of Salience
Salience is drawing attention to “large, perceptible differences” according to Kosslyn. The sizes of the wedges on the top left side of the graph are relatively larger than those on the right. It shows a visually striking difference.
The font size about the colors and their corresponding handsets below the graph need to be increased to improve readability.
Principle of Perceptual Organization
Viewers tend to group similar units as groups according to this principle. This graph tends to group the data with larger wedges on the left side and thinner wedges on the right side as two separate units.
Principle of Information Changes
According to Kosslyn, changes in properties or appearance of the elements on the display convey a change in information to the users. In this graph, each handset is displayed by a different color. The colors associated with each handset are listed below the graph.
Conclusion
The TweetDeck Application Graph tries to provide a lot of information that overwhelms the users. The information can be more effective if statistics or percentages were included. This enables the viewers to compare the different mobile devices. The graph has too many wedges and can be split into a series of graphs with lesser wedges which do not vary in great proportions. This would help viewers to compare the handsets in a better manner. Numbers should also be used to differentiate colors as many colors have slight variation. Font sizes of the color information below the graph can be increased to improve readability.
Reference
Kosslyn, S.M. Graph Design for the Eye and Mind. New York: Oxford University Press, 2006.
Research Paper on Near Field Communication(NFC) based Mobile Application in Shopping Domain
This post is an abstract of my Research paper at DePaul University. Near Field Communication (NFC) is a short-range wireless communication that was developed by Sony and Nokia. This technology enables simple and safe two-way interaction between electronic devices. It allows consumers to perform contactless transactions by a single touch or by keeping both devices in close proximity (less than 20 cms). It is an extension of the ISO/IEC 14443 proximity-card standard that combines the interface of a smartcard and a reader into a single device. NFC operates in the 13.56MHz frequency band over a distance of up to around 20 centimeters. A NFC tag is a printed circuit integrating an antenna and data from which data can be read or written by a NFC-enabled device. Currently this technology is used primarily with mobile phones.
There are mainly three operating modes for NFC Technology:
Read/Write Mode: In this mode the NFC enabled device can read or write data from external NFC tags.
Peer to Peer Mode: This mode allows two NFC devices to exchange data with a single tap or by keeping the devices close to each other.
Card Emulation Mode: In this mode the NFC device appears to an external reader to be a contactless smart card. This enables contactless payments and ticketing by NFC devices.
NFC communication always involves an initiator and a target. The Initiator device actively generates an RF field and the target device responds by modulating the existing field. There are two modes of communication:
Passive Communication Mode: In this mode, the target device may draw its operating power from the initiator-provided RF Field. In this case only the initiator requires batteries. The target can take the form of tags, stickers, key fobs, or cards that do not require batteries.
Active Communication Mode: In this Mode, both Initiator and Target device communicate by alternately generating their own RF fields. In this mode, both devices have power supplies.
KEY NFC APPLICATIONS
The following are the possible applications with NFC Technology:
Mobile ticketing in public transport: This is an extension of the existing contactless infrastructure.
Mobile payment: The device acts as a debit/credit payment card. For the credit card merchants, NFC enabled payments are easier and less costly to handle than cash and other traditional payment methods. In addition, users will have a record of even the smallest payments.
Smart poster: Smart posters promoting new products, services or events will have NFC tags embedded in the poster. By touching an NFC-enabled handset against the tag, the user may be directed to a web site for further information or to book tickets without the need to key anything into the phone to open the browser or input the URL.
Electronic keys: These are replacements for physical car keys, house/office keys, hotel room keys, etc. [2]
By observing the process of conventional mobile commerce and the characteristics of NFC technology, I have proposed the SmartShop Mobile Application to be used in shopping domain.Features of the SmartShop Application include Bill Payment, Coupon Download, Coupon Sharing, Product Catalogue Download, Product Catalogue Sharing and tracking Shopping Behavior.Some of the security issues that can arise with NFC Technology are transaction forgery, transaction denial and credit card information hacking. Methods have been proposed for securing the SmartShop Application and NFC device.
NFC is the wave of the future. SmartShop Application will change the entire shopping experience. It will take the customers’ user experience to a whole new level.
