General Interface Organization

paulvill / paulvill.github.io

The Embryo Digital Atlas is an open-source project aiming at building a web based platform to visualize complex experimental datasets in an easy and beautiful way.

http://www.embryodigitalatlas.org

MIT License

9 stars 3 forks source link

General Interface Organization #10

Open paulvill opened 7 years ago

paulvill commented 7 years ago

A general interface should contain some tabs to 1) Upload Images 2) Browse available datasets 3) Introductory ideas to developmental biology 4) A legend for the visualizations 5) A legend for the various keys

paulvill commented 7 years ago

Maybe we could use css grid

paulvill commented 7 years ago

Nice Principles of User Interface Design - Thanks @lutheranne

paulvill commented 7 years ago

As a first attempt to design the general organization of the navigation in the website, here is a drawing that I have made in pdf Outline Website.pdf

and in power point Outline Website.pptx

Please have a look @lutheranne and @defenestrated !

lutheranne commented 7 years ago

@paulvill Thank you for sharing! Let us talk about the usability flow, design choices for the interface and the interaction on your last page in our next call.

defenestrated commented 7 years ago

hi all! @paulvill and i put together some site mockups today -- shared here. they illustrate a unified design for interacting with the datasets:

primary focus goes to the 3D+time model, with manipulation options grouped by type.
meta-level info about the project and the site goes in the header, linked to pages that follow the "sample-page" design.
dataset-related information lives in the footer, which will allow for changes to the currently-in-view dataset but also for browsing and uploading other datasets. note there's a lot that still needs to be thought through here in terms of organization and navigation.

eda_sitemocks-base.pdf eda_sitemocks-footer-hover.pdf eda_sitemocks-footer-open.pdf eda_sitemocks-header-expanded.pdf eda_sitemocks-sample-page.pdf

defenestrated commented 7 years ago

here's a demo of how we can populate the footer with "tiles" based on what's in a centralized json file. note that there's currently no interactivity, but eventually each tile will be clickable and will call functions in the main viewport with relevant parameters (i.e. to reload visualization with the new, chosen dataset): https://paulvill.github.io/layout_test/json-populate-demo.html