search

iiab / iiab

Internet-in-a-Box - Build your own LIBRARY OF ALEXANDRIA with a Raspberry Pi !
https://internet-in-a-box.org
GNU General Public License v2.0
937 stars 74 forks source link

Use a common design system across homepage, captive portal, and Maps #1933

Open veeara282 opened 5 years ago

veeara282 commented 5 years ago

We should try using a common design system for apps we own, including the homepage, captive portal, and Maps. Open source design systems to consider:

mikkokotila commented 5 years ago

I'm 100% in favor of this. As it had already come out before, I <3 material but at a glance Carbon looks good as well. I did work with UX since -95 and would be happy to contribute in some capacity to this.

I'm least in favor of US gov version, for the very reason @aidan-fitz mentions. Also I don't think American government even pretends to be interested in public good unless it's American public. That's ok, but probably not great in terms of globally aligned community projects. For example, American foreign aid has for long been "strings-attached" which also led to most of the other countries following the same model. As a result, there are literally few countries left that have notable budgets and do actual aid work (as opposed to geopolitical development work). Also it looks by far the weakest of the three.

mikkokotila commented 5 years ago

UPDATE: had a look through Carbon and it seems more like IBM marketing and an attempt to say "we care about open source and community" rather than serious competition for Material.

mikkokotila commented 5 years ago

For the sake of completeness, Bootstrap(Twitter) should be mentioned here as well. I've used it for years, and the first thing when I setup my first school server in Ladakh was to redo the main page with bootstrap (and some bash scripts that auto generated HTML dynamically based on whatever content was available).

veeara282 commented 5 years ago

UPDATE: had a look through Carbon and it seems more like IBM marketing and an attempt to say "we care about open source and community" rather than serious competition for Material.

I agree, it seems like IBM did not put much thought into how non-IBM apps can incorporate Carbon. Bootstrap is okay but has the stigma of being overused in really corny ways, so I've avoided it myself.

Material has a theme builder in Glitch. I personally feel like Material is too Googley and Android-specific but haven't done much with it, so I'm curious as to how I'd feel about it once I use it myself.

holta commented 5 years ago

Please while considering modern usability (https://material.io is a big advance, regardless what we each/all think of Google!!) do also review https://github.com/iiab/iiab-admin-console/tree/master/roles/js-menu especially, as described in https://github.com/iiab/iiab/wiki/IIAB-Menuing

It's worth looking closely into this as @tim-moody especially has spent years of work here, and while some may not agree with certain styling choices baked in there, it's what allows IIAB (and its http://box.lan home page) to work offline across most all platforms today!

holta commented 5 years ago

@avni, @darkenvy & all who can help! How do we create a holistic view as to what the challenge is in front of us, with possibly related field UX design requirement questions below? While at the same time not biting off more than we can chew, i.e. together as a team defining what's really possible?

holta commented 5 years ago

Just FYI @aidan-fitz mentions Eli Woolery's work at https://www.designbetter.co/design-thinking and https://www.designbetter.co/design-thinking/empathize in relation to design evolution/approaches alluded to at #1919 [Accessibility issues on http://box homepage]

holta commented 5 years ago

From @aidan-fitz:

Every now and then there may be a need for a "radical redesign" but often best to avoid that according to these fashion hater folk anyway :)

e.g. "Stop Redesigning And Start Tuning Your Site Instead" https://uxmyths.com/post/712537920/myth-you-need-to-redesign-your-website-periodically

avni commented 5 years ago

Agree with tuning. Not sure we have the better answer to the question being posed yet.

@avni, @darkenvy & all who can help! How do we create a holistic view as to what the challenge is in front of us, with possibly related field UX design requirement questions below? While at the same time not biting off more than we can chew, i.e. together as a team defining what's really possible?

From the checklist of related items, I am supportive of prioritizing: #1831 and #1775.

1831 enables admins to quickly update, control, and share how content packs and IIAB apps are presented to their users. This seems like a larger level of effort that we may want to do wireframes for in order to test the admin workflows and interface.

1775 enables viewing from different modalities. It would be helpful to have data showing need/priority for this item but feel intuitively that it is needed given the prevalent mobile usage in developing areas. And if this is hidden functionality that needs to be surfaced, perhaps this is a low lift to complete?

Re #1866 - I think we need further exploration/research before committing to a grid or a different UX approach. Wondering if the upcoming Mexico and Boston trips would be a good time to explore options, provided there is time to do the research beforehand and have a handful or less of ideas that would be feasible and impactful.

holta commented 5 years ago

1831 enables admins to quickly update, control, and share how content packs and IIAB apps are presented to their users. This seems like a larger level of effort that we may want to do wireframes for in order to test the admin workflows and interface.

Indeed #1831's requires an evolving Community Ecosystem that could get ugly if not designed/seeded well (e.g. oversharing & other well-known & very real risks of social media!)

1775 enables viewing from different modalities. It would be helpful to have data showing need/priority for this item but feel intuitively that it is needed given the prevalent mobile usage in developing areas. And if this is hidden functionality that needs to be surfaced, perhaps this is a low lift to complete?

@tim-moody might have something like this nearly complete within https://github.com/tim-moody/iiab-admin-console/tree/0.3.7-devel if I understood him correctly last week?

Re #1866 - I think we need further exploration/research before committing to a grid or a different UX approach. Wondering if the upcoming Mexico and Boston trips would be a good time to explore options, provided there is time to do the research beforehand and have a handful or less of ideas that would be feasible and impactful.

We should recruit someone (ideally a comparative outsider) to compare IdeasBox, Kolibri, Kiwix (and other?) grid/column views that exist today. To very conscientiously think thru (and document) the failures/advantages of each, in context with http://offline-internet.org and similar projects, many of which drifting in these directions @mdash; even I'm not sure a grid view actually helps IIAB at this point!

But if 256GB microSD cards really are becoming maintstream (already deployed on IIAB's in schools and libraries in Ghana, Uganda, etc) then yes we have a growing problem with 50-to-100 Content Packs + IIAB Apps on a single IIAB device. This is too many for most teachers: i.e. becoming unmanageable fast, and I certainly don't know the answer.

SJ Klein (@metasj) advocated for "collapsable folders" to try to address this serious TMI (too much information) UX problem — so end-user teachers (and possibly even students) can rearrange the appearance to become much more practical? Plausible but this opens up further can-of-worms questions! Regardless: most classrooms don't want to be flooded with 50-100 IIAB home page items, certainly that's far too overwhelming as they are presented today.

Cynically, some suggest disallowing (or strongly discouraging!) IIAB's from permitting more than ~30 Content Packs / IIAB Apps, to put an end to this "digital hoarding" — and while this suggestion was made facetiously — it turns out we have a very real problem on our hands here, that we never expected, as a result of storage/disks & gigabit home connections growing "too fast indeed" over the past year!

avni commented 5 years ago

SJ Klein (@metasj) advocated for "collapsable folders" to try to address this serious TMI (too much information) UX problem — so end-user teachers (and possibly even students) can rearrange the appearance to become much more practical? Plausible but this opens up further can-of-worms questions! Regardless: most classrooms don't want to be flooded with 50-100 IIAB home page items, certainly that's far too overwhelming as they are presented today.

Collapsible folders are one possible solution, but it's like user's desktops - they start off empty but unless they are meticulously maintained, they get cluttered and things that are archived in folders are rarely accessed. I would be more inclined towards a simple UI / search that allows the user to quickly find what they need. Discoverability for users in a developing world is a potential problem though with this type of solution and needs to be thought through.

mikkokotila commented 5 years ago

it's what allows IIAB (and its http://box.lan home page) to work offline across most all platforms today!

A modern UX framework, such as Material, will be focused on ensuring this. Almost certainly, far better than a home-baked one would.

mikkokotila commented 5 years ago

In terms of UX I have to observations over the years:

The initial page should have nothing but a suggestive search bar, and it should eventually support voice. The highlighted services should not be static content, but things like video streaming, messaging, market places, and dynamic content like current weather, AI-powered weather predictions, etc.

veeara282 commented 5 years ago

The highlighted services should not be static content, but things like video streaming, messaging, market places, and dynamic content like current weather, AI-powered weather predictions, etc.

A weather service on IIAB is actually a good idea!

holta commented 5 years ago
  • the need to have global search focus content access point
  • the need to move away from content and towards empowering content creation

FWIW it can be disheartening that Kiwix & OLPC/Sugarizer have both invested a decade (more or less!) in these 2 respective epic challenges, and each have (generally!) quite little to show for it, on these 2 very challenging fronts anyway. Just as background:

1) For global search, Kiwix invested heavily into cross-ZIM search (most so in recent years) and the results to date are not very functional — particularly when almost any Wiktionary ZIM file exists in the mix e.g. on the IIAB device — in which case the search results become polluted yet further, anyway very impractical so far :/ 2) Most all observers of the decade-long OLPC global experiment (the more honest ones anyway ;-) came around to admitting that the social infrastructure on the ground was the critical missing ingredient — i.e. most all OLPC initiatives around the world did not lead to much local content creation and local programming. Even despite this being one of THE most central of the project's goals — with well over $1 Billion invested all told, associated with the approximately 3 Million laptops distributed and associated costs. There are exceptions of course (Uruguay, arguably, and others!) that invested in the hard work of facilitating local content/programming of different kinds.

Not that we should give up, nor cry over spilt milk!! But also admit the quite over-arching nature of both these 2 particular (very important!) community goals~

holta commented 5 years ago

FYI @thotmx mentions he uses Bulma (https://bulma.io) and likes it a lot when a simple CSS framework is needed!

traverseda commented 5 years ago

Screen Shot 2019-09-10 at 15 19 21-fullpage

These days with flexbox layout is a lot easier to do. Here's the frontend to a xapian+flask search service I'm working on building. That is a few lines on top of sakura.css.

I think the best way to do a unified look and feel is to provide a minimal scss file like that and let people add css on top of it. You can put bootstrap on top of something like sakura, you can't put bootstrap on top of something like material or primer. I think bootstrap is too high of a target for this, especially since it's mostly just a thin wrapper around flexbox these days. Keep it simple, start with plain html (styled with sakura) and add some custom css for layout issues that are unique to your project.

Plaintext/plain-html is king. Start by making that look good and step things up from there.

holta commented 5 years ago

Thanks @traverseda for the recommendation — not unrelated to your earlier:

650 Use solr+shine for local search [or Sphider? or Xapian?]

traverseda commented 5 years ago

Not unrelated, might have some news on that front soon-ish. Right now I'm having some issues de-duplicating web requests so it doesn't try to index the same pages over and over again. It's fine, I'm just trying to avoid adding a database dependency that isn't xapian.