Website designs Internet.nl

[JasperKoopmanschap]

Here are the designs that I presented yesterday. Thank you for the already given feedback. Feel free to comment here or bundle the feedback all at once. As discussed, I've uploaded the desktop and mobile designs. We'll keep in contact! Have a good day :).

Desktop designs:

D1 0 - Homepage:

---

D1 1 - Laadscherm-1:

---

D1 1 - Laadscherm:

---

D1 1 - Test tools:

---

D1 2 - Test tools:

---

D2 0 - Kennisbank:

---

D2 1 - Kennisbank Detail:

---

D3 0 - Nieuws:

---

D3 1 - Nieuws Detail:

---

D4 0 - Over ons:

---

D5 0 - Hall of Fame:

---

D6 0 - Service Contact:

---

Mobile designs

M1 0 - Homepage:

---

M1 1 - Test tools-1:

---

M1 1 - Test tools-2:

---

M1 1 - Test tools:

---

M1 2 - Test tools:

---

M2 0 - Kennisbank:

---

M2 1 - Kennisbank Detail:

---

M3 0 - Nieuws:

---

M3 1 - Nieuws Detail:

---

M4 0 - Over ons:

---

M5 0 - Hall of Fame:

---

M6 0 - Service Contact:

---

[wsslmn]

These designs are part of Website Redesign issue #1252

Joint feedback (under construction)

The current state is the combined feedback of bk, bwb and cw.

General

• Call to action on both homepage and the test result page is a huge improvement. Although the only comment is: the testing (progress and showing result) is not made more fun yet.
• It looks like the text of the logo now has 3 different colors instead of the current 2? (now: #00BFD6 & #FFAC40)
• Test result icons: the 'shields' 🛡️ make the ✔️ and ⚠️ harder to see (A11Y), currently for the main tests a large check is used (and the sub tests uses the shield variants, which we probably in hindsight want to drop for A11Y reasons).
• Sticky menu A11Y contrast with content: currently there is a sticky auto-hide menu, both with a wide bar and shadow, the question is if just a shadow (as suggested) is enough in terms of contrast between the menu and body content if there is a partial overlay of the body content.
• Website test icon is gone?
• Link to 'about the test' is gone, how to reach these pages?
• Link button consistency: are all orange link buttons an action?
• Where do 'Test je website/e-mail domein' links go to?
• Amount of content blocks on homepage is pretty large, this is especially an endless scroll on mobile. The design should be modular enough so that a block can be removed (e.g. currently we don't have the content for de USP's, although the design is appreciated). Same goes for the Knowledge Base & FAQ, the current setup is that it is called Knowledge Base while the URL is /faqs/, there currently only is copy for the Knowledge Base, so the design should be modular enough to not show the FAQ part of the page until we find the urge to make the content for that.
• On the homepage there are quite some different font sizes, should we pick a fewer variations for design consistency?
• On the Knowledge Bank page there is the "Website" tag, an example of the current page about IPv6 is a structured list, the repetition of these tags seems to be non ideal, also to see the grouping.
• Connection icon with 'Signal-strength' hints to testing signal quality, while the connection test is about (the harder to capture in an icon):
  • Modern addresses reachable (IPv6)
  • Domain signature validation (DNSSEC)

Desktop 🖥️

• Not a fan of the popup 'dialog' for the different tests (D1 1 - Laadscherm and D1 1 - Laadscherm-1).
• The 🔍 search can be dropped (currently there is no search), while a dark mode switch/override (🌙/☀️) can be added (see #1054), note I'm unsure if it should be a choice between default (selected and resulting in the prefer-color pick)/dark/light, or dark/light (where the prefer-color pick is selected).

Mobile 📱

• Not all tests are 'above the fold' on mobile, maybe change on mobile to a bottom tab navigation to have all tests reachable without a scroll?
• Can the menu-bar on mobile be improved in terms of, not just '🔎 Internet.nl       Menu ☰'. E.g. just the 🔎 icon (the tagline is too small on mobile for A11Y I think), and some icon+text options (e.g. '🔎 Test, ✉️ Contact, Menu ☰').
• The proposed design has boxes around content, this will increase the size needed (currently a lot of content e.g. FAQ and HoF are plain condensed lists). This extra space can be both good and bad for A11Y, a proper balance needs to be made between (from some old W3C Mobile A11y Best Practices page):
  • Avoiding unnecessary scrolling
  • Separating elements by a enough space to facilitate activation by touch

Desktop designs 🖥️

D1 0 - Homepage

• Options to alternate the blocks that give access to the website, mail, connection test, and copy to quicly explain why a visitor should do that.
• Hall of Fame, is it possible to show both some hosters, and some newly added domains?
• "Onze missie" div currently doesn't have an option to read more about the organisation or the parties behind the website.

D1 1 - Laadscherm-1

• Could this be made 'more fun' with a small animation, do something to the domain name etc.

D1 1 - Laadscherm

• Input misses an @ prefix.
• Test button does not have the usual →.

D1 1 - Test tools

D1 2 - Test tools

• Make the additional tests more clear and display if a domain already has a 100% score for the email test.
• Keep the order of the sub tests
• Add a space where older results can be shown/listed
• Divide the score ring into 5 parts that show how each part scored (as discussed)
• Suggestion to add something visual and a connection to the tested website:
  • add a favicon (examples like https://www.hardenize.com/report/internet.nl/1721052636 or https://hosting-checker.net/websites/internet.nl, tech note: currently not supported in tech, should look good without icon too)
  • URL directing to the website
  • Page Title? (e.g. https://hosting-checker.net/websites/internet.nl)
  • optional page screenshot? (currently not supported in tech, but option would be nice to have)

D2 0 - Kennisbank

• Could the knowledgebase/FAQ be searchable? (although currently mostly url's as listed at the Detail comment, a generic optional search element for just the KB or news would be nice for the future; internal tech note: maybe implemented as static search, e.g. https://pagefind.app/)

D2 1 - Kennisbank Detail

• Article is oriented towards copy, while the current pages mostly contain url's that point towards different articles, sources, and data. How would that look for this design?

D3 0 - Nieuws

D3 1 - Nieuws Detail

D4 0 - Over ons

• Would like to see the logo's of all platform members visible ~14 logo's (maybe more)
• The current page contains more copy. What would that look like?

D5 0 - Hall of Fame

• See #1449 for suggestions on the hosters (mainly displaying additional information, and filters)
• Add coppy about the HoF for hosters, and an url pointing to information on how to get listed as a hoster (see current page content)
• See #1448 for suggestions on the HoF for champions (website + email)

D6 0 - Service Contact

• We are currently not reachable by phone.
• Channels: email for questions , Address for physical mail, Github for technical issues

Mobile designs 📱

• @wsslmn: We should test the behavior of mobile users/visitors, I don't have enough feeling to add relevant feedback.

M1 0 - Homepage

• USP's could be removed, or only visible after tap

M1 1 - Test tools-1

• How does this call-to-action overlay work? How to open it? (I cannot immediately see how in M1 1 - Test tools)

M1 1 - Test tools-2

M1 1 - Test tools

M1 2 - Test tools

M2 0 - Kennisbank

M2 1 - Kennisbank Detail

M3 0 - Nieuws

M3 1 - Nieuws Detail

M4 0 - Over ons

M5 0 - Hall of Fame

M6 0 - Service Contact

M6 0 - Service Contact