Lunch...or UI schematics

[RyanH300']

What's for lunch?!

OK, seriously. I'm working on wireframes and UI flow for visual layout on our project. What type of navigation layouts have you found to work? Are you using architecture schematics similar to HTML, with "page views" as vocabulary?

[dejoie]

My suggestion is not to limit yourself to the traditional html page view approach. The architecture should be more like a client application than a web page. I know that's kind of vague, but I hope it's helpful.

What was for lunch anyway?

- mark

[hrucker]

Were you doing design back in the days of CD ROM development using applications like Director? It's more like that. kind of UI design. Definitely do not think about web page metaphors any longer. No forward and back buttons. No page refreshes. No tables or frames. Think more about "If I could do anything, what would be the best possible user experience?"

Think:

click and drag
animated feedback
custom ui widgets
dynamic layouts that change to accomodate changes in the data or interaction

[dlewis]

The biggest differnece when creating wireframes (schematics) or flow diagrams for projects suited for Laszlo (web apps) vs. an html site is really the approach.

Traditionally when laying out something like this for an HTML project you define "where" a user goes when they click on a certain spot or navigation element. You're forced to focus on navigation and how information and data are broken down hieratically .

When creating a Laszlo app you aren't confined to a lot of the same conventions. You can really think "outside the box". Our planning really is more centered on the functionality of the "app". What are the choices for a given selection? What's the best methphor for presenting those choices? Is there a better way to guide the user through the process? Etc.

Another thing to think about is "use cases". On some projects we'll create fictitional people and give each a list of tasks they need to perform within the given app. This helps us think through a series of problems and come up with solutions as well as present the design proposals in a form that can be easier to follow.

It's great to be able to design something that visually and functionally is the EXACT same on all platforms and browsers. We usually create storyboards and diagrams in Illustrator and Photoshop. We might have a dozen illustrations that relate to one another but show different "states" or levels of functionality of the app. Actually pretty similar to doing this for an HTML project, just not as linear.

Does that help? BTW, we had Thai...

-Dan

[kentyler]

Both page views and form views move the user through a set of pre-constructed spaces (even if they have "options"). Designing the complexity of this space is very difficult and leads down dead ends. There should be a way to design the different components of an application so they could be assembled/traversed in any legal assembly.

Then you could start by building the smallest useful piece, and then add another piece and give them a way to relate to each other, and keep adding the next most useful piece, giving each piece an interface that lets it relate to other pieces as you add it.

[Grig]

I think about each set of functions as a view. Then imagine presenting each view in a common, single screen. The nature of LZX allows for these views to be moved around, opened & closed, shrunk & expanded, squashed, hidden, etc...

Look at slick UIs shown mocked-up in Sci-Fi movies! There's a whole niche of people who design UI's for movies. Some that come to mind: minority report, freejack, ghost in the machine, james bond?... Fun!

Can anyone else suggest other movies? I've seen some corporate visions of the future that have this too. The future is NOW!

I seem to remember someone online collecting JUST video grabs of UIs... I'd love to dig that one up again!

-=Grig