Stringland Tech V2.0 UX

-

Stringland Tech UX design has been updated. The basic idea is to use search bar, well organized cards and labels design, and adding more detailed description in each card. It will be easier for users to target the functionality they want. For function page, only the function related elements are retained.

Homepage

The homepage link is still the same:

https://stringland.github.io/web/

 

Here is the homepage screenshot:


Users can type keywords in search bar. The autocomplete can list top 10 candidate functions' names in the menu. Here is the screenshot:

All the functions are described in one corresponding card; and every card is under one corresponding label.

Currently there are 10 labels. Most of them are the same as old UX version:

* Math

* Physic 

* Time

* Security (Hash, Password generation and AES encryption feature)

* Network (HTML, URL and IP conversion features)

* String

* Color

* Text Editor

* Games

* Upcoming features

Here is the sample screenshot:


If user click the card, s/he will be redirected to corresponding function page.


Function Page

Function page now is much more concise. Only elements related to the function are retained. Those elements used for navigation have been removed.

Here is one sample screenshot:




Comments

Post a Comment

Popular posts from this blog

Angle Conversion Feature Release

-
Image
 Today StringLand Tech starts to support angle conversion feature. 😁 Here is the Angle Convert web page link : https://stringland.github.io/web/#/math_operations/convert_angle And here is the screenshot:   Currently, only following angle units are included: Degree Radian Gradian Gon Turn Arc Minutes Arc Seconds Quadrant Sextant Hexacontade Octant About the conversion formula, please check the Wikipedia page: https://en.wikipedia.org/wiki/Angle
Read more

Using Next JS in Stringland Tech

-
Next JS - Server Side Generation Previously Stringland Tech used React JS, which caused an issue: Google could only index home page. That is because other pages are generated on the fly when browsers visit their links, which make it hard for search engine to add them into index. To do the SEO (search engine optimization) so that Stringland Tech is easier to find by everyone, while without making too much code changes, we rewrite the whole front end side using Next JS. Next JS support web pages server side rendering. It means that every pages have their own static html files and they can be easily collected by search engine and added to index. Another reason to choose Next JS is that it is based on React JS. Stringland tech front end code change scope can be reduced. Here is the Next JS wiki page .  And here is Next JS official pages .   How to Migrate from React JS Next JS official document has complete guideline . Actually the basic idea is simple: For routing and redirection, just fo
Read more

Adding Direct Entries for all the Lands

-
Image
As we know, the homepage has card for each function module. Each module has a picture and description for that function, like Math, Text Editor, and so on.  When you click the card, you will be redirected to one of the sub functions of the module. However, that redirected sub function page is fixed, and it may not be what users' want. So now we add a Go To button in each card. When you click that button, a list of sub functions will be shown, and you can click any one of them to go to the corresponding sub function page. Here is the sample screenshot: Hope this UI improvement can improve your user experience. 👋
Read more