UI and Interaction Design

Dashboard vs. Portal

vladgoh — Tue, 07 Sep 2010 15:39:06 +0000

What’s the Difference?
Dashboards provide an intuitive, ‘at-a-glance’ view of current operations while Portals provide accessibility.

Canvas, HTML5

vladgoh — Wed, 28 Jul 2010 14:29:50 +0000

Look at this, and more under Browse..

Drag and drop

vladgoh — Sun, 18 Jul 2010 00:33:44 +0000

Added some styling and cursor hinting in an attempt to make the dragability more obvious.

Heuristic

vladgoh — Tue, 06 Jul 2010 11:49:41 +0000

Heuristic (pronounced /hjʉˈrɪstɨk/, from the Greek “Εὑρίσκω” for “find” or “discover”) is an adjective for experience-based techniques that help in problem solving, learning and discovery. A heuristic method is used to come to a solution rapidly that is hoped to be close to the best possible answer, or ‘optimal solution’. A heuristic is a “rule of thumb”, an educated guess, an intuitive judgment or simply common sense. A heuristic is a general way of solving a problem.

In more precise terms, heuristics stand for strategies using readily accessible, though loosely applicable, information to control problem solving in human beings and machines.

Here are a few other commonly used heuristics, from Polya’s 1945 book, How to Solve It:

If you are having difficulty understanding a problem, try drawing a picture.

If you can’t find a solution, try assuming that you have a solution and seeing what you can derive from that (“working backward”).

If the problem is abstract, try examining a concrete example.

Try solving a more general problem first (the “inventor’s paradox”: the more ambitious plan may have more chances of success).

jQuery tools

vladgoh — Tue, 29 Jun 2010 20:57:06 +0000

jQuery Tools is a collection of the most important user-interface components for modern websites. Used by large sites all over the world.

Abstract

vladgoh — Sun, 27 Jun 2010 11:32:54 +0000

Donec odio massa, hendrerit id tempus id, euismod vitae sem. Cras eu arcu in nibh auctor lacinia interdum et risus. Fusce venenatis tincidunt euismod. Sed sagittis vestibulum diam vitae dignissim. Nunc dolor lorem, molestie vitae pharetra tempor, varius sit amet velit. Pellentesque porta risus fermentum mi volutpat sagittis. Donec in turpis lectus, vitae semper lacus. Suspendisse sed dui a eros sodales pulvinar sed vel arcu. Donec eros odio, feugiat non laoreet et, tempus vel erat. Vivamus vehicula turpis nisl, vitae condimentum lectus.

Ext GWT

vladgoh — Thu, 24 Jun 2010 19:11:51 +0000

Rich Internet Application Framework for Google Web Toolkit

Ext GWT is a Java library for building rich internet applications with Google Web Toolkit (GWT). Ext GWT includes:

High performance, customizable UI widgets

Full theming support with standard CSS

Well designed, consistent and fully documented source code

Native GWT solution with no external JavaScript or 3rd party libraries

Full remote procedure support using GWT RPC, JSON, and XML

Support for Java 1.5 features, including generics, enums, and varargs

Commercial and Open Source licenses available

Ext GWT supports all major web browsers including:

Internet Explorer 6+

FireFox 1.5+ (PC, Mac)

Safari 3+

Opera 9+ (PC, Mac)

Sencha Touch

vladgoh — Thu, 24 Jun 2010 03:19:06 +0000

The First HTML5 Mobile App Framework

Sencha Touch allows your web apps to look and feel like native apps. Beautiful user interface components and rich data management, all powered by the latest HTML5 and CSS3 web standards and ready for Android and Apple iOS devices. Keep them web-based or wrap them for distribution on mobile app stores.

Kitchen Sink - comprehensive collection from Sencha Touch (works on Google Chrome)

Expand-Collapse functionality

vladgoh — Fri, 18 Jun 2010 13:13:03 +0000

To show Expand/Collapse functionality in Axure use Dynamic Panels and Move Panels action.

Create a dynamic panel with one or more states containing the content that will be moved. Then, use the “Move Panel(s)” action to dynamically move the panel to a location or by a number of pixels from an interaction. One use of this action is to create expanding and collapsing regions on a form.

Create Tab Control using Axure

vladgoh — Thu, 17 Jun 2010 02:46:32 +0000

Create a dynamic panel with a state for each tab. For example, a tab control with three tabs has three states in the dynamic panel.

In each state, create the tab header and the contents of the selected tab.
Tip: To create a tab shape button, drag a Button Shape widget, right-click on the widget and select Edit Button Shape->Tab.
For each tab button, add a case to the OnClick event with an action to Set Panel State to State(s), then choose the state that corresponds to the tab. For example, on the first tab, add an action to “Set Tab Control Panel to State 1”.
To save time add the interactions for all three tabs in the first state, then copy/paste these tabs into the next two states and format the button styles as needed.
Generate the prototype and click on each tab button to see the dynamic panel state change.