Interface design and web interfaces is part of most software projects, I hope this shows that I am competent at creating designs for complex user interfaces, and that I do UI design with information architecture in mind.
I hope it shows I am comfortable with UI design for multiple resolutions & devices, and multiple inputs such as keyboard, virtual keyboard, mouse and touch without overly complicating things.
I also hope that this project shows some of my UI design philosophy and work process.
Building a forum for 2015 and beyond that works for desktops on the web and mobile but that can also work as as a stand alone mobile app.
Visitor: Find information, share information
Admin: Manage users, manage information posted by users, fight spam, build community
One of the first design decisions was to go for a tree-structure instead of a tag-based-structure.
The overview of the forum is almost instant, getting to where you want is a click away. (see image below)
Mobile first, but not at the cost of ipad and desktop users.
Instant feedback for menus and on most actions using latency compensation.
Pre-load and cache relevant parts of the forum for instant browsing.
Be crawlable by search engines.
No documentation – instead *everything* has it’s own relevant tooltip.
No backend – instead of just change what you see, where you see it.
Below I explain some of my design thinking as a UX designer when creating this forum.
On load the forum only shows one column (see below).
Select a “forum” and threads from that forums opens in column 2. (See below)
On mobile the whole screen would move to show only column 2 with a back button.
Clicking the create thread button open an input box along with instructions.
Enter name of thread. This creates an unpublished thread that is continually autosaved on the server and visible only by this user. User then clicks publish when their post is ready.
This eliminates those “Oh I lost everything in my post” scenarios (see below).
The user is writing their post on the page, so it looks just as it will when posted, so no need for scrolling a textarea or fiddling with code-tags (see below).
Text editor is wysiwyg, and saves the result to database in simple markdown, mark a word and a box with options for “bold” opens up (see below).
Clicking the menu button opens a menu without any loading time or switch of screens.
Each admin option is clearly explained in a tooltip (see below).
Instead of a behind-the-scenes settings panel, the user can toggle “Admin mode” (see below).
In admin mode, buttons appear for creating new forums and categories.
Most things are simply editable in place and autosaved (see below).
The user does not need to find or learn the name of any text field and can instantly see the result without the need for back and forth jumping.
Categories and threads can be dragged.
Tibit Interactive
Project 2015 -->
Team size: Just me atm
Time: 1 month
My roles: {
Design,
Programming
}
Thank you for taking your time to get this far!
If you wish to contact me, click the button below.
Click here to get in touch