Wrong choice of icons and more design problems

[heliodor]

https://openbeta.io/area/1db1e8ba-a40e-587c-88a4-64f5ea814b8e/usa

All kinds of design problems:

1) The map button should have a "map" icon not an "arrow" icon

2) The share button should have a "share" icon instead of the "link" icon

3) Font should not be monospaced. Those fonts hinder legibility.

[Noslepr]

I would like to work on this issue if possible.

[athuv]

I've been working on this issue locally and have successfully implemented a fix for it. I've outlined the changes I made below.

1. Corrected the map and share buttons icons.
2. Changed the font to Inter.
3. Implemented Nextjs font optimization (next/font).

I'm eager to continue contributing to this project, and I'm looking forward to learning from the experienced hands here. I've just started exploring open-source contributions, so any guidance or feedback would be greatly appreciated.

[musoke]

@athuv, please submit a pull request referencing this issue so others can have a look at your proposed changes.

[vnugent]

@heliodor thanks for your feedback.

• ISO font: The font was recommended by a designer. I agree that it doesn't look as pleasing in some places especially in larger sizes. Let's address this in the next design overhaul. We'd love to have your participation!
• Link icon:The 3-dot share-network icon is definitely popular on some platforms (Android?) but it's largely a matter of preference. You can find similar chain link icon being used on NY Times and el País website We're currently using a variant of the 3-dot icon, rotated 90 degrees to for the crag symbol.

@athuv I'd happy to accept your PR with a change to the map icon. Please use <MapTrifold /> imported from '@phosphor-icons/react/dist/ssr'.

Current crag symbol

Similar example of share link icon

[heliodor]

For design, consider making decisions by first asking, "what is standard practice on the web?" The entire internet (and print books too) do not use monospace fonts.

Regarding the screenshot of El País, "Copy Link" is not the same as "Share", hence different icons. Here's what I see for the NYTimes:

@vnugent are there any open issues to discuss the overall design and usability? Is there a process in place for that? If it's helpful, I can provide a list of things that catch my attention when I click around the site in terms of design and usability.

[musoke]

Regarding the screenshot of El País, "Copy Link" is not the same as "Share", hence different icons.

Pressing that button copies the link. As far as I can tell your reasoning says the icon is correct but the text should change?

[athuv]

Why aren't ESLint and Prettier being used in this project?

[musoke]

Why aren't ESLint and Prettier being used in this project?

ts-standard is being used. Please open a separate discussion if you think that is insufficient.

[heliodor]

@musoke, I hadn't tried pressing the button. It does indeed copy the link.

The easiest fix would be to change the text to "Copy Link".

However, if you consider OpenBeta's goals, you want a button that tells people to "Share". So, I would change the icon to a share icon and create a small dropdown like the one in the NYTimes screenshot above. Here are the link formats and params that the NYTimes uses in that dropdown box:

<a href="mailto:?subject=NYTimes.com%3A%20SpaceX%20Makes%20Progress%20in%202nd%20Launch%20of%20Giant%20Moon%20and%20Mars%20Rocket&amp;body=From%20The%20New%20York%20Times%3A%0A%0ASpaceX%20Makes%20Progress%20in%202nd%20Launch%20of%20Giant%20Moon%20and%20Mars%20Rocket%0A%0AThe%20journeys%20of%20Starship%E2%80%99s%20two%20parts%20ended%20in%20separate%20explosions.%20But%20the%20engineers%20at%20Elon%20Musk%E2%80%99s%20spaceflight%20company%20overcame%20problems%20that%20marred%20the%20rocket%E2%80%99s%20first%20flight%20in%20April.%0A%0Ahttps%3A%2F%2Fwww.nytimes.com%2F2023%2F11%2F18%2Fscience%2Fspacex-starship-launch.html%3Fsmid%3Dem-share" target="_blank" aria-label="Email this article" rel="noopener noreferrer">

<a href="https://www.facebook.com/dialog/feed?app_id=9869919170&amp;link=https%3A%2F%2Fwww.nytimes.com%2F2023%2F11%2F18%2Fscience%2Fspacex-starship-launch.html%3Fsmid%3Dfb-share&amp;name=SpaceX%20Makes%20Progress%20in%202nd%20Launch%20of%20Giant%20Moon%20and%20Mars%20Rocket&amp;redirect_uri=https%3A%2F%2Fwww.facebook.com%2F" target="_blank" aria-label="Share on Facebook" rel="noopener noreferrer">
<svg class="css-uz6jad" viewBox="0 0 7 15" width="7" height="15">

<a href="https://twitter.com/intent/tweet?url=https%3A%2F%2Fwww.nytimes.com%2F2023%2F11%2F18%2Fscience%2Fspacex-starship-launch.html%3Fsmid%3Dtw-share&amp;text=SpaceX%20Makes%20Progress%20in%202nd%20Launch%20of%20Giant%20Moon%20and%20Mars%20Rocket" target="_blank" aria-label="Share on Twitter" rel="noopener noreferrer">

<a href="https://t.me/share/url?url=https%3A%2F%2Fwww.nytimes.com%2F2023%2F11%2F18%2Fscience%2Fspacex-starship-launch.html%3Fsmid%3Dtel-share&amp;text=SpaceX%20Makes%20Progress%20in%202nd%20Launch%20of%20Giant%20Moon%20and%20Mars%20Rocket via @nytimes" target="_blank" aria-label="Share on Telegram" rel="noopener noreferrer">

<a href="https://www.linkedin.com/shareArticle?mini=true&amp;url=https%3A%2F%2Fwww.nytimes.com%2F2023%2F11%2F18%2Fscience%2Fspacex-starship-launch.html%3Fsmid%3Dli-share&amp;title=SpaceX%20Makes%20Progress%20in%202nd%20Launch%20of%20Giant%20Moon%20and%20Mars%20Rocket" target="_blank" aria-label="Share on LinkedIn" rel="noopener noreferrer">

<a href="https://api.whatsapp.com/send?text=SpaceX%20Makes%20Progress%20in%202nd%20Launch%20of%20Giant%20Moon%20and%20Mars%20Rocket%20https%3A%2F%2Fwww.nytimes.com%2F2023%2F11%2F18%2Fscience%2Fspacex-starship-launch.html%3Fsmid%3Dwa-share" target="_blank" aria-label="Share on Whatsapp" rel="noopener noreferrer">

<a href="http://www.reddit.com/submit?url=https%3A%2F%2Fwww.nytimes.com%2F2023%2F11%2F18%2Fscience%2Fspacex-starship-launch.html%3Fsmid%3Dre-share&amp;title=SpaceX%20Makes%20Progress%20in%202nd%20Launch%20of%20Giant%20Moon%20and%20Mars%20Rocket" target="_blank" aria-label="Share on Reddit" rel="noopener noreferrer">

They all end with: target="_blank" aria-label="Share on ____________" rel="noopener noreferrer"

[vnugent]

it are there any open issues to discuss the overall design and usability? Is there a process in place for that? If it's helpful, I can provide a list of things that catch my attention when I click around the site in terms of design and usability.

Can you create one and list what you see? A list format is best and order them by most to least important to you. Thanks!

[enapupe]

@heliodor I agree with your comment re sharing/copying link. They are different and we should make it coherent. I'm a fan of moving fast and keeping changes small so I'd

1) Reword it to copy link to make it in sync with the icon 2) Add an issue (to backlog) to improve that into a full featured sharing mechanism, maybe we could use https://developer.mozilla.org/en-US/docs/Web/API/Web_Share_API where available.

@athuv I asked myself the same thing (re prettier and eslint) when I made my first contribution, however I haven't given ts-standard a good chance yet. Maybe we should start a fresh issue and discus pros/cons of each tool?

[vnugent]

Fixed in #1093 Let's continue the eslint and prettier discussion in https://github.com/OpenBeta/open-tacos/issues/1087