| layout | permalink | title |
|---|---|---|
default |
/mockup |
Mockup |
📝 There is no implementation here yet, but to give you an idea what it would look like, here is a "script" (as in "for a performance", there's no code here) of what should be happening here.
🖱️ Hints with this icon indicate what the user does. The tutorial relies on clearly telling the user what can be done as well as having nothing else to do in the app until it's complete. That said, not all functions are disabled in order to facilitate skipping the tutorial.
This is a mock-up of what the app's main screen could look like.
❌💡 Welcome! This is where the app will tell you know what topics you're ready to explore right now. Click the title of the topic to open its page. Once you've explored it, click its checkmark on the right in order to advance.
Skillforest: Topic ✔️
The app detects when it's being opened for the first time and initializes itself with a tutorial goal that explains how to use the app. Unfortunately, this is a chicken-and-egg situation, so a few special nudges are necessary.
🌟 Topic titles are clickable and lead to content that's more or less what's meant to be there. The content there is a part of the tutorial of course, so for the full experience you'll have to read them as well. It's a decent simulation, as they will open in the browser in the final version too.
Icons aren't clickable, but those that are meant to be buttons are annotated with title attributes and display hints on hover. On mobile there is unfortunately currently no way to see them, but they don't contain anything critical.
🖱️ User reads the Topic page, then comes back to the app, dismisses the hint with a ❌ and clicks the ✔️ on the right.
The hint is gone, and the link list is updated.
Also, the ⏪ button, that opens the list of explored links, is now active, as there is one item on that list now: Topic.
🖱️ The user reads the Source page, then comes back to the app and clicks the ✔️ on the right.
🖱️ The same procedure done before now continues on with three other topics, in no particular order.
With the basic topics covered, the goal is in sight, the "Introduction" source.
⏩ is disabled to indicate there are no more sources up ahead.
Hitting ✔️️ on the Introduction source, which was the goal of the tutorial, marks the end. Selected goal is dropped and the app explains what happened and what'll happen next.
🏁 All set goals reached!
💡 If you find something else you'd like to learn, add it as a goal to the app.
📚 Your learnings from all your past goals are saved, so when tracking other goals in the future, the concepts you've already explored will be skipped.
A number of elements have been deliberately omitted from the mockups. To name a few:
- Goal selection — the app may be able to track multiple goals at once and switch between them, rebuilding the "current" sources to match
- Topic browser — it's only needed for the more elaborate operations like
In early versions of this "script" I toyed with the idea of using icon-only buttons, even in the "Past", "Current" and "Future" line.
I'm not entirely sure I like the "media player" analogy in the UI in general (aside from randomly disgustingly inconsistent emojis on some systems, that's just the artifact of this quick & dirty demonstration). It certainly ticks a lot of boxes, like succinctly representing "past" and "future" as well how the concept of "media tracks" maps to "SF goals" (⏮️ and ⏭️ for switching between tracks goals).
But at the same time I feel there for whom it's counterintuitive, it'll be really counterintuitive.
There does seem to be some potential there though.